React Native Action View
react-native-action-view
is an easy to use component that allows displaying swipeable buttons with a variety of transitions.
Using
Import the component:
;
Use the component:
<SwipeActionView rightExpansionSettings=buttonIndex: 0 leftExpansionSettings=buttonIndex: 0 rightButtons=title: 'Red' color: 'rgb(255, 0, 0)' {;} title: 'Green' color: 'rgb(0, 255, 0)' {;} title: 'Blue' color: 'rgb(0, 0, 255)' {;} leftButtons=title: 'Red' color: 'rgb(255, 0, 0)' {;} title: 'Green' color: 'rgb(0, 255, 0)' {;} title: 'Blue' color: 'rgb(0, 0, 255)' {;} > <Text style=styleswelcome> Welcome to React Native! </Text> <Text style=stylesinstructions> To get started swipe this view </Text> <Text style=stylesinstructions> Tap on a button or swipe fully </Text></SwipeActionView>
Configuration
Possible props are:
leftButtons
,rightButtons
title
orimage
,color
,callback
leftExpansionSettings
,rightExpansionSettings
- Control the button expansion settingsbuttonIndex
- The button to expand (Number)fillOnTrigger
- Whether to fill the button upon expansion (Boolean)threshold
- The treshold, in points, before expansion begins (Number)
leftSwipeSettings
,rightSwipeSettings
- Control swipe settingstransition
- The transition type (String)- Available types:
"static"
(default),"border"
,"drag"
,"clipCenter"
,"rotate3d"
,"grow"
- Available types:
- enableSwipeBounces - Controls if the swipe motion bounces or not (Boolean)