rn-swipe-actions-button v1.0.5

• 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

SwipeActionsButtonProps props