For those of you familiar with React-Native, how do I re-render a component from inside of another screen that was navigated to through stack navigator. Excuse the horrible code I’m a sophomore in highschool, this is my first app.
- Each book passes its contents to the VocabList screen when clicked using stack navigator
-State of books is being tracked here
<View style={styles.listContainer}>
<View>
<FlatList
data={bookArray}
renderItem={({ item }) => (
<Book
wordCountProp={item.wordCount[0]}
key={item.id}
uuid={item.id}
title={item.text}
list={item.definitionArray}
changeModalVisible={changeModalVisible}
contrivedRender={contrivedRender}
handleDeleteComponent={(uuid) => handleDeleteBook(uuid)}
handleFavoriteBook={(uuid) => handleFavoriteBook(uuid)}
handleUnFavoriteBook={(uuid) => handleUnFavoriteBook(uuid)}
navigateStackHandler={(
id,
definitionArrayParam,
setDefinitionArray
) =>
props.navigation.navigate(
"VocabList",
item,
id,
definitionArrayParam,
setDefinitionArray
)
}
/>
)}
/>
</View>
</View>
- This is how data is read from the book and displayed on the screen depending on which book you click
- State of definitions isn’t being tracked on this screen, rather by each independent book component
<View style={styles.listContainer}>
<FlatList
data={props.navigation.getParam("definitionArray")}
renderItem={({ item }) => (
<Definition
key={item.id}
uuid={item.id}
title={item.text}
handleDeleteComponent={(id) => {
props.navigation
.getParam("definitionArray")
.splice(
props.navigation
.getParam("definitionArray")
.indexOf(
props.navigation
.getParam("definitionArray")
.filter((definition)=>definition.id === id)[0]
),
1
);
if (props.navigation.getParam("wordCount")[0] > 0)
props.navigation.getParam("wordCount")[0] -= 1;
}}
navigateStackHandler={(id, definitionArra) =>
props.navigation.navigate("VocabList", item, id, definitionArra)
}
/>
)}
/>
</View>
- The problem arises when I update the contents inside of the book such as adding a new vocab word.
- The word count stays the same unless I exit the screen
- And finally click on the make-shift button I have to force the book component to rerender
What can I do to force the book to rerender as soon as it is updated with a new vocabulary word, or a word is deleted?
I tried keeping track of definition state inside of the VocabList screen but then again I can’t communicate with the book component because the contents of the book were simply passed as parameters to the VocabList screen using stack navigator. The VocabList screen doesn’t even know the book exists.