react-native Integration with Firebase for Authentication React Native - ListView with Firebase
Example
This is what I do when I'm working with Firebase and I want to use ListView.
Use a parent component to retrieve the data from Firebase (Posts.js):
Posts.js
import PostsList from './PostsList';
class Posts extends Component{
constructor(props) {
super(props);
this.state = {
posts: []
}
}
componentWillMount() {
firebase.database().ref('Posts/').on('value', function(data) {
this.setState({ posts: data.val() });
});
}
render() {
return <PostsList posts={this.state.posts}/>
}
}
PostsList.js
class PostsList extends Component {
constructor(props) {
super(props);
this.state = {
dataSource: new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2
}),
}
}
getDataSource(posts: Array<any>): ListView.DataSource {
if(!posts) return;
return this.state.dataSource.cloneWithRows(posts);
}
componentDidMount() {
this.setState({dataSource: this.getDataSource(this.props.posts)});
}
componentWillReceiveProps(props) {
this.setState({dataSource: this.getDataSource(props.posts)});
}
renderRow = (post) => {
return (
<View>
<Text>{post.title}</Text>
<Text>{post.content}</Text>
</View>
);
}
render() {
return(
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderRow}
enableEmptySections={true}
/>
);
}
}
I want to point out that in Posts.js, I'm not importing firebase because you only need to import it once, in the main component of your project (where you have the navigator) and use it anywhere.
This is the solution someone suggested in a question I asked when I was struggling with ListView. I thought it would be nice to share it.
