Hello I've been looking through several threads on stackoverflow but I haven't been able to solve my problem. I have an app where you can save movies to a watchlist. On this specific screen I want to display a users watchlist and give them the ability to delete it from the list. Currently the function is indeed deleting the movie from the list and removing it from firebase but i can't get my screen to rerender to visually represent the deletion.
This is the code right now:
export default function MovieWatchlistTab(props: any) { let { movies } = props; let movieWatchlist: any[] = []; const [watchlistSnapshot, setWatchlistSnapshot] = useState(); const user: firebase.User = auth().currentUser; const { email } = user; const watchlistRef = firestore().collection("Watchlist"); useEffect(() => { getWatchlistSnapshot(); }, []); const getWatchlistSnapshot = async () => { setWatchlistSnapshot(await watchlistRef.where("userId", "==", email).get()); }; const convertDataToArray = () => { const convertedMovieList = []; for (let movie in movies) { let newMovie = { backdrop: movies[movie].backdrop, overview: movies[movie].overview, release: movies[movie].release, title: movies[movie].title, }; convertedMovieList.push(newMovie); } movieWatchlist = convertedMovieList; }; const renderMovieList = () => { convertDataToArray(); return movieWatchlist.map((m) => { const handleOnPressDelete = () => { const documentRef = watchlistRef.doc(watchlistSnapshot.docs[0].id); const FieldValue = firestore.FieldValue; documentRef.set( { movies: { [m.title]: FieldValue.delete(), }, }, { merge: true } ); movieWatchlist.splice( movieWatchlist.indexOf(m), movieWatchlist.indexOf(m) + 1 ); console.log("movieWatchlist", movieWatchlist); }; const swipeButtons = [ { text: "Delete", color: "white", backgroundColor: "#b9042c", onPress: handleOnPressDelete, }, ]; return (<Swipeout right={swipeButtons} backgroundColor={"#18181b"}><View key={m.title} style={{ marginTop: 10, flexDirection: "row" }}><Image style={{ height: 113, width: 150 }} source={{ uri: m.backdrop, }} /><View><Text style={{ flex: 1, color: "white", marginLeft: 10, fontSize: 17, }}> {m.title}</Text><Text style={{ flex: 1, color: "white", marginLeft: 10 }}> Release: {m.release}</Text></View></View></Swipeout> ); }); }; return (<View style={{ flex: 1, justifyContent: "center", alignItems: "center", backgroundColor: "#18181b", }}><ScrollView style={{ flex: 1 }} contentContainerStyle={{ width: Dimensions.get("window").width, }}> {renderMovieList()}</ScrollView></View> );}I've been trying to play around with useStates and I think the answer is in that direction but I just can't seem to get it to work anyway. Any help would be appreciated!