how to create user Firebase React Native
a. let's first create a navigation in react native application using custom components files.
1. install expo-cli to create expo apps:
npm install -g expo-cli@latest
2. install react-native-screens and react-native-safe-area-context:
npm install @react-navigation/native
3. Installing dependencies into an Expo managed project
npx expo install react-native-screens react-native-safe-area-context
4. create expo project named "navig":
npx create-expo-app navig
5. Installing the native stack navigator library:
npm install @react-navigation/native-stack
file structure used in this example:
project_root/
│
├── src/
│ │
│ ├── screens/
│ │ │
│ │ ├── signup.js // The file containing the register component
│ ├── App
│ │ ├── index.js
│ │ ├── StackNavigation.js
│ ├── config
│ │ ├── firebasedb.js
StackNavigation.js
create stack navigation for application
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import Login from "../screens/login";
import Register from "../screens/signup";
const Stack=createNativeStackNavigator();
export default StackNavigation=()=>
{
return(
<Stack.Navigator screenOptions={{headerShown:false}}>
<Stack.Screen name="signup" component={Register}/>
<Stack.Screen name="login" component={Login}/>
</Stack.Navigator>
);
}
index.js
use stack navigation in your application
import React from "react";
import StackNavigation from "./StackNavigation";
export default function App() {
return (
<StackNavigation/>
);
}
install the firebase:
npm install firebase
config/firebasedb.js
- go to firebase and create your account
- go to console
- create a firebase project for web app
- copy the code like below and paste in your firebase file[].
// firebaseConfig.js
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
const firebaseConfig = {
apiKey: "YOUR_API_KEY",
authDomain: "YOUR_AUTH_DOMAIN",
projectId: "YOUR_PROJECT_ID",
appId: "YOUR_APP_ID",
};
const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
5. go to authentication
6. enable email and password authentication
signup.js
import { createUserWithEmailAndPassword } from "firebase/auth";
import { useEffect, useState } from "react";
import { StyleSheet, Text, TextInput, TouchableOpacity, View } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { auth } from "../config/firebasedb";
export default Register=()=>{
const [email,setEmail]=useState("");
const [password,setPassword]=useState("");
function handleRegister()
{
createUserWithEmailAndPassword(auth,email,password)
.then((userData)=>{
console.log("user",userData.user);
alert("registered");
}).catch((error)=>{
if (error.code === 'auth/email-already-in-use')
{
alert('This email is already registered. Please login instead.');
}
else
{
console.log(error);
}
});
}
return(
<SafeAreaView
style={{flex:1,justifyContent:"center"
,alignItems:"center"
backgroundColor:"brown"}}>
<View>
<Text>register</Text>
</View>
<View style={{width:300}}>
<Text style={logstyle.label}>enter email</Text>
<TextInput style={logstyle.input} onChangeText={setEmail}/>
<Text style={logstyle.label}>enter password</Text>
<TextInput style={logstyle.input} onChangeText={setPassword}/>
<TouchableOpacity onPress={handleRegister} style={logstyle.btn}>
<Text style={logstyle.btntext}>register</Text>
</TouchableOpacity>
</View>
</SafeAreaView>
);
}
const logstyle=StyleSheet.create({
input:{
borderWidth:1,
padding:10,
marginBottom:20,
borderRadius:5,
},
label:
{
marginBottom:10,
},
btn:
{
backgroundColor:"black",
padding:10,
},
btntext:
{
color:"white",
textAlign:"center"
}
});
0 Comments