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:
import { SwipeActionView } from 'react-native-action-view';Use the component:
<SwipeActionView rightExpansionSettings={{buttonIndex: 0}} leftExpansionSettings={{buttonIndex: 0}} rightButtons={[{title: 'Red', color: 'rgb(255, 0, 0)', callback: () => {alert('Red button tapped.');}}, {title: 'Green', color: 'rgb(0, 255, 0)', callback: () => {alert('Green button tapped.');}}, {title: 'Blue', color: 'rgb(0, 0, 255)', callback: () => {alert('Blue button tapped.');}}]} leftButtons={[{title: 'Red', color: 'rgb(255, 0, 0)', callback: () => {alert('Red button tapped.');}}, {title: 'Green', color: 'rgb(0, 255, 0)', callback: () => {alert('Green button tapped.');}}, {title: 'Blue', color: 'rgb(0, 0, 255)', callback: () => {alert('Blue button tapped.');}}]} > <Text style={styles.welcome}> Welcome to React Native! </Text> <Text style={styles.instructions}> To get started, swipe this view. </Text> <Text style={styles.instructions}> Tap on a button or swipe fully. </Text> </SwipeActionView>Configuration
Possible props are:
leftButtons,rightButtonstitleorimage,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)
Transitions Types
Border
Clip
Rotate3D
Static
Drag
