I'd like to turn the firestore data list into a swipable list. Ultimately, he wants an icon on the left to be edited on the left and an icon to remove an item from the list after moving to the left. I've tried this: https://www.npmjs.com/package/react-native-swipe-list-view, but can't integrate it with the firestore data. My current code userlist.js below.
const UserScreen = (props) => {
const [users, setUsers] = useState([]);
useEffect(() => {
firebase.firestore().collection("users").onSnapshot((querySnapshot) => {
const users = [];
querySnapshot.docs.forEach((doc) => {
const { name, email, phone } = doc.data();
users.push({
id: doc.id,
name,
email,
phone,
});
});
setUsers(users);
});
}, []);
return (
<ScrollView>
<Button
onPress={() => props.navigation.navigate("CreateUserScreen")}
title="Create User"
/>
{users.map((user) => {
return (
<ListItem
key={user.id}
bottomDivider
onPress={() => {
props.navigation.navigate("UserDetailScreen", {
userId: user.id,
});
}}
>
<ListItem.Content>
<ListItem.Title>{user.name}</ListItem.Title>
<ListItem.Subtitle>{user.email}</ListItem.Subtitle>
</ListItem.Content>
</ListItem>
);
})}
</ScrollView>
);
};