
Security News
Oracle Drags Its Feet in the JavaScript Trademark Dispute
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
react-native-flip-card
Advanced tools
The card component which has a motion of flip for React Native(iOS/Android)
The card component which have motion of flip for React Native(iOS/Android)
npm i react-native-flip-card
import FlipCard from 'react-native-flip-card'
<FlipCard>
{/* Face Side */}
<View style={styles.face}>
<Text>The Face</Text>
</View>
{/* Back Side */}
<View style={styles.back}>
<Text>The Back</Text>
</View>
</FlipCard>
<FlipCard
style={styles.card}
friction={6}
perspective={1000}
flipHorizontal={true}
flipVertical={false}
flip={false}
clickable={true}
onFlipEnd={(isFlipEnd)=>{console.log('isFlipEnd', isFlipEnd)}}
>
{/* Face Side */}
<View style={styles.face}>
<Text>The Face</Text>
</View>
{/* Back Side */}
<View style={styles.back}>
<Text>The Back</Text>
</View>
</FlipCard>
Default: false
If you change default display side, you can set true
to this param. If you change side, you can pass bool
variable dynamically.
Default: true
If you want to disable click a card, you can set false
to this param.
Default: 6
The friction of card animation
Default: 0
The amount of perspective applied to the flip transformation
Default: false
If you set true, a card flip to horizontal.
Default: true
If you set false, a card not flip to vertical. If you set true both flipHorizontal
and flipVertical
, a card flip to diagonal.
vertical | diagnoal |
---|---|
![]() | ![]() |
(isFlipStart) => {}
When a card starts a flip animation, call onFlipEnd
function with param.
(isFlipEnd) => {}
When a card finishes a flip animation, call onFlipEnd
function with param.
Default:false
If you pass true
to alignHeight
param, the card keep height of bigger side.
Default:false
If you pass true
to alignWidth
param, the card keep width of bigger side.
Default:false
If you pass true
to useNativeDriver
param, the card animation will utilize the native driver.
Inspired by react-flipcard
MIT
FAQs
The card component which has a motion of flip for React Native(iOS/Android)
The npm package react-native-flip-card receives a total of 38 weekly downloads. As such, react-native-flip-card popularity was classified as not popular.
We found that react-native-flip-card demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
Security News
The Linux Foundation is warning open source developers that compliance with global sanctions is mandatory, highlighting legal risks and restrictions on contributions.
Security News
Maven Central now validates Sigstore signatures, making it easier for developers to verify the provenance of Java packages.