1. React Native tutorial

Integration with Firebase for Authentication in react Native

//Replace firebase values with your app API values
import firebase from 'firebase';
componentWillMount() {
firebase.initializeApp({
apiKey: "yourAPIKey",
authDomain: "authDomainNAme",
databaseURL: "yourDomainBaseURL",
projectId: "yourProjectID",
storageBucket: "storageBUcketValue",
messagingSenderId: "senderIdValue"
});
firebase.auth().signInWithEmailAndPassword(email, password)
.then(this.onLoginSuccess)
})
}

Authentication In React Native Using Firebase

Replace firebase values with your app api values:

import firebase from 'firebase';
componentWillMount() {
firebase.initializeApp({
apiKey: "yourAPIKey",
authDomain: "authDomainNAme",
databaseURL: "yourDomainBaseURL",
projectId: "yourProjectID",
storageBucket: "storageBUcketValue",
messagingSenderId: "senderIdValue"
});
firebase.auth().signInWithEmailAndPassword(email, password)
.then(this.onLoginSuccess)
.catch(() => {
firebase.auth().createUserWithEmailAndPassword(email, password)
.then(this.onLoginSuccess)
.catch(this.onLoginFail)
})
}

React Native – ListView with Firebase

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): 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.

If you like this post, don’t forget to share 🙂

This article is written by our awesome writer
Comments to: Integration with Firebase for Authentication in react Native

Your email address will not be published. Required fields are marked *

Attach images - Only PNG, JPG, JPEG and GIF are supported.

New Dark Mode Is Here

Sign In to access the new Dark Mode reading option.

Join our Newsletter

Get our monthly recap with the latest news, articles and resources.

By subscribing you agree to our Privacy Policy.

Latest Articles

Explore Tutorials By Categories

About

Codeverb is simply an all in one interactive learning portal, we regularly add new topics and keep improving the existing ones, if you have any suggestions, questions, bugs issue or any other queries you can simply reach us via the contact page

Login

Welcome to Codeverb

Ready to learn something new?
Join Codeverb!

Read Smart, Save Time
  •  
    Strength indicator
  •  
  •  
    Log In | Lost Password