How to rerender a component from a stack navigator

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.