Update and reload component in react native - react-native

Question

I am trying to refresh/ reload the page with an updated document once I click on a button. saveAnnotations(); saves the changes made to the document on the device and also updates the document with any other updates from other devices in the database.
The filepath is a REST URL to get the document.
After I click the sync button, the edits made to the document are saved but I want to reload the page so that it pulls the latest updated document from the database in the onclick button itself.
When I go back and return on this page I am able to see the lastest changes made but I want the document to reload when I click on sync button.
I tried using window.location.reload(false); but it closes the page where as I just want to reload the page or rerender filepath props to pull latest changes when I click on the sync button.
Any suggestions on how do I achieve that?
here's my code snippet
reRender = () => {
// calling the forceUpdate() method
this.forceUpdate();
window.location.reload(false);
};
render() {
return (
<View style={{ flex: 1 }}>
<DocumentView
document={filepath}
/>
<View style={styles.button}>
<Button
onPress={() => {
// Save Document
this.saveAnnotations();
}}
title="Sync"
/>
</View>
</View>
</View>
);
}

Answer 1

To achieve what you are looking for, you need to trigger the render method. Doing this will show the updated document. Here is a diagram showing the lifecycle methods of React components. As you can see, there are three ways to trigger the render method:
The component receives new props
Calling setState
Calling forceUpdate
For your use case, I would suggest adding a call to forceUpdate, like so:
<View style={styles.button}>
<Button
onPress={() => {
// Save Document
this.saveAnnotations();
this.forceUpdate(); // <-- add this
}}
title="Sync"
/>
</View>