React Native Real-Time Issue - react-native

Question

I am fetching Data from an API to a flatlist and its working fine the problem it's not a real time fetching, I have to refresh the screen in order to see the recent added data. How can I make the fetching real time.
export default class CategoryScreen extends Component {
constructor(props) {
super(props);
this.state = {
categories: []
}
}
componentWillMount() {
//Fetch recent products
const url = url
fetch(url)
.then((response) => response.json())
.then((responseJson) => {
this.setState({
categories: responseJson.categories
})
})
}
rederItem = ({ item }) => {
return (
<CategoryFlatList title={item.cat_name} image={item.img}/>
)
}
render() {
return (
<SafeAreaView style={{ flex: 1 }}>
<FlatList style={{}}
data={this.state.categories}
renderItem={this.rederItem}
numColumns={2}
keyExtractor={item => item.id}
/>
</SafeAreaView>
);
}
}

Answer 1

If I understand your problem correctly you need to refresh the data when it was changed on the server!
If this is the case, the reason why it did not update on the list cause you did not call fetch, when u refresh the screen the fetch get called and the data get updated.
There are multiple solutions to fix this problem:
An advanced one by creating a mechanism to subscribe to the data source and update when it is changed.
Update data on user interaction (like a swipe).
A simpler way (but not that professional) by using a timer that calls the fetch and updates the state.

Answer 2

These are the things you can do:
1) Make a PubSub mechanism
2) Use pull to refresh in your FlatList
3) Use polling, you can either do polling by using Redux-Sagas or Redux-Observable which is the preferred method or you can do it by using timer like this
This is how you start interval
this.intervalID = setInterval(() => {
// do something
}, 5000) //time for polling in millies
This is how you can stop interval
if (this.intervalID != null) {
clearInterval(this.intervalID)
this.intervalID = null
}