react-native-gesture-flip-card
A pure javascript implementation of a flip card animation using gesture for React Native.
Update example to use react-native 0.67.3
Use LogBox
to ignore unnecessary warnings. (To use LogBox
you need to upgrade react-native to at least 0.63 )
npm install --save react-native-gesture-flip-card
import GestureFlipView from 'react-native-gesture-flip-card' ;
< View style = { styles . container } >
< GestureFlipView width = { 300 } height = { 500 } >
{ renderBack ( ) }
{ renderFront ( ) }
< / GestureFlipView >
< / View >
const renderFront = ( ) => {
return (
< View style = { styles . frontStyle } >
< Text style = { { fontSize : 25 , color : '#fff' } } > { 'Front' } < / Text >
< / View >
) ;
} ;
const renderBack = ( ) => {
return (
< View style = { styles . backStyle } >
< Text style = { { fontSize : 25 , color : '#fff' } } > { 'Back' } < / Text >
< / View >
) ;
} ;
Props
type
description
required
default
width
number
width of view
true
height
number
height of view
true
onFlipEnd
function
callback on end of flip
false
perspective
number
perspective of the view
false
-1000
gestureEnabled
bool
enable or disable gestures
false
true
name
description
args
flipLeft
flip the card counterclockwise
flipRight
flip the card clockwise
< GestureFlipView
ref = { ( ref ) => ( viewRef . current = ref ) }
gestureEnabled = { enable }
width = { 300 }
height = { 500 } >
{ renderBack ( ) }
{ renderFront ( ) } />
viewRef . current . flipLeft ( ) ; // counterclockwise
viewRef . current . flipRight ( ) ; // clockwise