Reputation: 1521
I keep getting this warning whenever my internet connection is bad (I'm not sure even if this the right cause for this to happen). I'm getting this in the pages that displays data from Firebase database in react native application (iOS/android). PS: I'm not considering to make the offline mode (it's not a requirement). I'm sharing with you the code I'm using in one of these pages (it's very similar in all pages)
Code
constructor(props) {
super(props);
this.state = {
dataSource: new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2,
})
};
this.itemsRef = this.getRef().child('path');
}
getRef() {
return firebaseApp.database().ref();
}
componentDidMount() {
this.listenForItems(this.itemsRef);
}
listenForItems(itemsRef) {
itemsRef.on('value', (snap) => {
if (snap.val()) {
var items = [];
snap.forEach((child) => {
items.push({
text : child.val().text,
title: child.val().title,
key: child.key
});
});
this.setState({dataSource: this.state.dataSource.cloneWithRows(items)});
}
});
}
render() {
return (
<View>
<ListView
automaticallyAdjustContentInsets={true}
dataSource={this.state.dataSource}
renderRow={this._renderItem.bind(this)}/>
</View>
);
}
_renderItem(item) {
return (
<View>
<Text>{item.title}</Text>
<Text>{item.text}</Text>
</View>
);
}
}
and here is the warning I keep getting :
It does mention the name of the component but I still don't know what might be the reason for this
UPDATE: I tried this proposed solution :
componentWillUnmount() {
this.itemRef.off();
}
In fact I have a back button that changes from one page to another (each page has her own path and data extracted from Firebase but with similar code) and I get this error: this.itemRef
is different in each page.
But I get this error :
Any idea or suggestion .. thank you
Upvotes: 2
Views: 535
Reputation: 493
When you subscribe to a reference with on()
you'll get the notifications when the database path is modified, that happens also when a component is unmounted. In order to prevent this warning you have to call off()
the same database reference on componentWillUnmount
componentWillUnmount() {
this.itemsRef.off();
}
Upvotes: 1