Deepshikha Puri: Mobile App Developer (Android & iOS))

Sunday, February 24, 2019

Firebase Google Login With React Native

Video Demo:

Firebase provide a authentication facility to a application or web user to login with their Facebook, Google, Twitter etc account. In this article, I would like to talk about Google Authentication using Firebase in react native android application. DOWNLOAD SOURCE CODE FROM HERE.

Project Setup Steps->
Step 1-> To create your project run this command:
sudo npm install -g react-native-cli
Step 2->
Now initialise your project name. Replace your project name with MovingScreen:
react-native init MovingScreen
Step 3->
Now Intall Firebase google login library in your react native project yarn add react-native-google-signin
Step 4>
Link your Firebase Google Signin library with your project react-native link react-native-google-signin
Firebase configuration for Android
Step 1>
Open your firebase console (https://console.firebase.google.com/)

Step 2>
Add your Project details in Firebase

Step 3>
Enable Google Login in Firebase Console
Path ProjectOverview->Authentication->Google

Step 4>
Add the SHA key and package name of your project in Firebase Console

Step 5>
Download your google-services.json from firebase console

Now setup the firebase dependencies and json file in your Android project
Step 1>
Add google service classpath in your android Project
Path ProjectName->Android-> build.gradle
classpath 'com.google.gms:google-services:4.2.0' // <--- use this version or newer

Step 2>
Add google service plugin in your android Project
Path ProjectName->Android->app-> build.gradle
apply plugin: 'com.google.gms.google-services' // <--- this should be the last line

Step 3>
Add google-services.json in your android Project
Path ProjectName->Android->app-> google-services.json

Now you can start work on your React native project

HomeScreen.js:

import React ,{Component} from 'react'
import{StyleSheet,View,Text, StatusBar,Image,Button} from 'react-native'
import {GoogleSignin, GoogleSigninButton,statusCodes} from 'react-native-google-signin'


export default class HomeScreen extends Component {


state ={
    userDetails:'',
    GoogleLogin:false,
  }


render(){
        return(
            <View style={styles.container}>
              <StatusBar backgroundColor='#FF7043'></StatusBar>


<View style={styles.headerContainer}>
              <Text style={styles.headerTxt}>Home Screen</Text>
              </View>


<View style={this.state.GoogleLogin? {display:"none"}:styles.signinContainer}>


<GoogleSigninButton
                style={{width:192, height:50}}
                size={GoogleSigninButton.Size.Wide}
                color={GoogleSigninButton.Color.Dark}
                onPress={this.signIn}>
                </GoogleSigninButton>
                </View>




<View style={this.state.GoogleLogin? styles.userDetailContainer: {display:'none'}}>
                <Image style={styles.userImage}           source={{uri: this.state.userDetails.photo}}></Image>
                <Text style={styles.txtEmail}>{this.state.userDetails.email}</Text>
                <Text style={styles.txtName}>{this.state.userDetails.name}</Text>
                <Button color="#FF5722" title='Logout' onPress={this.signOut}></Button>


</View>
            </View>
        )
    }




signOut = async()=>{
      try{
        await GoogleSignin.revokeAccess();
        await GoogleSignin.signOut()
        this.setState({
          userDetails:'',
          GoogleLogin:false,
        }
        )
      }catch(error){
        console.log(error.toString())
      }
    }


signIn = async () => {
        try {
          await GoogleSignin.hasPlayServices();
          const userInfo = await GoogleSignin.signIn();
          console.log('User Details', JSON.stringify(userInfo))


this.setState({
            GoogleLogin:true,
            userDetails:userInfo.user,


})


} catch (error) {


this.setState({
            GoogleLogin:false,
          })


if (error.code === statusCodes.SIGN_IN_CANCELLED) {
            console.log("Cancel ", statusCodes.SIGN_IN_CANCELLED )
            // user cancelled the login flow
          } else if (error.code === statusCodes.IN_PROGRESS) {
            console.log("InProgress ", statusCodes.IN_PROGRESS )
            // operation (f.e. sign in) is in progress already
          } else if (error.code === statusCodes.PLAY_SERVICES_NOT_AVAILABLE) {
            console.log("Not Available ", statusCodes.PLAY_SERVICES_NOT_AVAILABLE)
            // play services not available or outdated
          } else {
            console.log("Error ", error)
          }
        }
      };






}


GoogleSignin.configure({
    scopes: ['https://www.googleapis.com/auth/drive.readonly'], // what API you want to access on behalf of the user, default is email and profile
    webClientId: '602222878267-1ki3ucs1nso4t4scrnh5mem9sr6mjd20.apps.googleusercontent.com', // client ID of type WEB for your server (needed to verify user ID and offline access)
    offlineAccess: true, // if you want to access Google API on behalf of the user FROM YOUR SERVER
    hostedDomain: '', // specifies a hosted domain restriction
    loginHint: '', // [iOS] The user's ID, or email address, to be prefilled in the authentication UI if possible. [See docs here](https://developers.google.com/identity/sign-in/ios/api/interface_g_i_d_sign_in.html#a0a68c7504c31ab0b728432565f6e33fd)
    forceConsentPrompt: true, // [Android] if you want to show the authorization prompt at each login.
    accountName: '', // [Android] specifies an account name on the device that should be used
    // iosClientId: '<FROM DEVELOPER CONSOLE>', // [iOS] optional, if you want to specify the client ID of type iOS (otherwise, it is taken from GoogleService-Info.plist)
  });


const styles = StyleSheet.create({
  container:{
    flex:1
  },


headerContainer:{
    width:'100%',
    height:40,
    justifyContent:'center',
    backgroundColor:'#FF5722',
  },


headerTxt:{
    fontSize:13,
    color:'white',
    alignSelf:'center'
  },


signinContainer:{
    flex:1,
    justifyContent:'center',
    alignItems:'center',
  },


userDetailContainer:{
    flex:1,
    width:'100%',
    alignItems:'center',
    justifyContent:'center'
  },


userImage:{
    width:100,
    height:100,
  },


txtEmail:{
    color:'black',
    marginTop:10,
    fontSize:13,
  },


txtName:{
    color:'black',
    margin:10,
    fontSize:13,
  }


})

Download source code from here

Sunday, February 17, 2019

Firebase In React Native

Deepshikha 9:45 PM firebase in react native , firebase integration in react native 0 Comments

VIDEO DEMO:

Firebase provide a various features such as Real time database, Custom Authentication, Facebook and Google Authentication, notification etc. In Firebase we don't required any server side configuration such as PHP, JavaScript etc. In tutorial we can going to learn how to integrate the Firebase in react native projects. YOU CAN DOWNLOAD THE SOURCE CODE FROM BELOW.

STEPS TO CREATE A PROJECT ON FIREBASE:

Step 1: Open your Firebase console (https://console.firebase.google.com/)

Step 2: Click on Add Project Button

Step 3: Add your project name and then click on create project button

Step 4. Get the project details

Step 5. Copy this Firebase details.

Step 6 Now enable to Email/Password option from your firebase console.

STEPS TO CREATE A REACT NATIVE PROJECT:

Step 1-> To create your project run this command:
sudo npm install -g react-native-cli
Step 2->
Now initialise your project name. Replace your project name with MovingScreen:
react-native init MovingScreen
Step 3->
Install Navigation library in your project:
npm install --save react-navigation
Step 4->
Also need to install the gesture library otherwise you will get an issue
npm install --save react-native-gesture-handler
Step 5->
link your gesture library in your project:
react-native link react-native-gesture-handler
Step 6->
Now add your firebase library in your react native project
npm install --save firebase
Now you can start work on your React native project

Create a config.js file in this file you can replace your firebase credentials.

config.js

import '@firebase/auth'

import firebase from '@firebase/app'

const config = {

    apiKey: "AIzaSyCZyKDlvUwWqvmr36lCWO3zY8SrjSIA4Ow",

    authDomain: "reactnativelogin-924f9.firebaseapp.com",

    databaseURL: "https://reactnativelogin-924f9.firebaseio.com",

    projectId: "reactnativelogin-924f9",

    storageBucket: "reactnativelogin-924f9.appspot.com",

    messagingSenderId: "1074138156950"

};

const fire = firebase.initializeApp(config);

export default fire;

MainScreen.js

import React, {Component} from 'react'
import {View,Text,StyleSheet,Button} from 'react-native'


export default class MainScreen extends Component{


static navigationOptions ={
        headerTintColor:'white',
        title:'FireBase Integration React Native',
        headerStyle:{
            backgroundColor:'#FF5722',
        },
        headerTitleStyle:{
            fontFamily: 'Nunito-Regular',
            fontWeight:'300',
            fontSize:16,
            justifyContent:'center',
            alignItems:'center'


}

    }


render(){
        return(
            <View style={styles.container}>
            <View style={styles.btnContainer}>
                <Button  title="Login" color='#FF5722' onPress={()=>this.props.navigation.navigate('Login')}></Button>
            </View>


<View style={styles.btnContainer}>                                 
                <Button title='Signup' onPress ={()=>this.props.navigation.navigate('Signup')}></Button>
            </View>        
            </View>
        )
    }

}




const styles= StyleSheet.create({
    container:{
     justifyContent:'center',
     flex:1,
     alignItems:'center'
    },


btnContainer:{
        width:'70%',
        height:60,
        position:'relative',
    }
})

Navigation.js

import React, {Component} from 'react'
import {createAppContainer,createStackNavigator} from 'react-navigation'
import MainScreen from './MainScreen';
import LoginScreen from './LoginScreen';
import SignupScreen from './SignupScreen';


const AppStackNavigator = createStackNavigator({
    Main:MainScreen,
    Login:LoginScreen,
    Signup:SignupScreen
})


const AppContainer = createAppContainer(AppStackNavigator)


export default class Navigation extends Component{
    render(){
        return<AppContainer></AppContainer>
    }
}

LoginScreen.js

import React,{Component} from "react";
import{View,Text,StyleSheet,TextInput,Button,StatusBar,ActivityIndicator} from 'react-native'
import fire from './config';




export default class LoginScreen extends Component {


state={
        email:'',
        password:'',
        message:'',
        loading:false,
        status: false,
    }


static navigationOptions={
        headerTintColor:'white',
        title:'Login Screen',
        headerStyle:{
            backgroundColor:'#FF5722'
        },
        headerTitleStyle:{
            fontWeight:'300',
            color:'white',
            fontFamily:'Nunito-Regular',
            justifyContent:'center',
            alignItems:'center',
            fontSize:16
        }


}


static navigationOptions={
        headerTintColor: 'white',
        title:'Login Screen',
        headerStyle:{
            backgroundColor:'#FF5722'
        },
        headerTitleStyle:{
            fontWeight:'300',
            color:'white',
            fontFamily:'Nunito-Regular',
            justifyContent:'center',
            alignItems:'center',
            fontSize:16
        }
    }


handlerEmail(emailValue){
        this.setState({
            email:emailValue,
        })
    }


handlerPassword(passwordValue){
        this.setState({
            password: passwordValue,
        })
    }


loginBtn(){
        const reg = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
        if (reg.test(this.state.email) === true){
            if(this.state.password.length>=7){
                this.loginFirebase()


}else{
                alert('Password must of 7 characters')
            }


}
        else{
            alert("Please enter valid email");
        }
    }


loginFirebase(){
        this.setState({
            loading:true,
            message:'',
        })


fire.auth().signInWithEmailAndPassword(this.state.email,this.state.password).
            then(()=>{
                this.setState({
                    loading:false,
                    status:true,
                })
            }).catch(error => {


this.setState({
                    message: error.toString(),
                    loading:false,
                })


})
    }


render(){
        const status = this.state.status
        if(status){
            return (
                <View style={styles.container}> 
                <Text style={styles.successTxt}>LOGIN SUCCESSFULLY</Text>


</View>
            )
        }


return(
            <View style={styles.container}> 
            <StatusBar backgroundColor='#FF7043'></StatusBar>
            <TextInput autoCapitalize='none' placeholder='Email' style={styles.emailtxt} onChangeText={this.handlerEmail.bind(this)} ></TextInput>
            <TextInput autoCapitalize='none' secureTextEntry={true} placeholder='Password' style={styles.emailtxt} onChangeText={this.handlerPassword.bind(this)}></TextInput>
            <View style={styles.btnContainer}>
            <Button title='Login' color='#FF5722' elevation= '0' onPress={this.loginBtn.bind(this)}></Button>
            <Text style={styles.errorTxt}>{this.state.message}</Text>


</View>


<View style={this.state.loading ? styles.container2 :{ display: "none" }} >
              <ActivityIndicator  animating={true} size="large" color="#FFFFFF"  />


</View>           
        </View>           
        )
    }
}


const styles = StyleSheet.create({


container:{
        height:"100%",
        position:'relative',
        justifyContent:'center',
        alignItems:'center'
    },


container2:{
        height:"100%",
        opacity:0.8,
        width:'100%',
        backgroundColor:'#000000',
        position:'absolute',
        justifyContent:'center',
        alignItems:'center',
        top: 0,
        bottom: 0,
    },




emailtxt:{
        width:"70%",
        height:40,
        backgroundColor:'white',
        borderColor:'#FF5722',
        borderWidth:1, 
        margin:5,
        fontSize:10
    },


btnContainer:{
        width:'70%',
        margin:10,
        height:60,
        position:'relative',       
    },


errorTxt:{
        color:'red',
        margin:10,
        fontSize:16,
    },


successTxt:{
        color:'green',
        fontSize:25
    }
})

SignupScreen.js

import React,{Component} from 'react'
import {View,Text,StyleSheet,TextInput,Button,StatusBar,ActivityIndicator} from 'react-native'
import fire from './config';


export default class SignupScreen extends Component{


state={
        email:'',
        password:'',
        message:'',
        loading:false,
        status: false,
    }


static navigationOptions={
        headerTintColor: 'white',
        title:'Signup Screen',
        headerStyle:{
            backgroundColor:'#FF5722'
        },
        headerTitleStyle:{
            fontWeight:'300',
            color:'white',
            fontFamily:'Nunito-Regular',
            justifyContent:'center',
            alignItems:'center',
            fontSize:16
        }
    }


handlerEmail(emailValue){
        this.setState({
            email:emailValue,
        })
    }


handlerPassword(passwordValue){
        this.setState({
            password: passwordValue,
        })
    }


loginBtn(){
        const reg = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
        if (reg.test(this.state.email) === true){
            if(this.state.password.length>=7){
                this.signUpFirebase()


}else{
                alert('Password must of 7 characters')
            }


}
        else{
            alert("Please enter valid email");
        }
    }


signUpFirebase(){
        this.setState({
            loading:true,
            message:'',
        })


fire.auth().createUserWithEmailAndPassword(this.state.email,this.state.password).
            then(()=>{
                this.setState({
                    loading:false,
                    status:true,
                })
            }).catch(error => {


this.setState({
                    message: error.toString(),
                    loading:false,
                })


})
    }


render(){


const status = this.state.status
        if(status){
            return (
                <View style={styles.container}> 


<Text style={styles.successTxt}>SIGNUP SUCCESSFULLY</Text>


</View>
            )
        }


return(
            <View style={styles.container}> 
                <StatusBar backgroundColor='#FF7043'></StatusBar>
                <TextInput autoCapitalize='none' placeholder='Email' style={styles.emailtxt} onChangeText={this.handlerEmail.bind(this)} ></TextInput>
                <TextInput autoCapitalize='none' secureTextEntry={true} placeholder='Password' style={styles.emailtxt} onChangeText={this.handlerPassword.bind(this)}></TextInput>
                <View style={styles.btnContainer}>
                <Button title='Sign up' color='#FF5722' elevation= '0' onPress={this.loginBtn.bind(this)}></Button>
                <Text style={styles.errorTxt}>{this.state.message}</Text>


</View>


<View style={this.state.loading ? styles.container2 :{ display: "none" }} >
                  <ActivityIndicator  animating={true} size="large" color="#FFFFFF"  />


</View>               
            </View>


)
    }
}


const styles = StyleSheet.create({


container:{
        height:"100%",
        position:'relative',
        justifyContent:'center',
        alignItems:'center'
    },


container2:{
        height:"100%",
        opacity:0.8,
        width:'100%',
        backgroundColor:'#000000',
        position:'absolute',
        justifyContent:'center',
        alignItems:'center',
        top: 0,
        bottom: 0,
    },




emailtxt:{
        width:"70%",
        height:40,
        backgroundColor:'white',
        borderColor:'#FF5722',
        borderWidth:1, 
        margin:5,
        fontSize:10
    },


btnContainer:{
        width:'70%',
        margin:10,
        height:60,
        position:'relative',        
    },


errorTxt:{
        color:'red',
        margin:10,
        fontSize:16,
    },


successTxt:{
        color:'green',
        fontSize:25
    }
})

DOWNLOAD SOURCE CODE FROM HERE

Monday, February 11, 2019

React Native Flatlist

Deepshikha 2:55 AM react native flatlist , react native flatlist click 0 Comments

Video Demo:

Basically a Flatlist is a view of group that illustrates the data in a horizontal or vertical scrollable view. In react native Listview is deprecated, so most of the time FlatList is used in react. FlatList is similar as ListView. In this tutorial we are going to learn how to work with FlatList in react native. DOWNLOAD SOURCE CODE FROM BELOW.

HomeScreen.js

import React ,{Component} from 'react'
import {View,Text, StyleSheet,Button, StatusBar, FlatList, Alert,TouchableOpacity} from 'react-native'


export default class HomeScreen extends Component{
        state={
            datasource: [
               {name: 'Apple'},
               {name:'Alphabet'},
               {name: 'Microsoft'},
               {name:'Amazon'},
               {name:'Tencent Holdings'},
               {name:'Walmart'},
               {name:'State Grid'},
               {name:'Toyota Motor'},
               {name:'BP'},
               {name:'Facebook'},
               {name:'Bank of America'},
               {name:'Alibaba'},
               {name:'Johnson & Johnson'},
               {name:'ICBC'},
               {name:'China Construction Bank'},
               {name:'JPMorgan Chase'},
               {name:'General Electric'},          


]
        }


listSeperator(){
        return(
            <View style={styles.sepratorList}>
            </View>
        )
    }


rowItemView(rowdata){
        return(
            <TouchableOpacity style={styles.listContainer}
             onPress={()=>this.clickRowItem(rowdata)}>
            <View style={styles.listContainer}>
            <Text>{rowdata.item.name}</Text>
            </View>
            </TouchableOpacity>
        )
    }


clickRowItem(rowdata){
        Alert.alert(rowdata.item.name)
    }


render(){
        return (
            <View style={styles.container}>
            <StatusBar backgroundColor='#FF7043'></StatusBar>
               <View style={styles.headerContainer}>
                    <Text style={styles.headerTxt}>Home Screen</Text>
               </View>


<FlatList
                    data={this.state.datasource}
                    renderItem=  {this.rowItemView.bind(this)}
                    keyExtractor={(item, index) => index.toString()}
                    ItemSeparatorComponent={this.listSeperator}/>
                
            </View>
        )
    }
}


const styles = StyleSheet.create({
    container:{
        flex:1
    },


headerContainer:{
        width:'100%',
        height:40,
        justifyContent:'center',
        alignItems:'center',
        backgroundColor:'#FF5722'
    },


headerTxt:{
        fontSize:13,
        color:'white',


},


sepratorList:{
        height:1,
        width:"100%",
        backgroundColor:'#EAEAEA'
    },


listContainer:{
        height:40,
        justifyContent:'center',
        width:'100%',
        paddingLeft:10        
    },


listTxt:{
        fontSize:13,
        color:'black',
        height:40,
        width:'100%',   
    },    
})