react native swipe list

swipe to show hidden features

npm install --save react-native-swipe-list-view

import React, { useState } from 'react';
import { FlatList, StyleSheet, Text, View } from 'react-native';
import { SwipeRow } from 'react-native-swipe-list-view';

export default function App() {
  const [data, setData] = useState(
    [{ text: 'Swipe Row #1', left: 'Left 1', right: 'Right 1', key: '1' },
    { text: 'Swipe Row #2', left: 'Left 2', right: 'Right 2', key: '2' },
    { text: 'Swipe Row #3', left: 'Left 3', right: 'Right 3', key: '3' },
    ]
  )
  return (
    <View style={styles.container}>
      <FlatList
        data={data}
        renderItem={({ item }) =>
          <View style={styles.standalone}>
            <SwipeRow leftOpenValue={75} rightOpenValue={-75}>
              <View style={styles.standaloneRowBack}>
                <Text style={styles.backTextWhite}>{item.left}</Text>
                <Text style={styles.backTextWhite}>{item.right}</Text>
              </View>
              <View style={styles.standaloneRowFront}>
                <Text>{item.text}</Text>
              </View>
            </SwipeRow>
          </View>
        }
      ></FlatList>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'white',
    flex: 1,
    marginTop: 25,
  },
  standalone: {
    marginVertical: 10,
  },
  standaloneRowFront: {
    alignItems: 'center',
    backgroundColor: '#CCC',
    justifyContent: 'center',
    height: 50,
  },
  standaloneRowBack: {
    alignItems: 'center',
    backgroundColor: '#8BC645',
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
    padding: 15,
  },
  backTextWhite: {
    color: '#FFF',
  },
});

reference:
https://www.npmjs.com/package/react-native-swipe-list-view
https://snack.expo.io/@jemise111/react-native-swipe-list-view