
Security News
TypeScript is Porting Its Compiler to Go for 10x Faster Builds
TypeScript is porting its compiler to Go, delivering 10x faster builds, lower memory usage, and improved editor performance for a smoother developer experience.
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 5,758 weekly downloads. As such, react-native-flip-card popularity was classified as 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
TypeScript is porting its compiler to Go, delivering 10x faster builds, lower memory usage, and improved editor performance for a smoother developer experience.
Research
Security News
The Socket Research Team has discovered six new malicious npm packages linked to North Korea’s Lazarus Group, designed to steal credentials and deploy backdoors.
Security News
Socket CEO Feross Aboukhadijeh discusses the open web, open source security, and how Socket tackles software supply chain attacks on The Pair Program podcast.