rn-swipe-actions-button
v1.0.5
Published
A dynamic swipeable view with both left and right actions, revealing the actions with animation.
Downloads
10
Maintainers
Readme
A dynamic button view that can be swiped left and right to reveal hidden actions. left action can be swiped to end like in instegram/gmail/facebook messages/comments.
It comes with a built-in TypeScript typings and is compatible with all popular JavaScript frameworks. You can use it directly or leverage well-maintained wrapper packages that allow for a more native integration with your frameworks of choice.
Example:
How to use:
const Row = ({item}) => (
<View style={Styles.rectButton}>
<Text style={Styles.fromText}>{'item.from'}</Text>
<Text numberOfLines={2} style={Styles.messageText}>
{'item.message'}
</Text>
<Text style={Styles.dateText}>
{'item.when'} {'❭'}
</Text>
</View>
);
<SwipeActions
style={{
backgroundColor: '#FFFF',
shadowColor: 'gray',
shadowOpacity: 1,
shadowRadius: 5,
elevation: 5,
shadowOffset: {
width: 0,
height: 4,
},
}}
onPressButton={() => Alert.alert('ok')}
rightActionsTotalWidthInPrecentages="50%"
leftAction={{
name: 'delete',
buttonStyle: {backgroundColor: 'red'},
textStyle: {color: '#FFFF'},
onPress: () => {},
}}
rightActions={[
{
name: 'edit',
buttonStyle: {backgroundColor: 'grey'},
textStyle: {color: '#FFFF'},
onPress: () => {},
},
{
name: 'save',
buttonStyle: {backgroundColor: 'purple'},
textStyle: {color: '#FFFF'},
onPress: () => {},
},
{
name: 'go',
buttonStyle: {backgroundColor: 'pink'},
textStyle: {color: '#FFFF'},
onPress: () => {},
},
]}>
<Row item={propertie} />
</SwipeActions>
ActionButton props
| Name | Type | Default | | ----------- | ---------- | ------- | | name | string | | onPress | () => void | | buttonStyle | ViewStyle; | | textStyle | TextStyle; |
SwipeActionsButtonProps props
| Name | Type | Default | | ----------------------------------- | -------------- | ------- | | rightActions | ActionButton[] | | leftAction | ActionButton | | leftThreshold | number | | rightThreshold | number | | rightActionsTotalWidthInPrecentages | string | | onPressButton | () => void | | onEndSwipeLeft | () => void | | style | ViewStyle |