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

Sunday, November 10, 2019

Runtime Permission In React Native

Video Demo:

There are two type of permissions: Normal and Dangerous permission.
Normal permission are like Internet permission, network permission etc and Dangerous permission contain the private data of users like contact details, gallery etc. Before Android version 6 these permissions are showed while installing the application but there is not method to change these permission during running app. But now in latest version permission system has been changed and now user can deny these permission in running app.

DOWNLOAD SOURCE CODE FROM BELOW

permissions android react native example

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 RunTimePermission:
react-native init RunTimePermission

Now add permission in your AndroidManifest.xml file:
Path: android->src->AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

    package="com.runtimepermissions">


<uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
    <uses-permission android:name="android.permission.CAMERA" />


<application

      android:name=".MainApplication"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:allowBackup="false"
      android:theme="@style/AppTheme">

      <activity

        android:name=".MainActivity"
        android:label="@string/app_name"
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
        android:windowSoftInputMode="adjustResize">

        <intent-filter>

            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />

        </intent-filter>

      </activity>

      <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />

    </application>


</manifest>

Now you can start work on your React js classes

App.js

import React, {Component} from 'react';
import { StyleSheet, Text, View,StatusBar,Button} from 'react-native';
import { runTimePermissions } from './functions/runPermissions';
export default class App extends Component {


async btnCamera(){
    await runTimePermissions()
  }


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

       <View style={styles.bar}>
        <Text style={styles.txt}>Run Time Permissions</Text>
       </View>


<View style={styles.btncontainer}>
        <Button color='#FF5722' title='CAMERA' onPress={this.btnCamera.bind(this)}></Button>
       </View>


</View>
    );

  }

}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },


bar:{
    backgroundColor:'#FF5722',
    height: 50,    
    justifyContent: 'center'
  },




btncontainer:{
    flex:1,
    backgroundColor: 'white',
    justifyContent: 'center',
    padding:10

  },


txt:{
    color: 'white',
    textAlign:'center',
    
  },


button: {
    backgroundColor: '#00aeef',
    borderColor: 'red',
    borderWidth: 5,
    borderRadius: 15,
    color: 'black'       
 }

});

runPermission.js

import {PermissionsAndroid} from 'react-native'


export async function runTimePermissions() {
    const grant= await PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.CAMERA
    )


if(grant==PermissionsAndroid.RESULTS.GRANTED){
        alert('Run time permissions granted')
    }else{
        alert('Run time permissions denied')
    }
    
}

DOWNLOAD SOURCE CODE FROM HERE

Wednesday, June 12, 2019

React Native Dropdown Example

Deepshikha 9:40 PM react native dropdown example , react native dropdown list example 2 Comments

Demo:

The react native dropdown provide a popup to select a particular value from a list. In this tutorial we will use the dropdown library to add this feature. Download Source code from below.

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 DropDown library in your project:
npm install --save react-native-material-dropdown
Step 4->
Link this library with your native project
react-native link react-native-material-dropdown
Now you can start work on your React native project

HomeScreen.js

import React, {Component} from 'react'
import {View,Text, StyleSheet, StatusBar} from 'react-native'
import {Dropdown} from 'react-native-material-dropdown'


export default class HomeScreen extends Component{
    onChangeText = this.onChangeText.bind(this);


onChangeText(text){
        this.setState({
            selected:text,
        })
      }
    render(){      


return(
            <View style={styles.container}>
                <StatusBar backgroundColor='#FF7043'></StatusBar>
                <View style={styles.containerHeader}>
                <Text style={styles.headerTxt}>HomeScreen</Text>
                </View>
                <View style={styles.mainContainer}>
                <Dropdown data={data} baseColor='#FF5722' itemColor='grey' selectedItemColor='#FF5722'
                containerStyle={styles.dropdownStyle} pickerStyle={styles.dropdownPicker}
                valueExtractor={({value})=> value}
                onChangeText={this.onChangeText}
                rippleCentered={true}
                rippleInsets={{ top: 4, bottom: 4 }}
                label= "Select Country"
                ></Dropdown>
                </View>
                </View>


)
    }
}


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


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


headerTxt:{
        color:'white',
    },


mainContainer:{
        alignItems:'center',
        width:'100%',
        height:'100%',
        backgroundColor:'white',
        justifyContent:'center'
    },


dropdownContainer:{
        width:200,
        borderColor:'green',


},


dropdownStyle:{
        width:200,
        borderColor:'green',
        margin: 0, padding: 0,
    },


dropdownPicker:{
        backgroundColor:'#EAEAEA',
        width:200,
        height:200,
        margin: 0, padding: 0,
    },


})


const data =[
    {value:'Afghanistan'},
    {value:'Albania'},
    {value:'Algeria'},
    {value:'Australia'},
    {value:'Bangladesh'},
    {value:'Brazil'},
    {value:'Canada'},
    {value:'Cuba'},
    {value:'Denmark'},
    {value:'France'},
    {value:'India'},
]

Download source code from here

Friday, April 19, 2019

Webview In React Native

Deepshikha 2:59 AM react native webview full screen , react native webview npm 3 Comments

Video Demo:

Basically a WebView is a view while display the web pages in our native applications. We are also able to load our local HTML in this WebView. Download Source code from below.

HomeScreen.js

import React, {Component} from 'react'
import {View,StyleSheet,Text, StatusBar,WebView, ActivityIndicator} from 'react-native'




export default class HomeScreen extends Component{
state ={
loader: true,
}


hideSpinner(){
this.setState({
loader:false,
})
}


showSpinner(){
this.setState({
loader:true,
})
}
render(){
return(
<View style={styles.container}>
<StatusBar backgroundColor="#FF7043"></StatusBar>
<View style={styles.headerContainer}>
<Text style={styles.headerTxt}>HomeScreen</Text>
</View>
<View style={styles.mainContainer}>
<WebView source={{uri:'http://deepshikhapuri.blogspot.com/'}}
onLoadStart={this.showSpinner.bind(this)} onLoad={this.hideSpinner.bind(this)}></WebView>
{this.state.loader?  <View style={this.state.loader?styles.spinnerContainer: null}>
<ActivityIndicator size={this.state.loader?'large':null} color='white'  ></ActivityIndicator>
</View>  :null}
</View>          
</View>
)
}
}


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


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


headerTxt:{
fontSize:13,
color:'white',
},
mainContainer:{
flex:1,
justifyContent:'center',
backgroundColor:'green',
},


spinnerContainer:{
width:50,
height:50,
backgroundColor:'#FF5722',
justifyContent:'center',
alignSelf:'center',
position:'absolute',
}


})

Download Source code from here

Wednesday, March 20, 2019

Api Integration In React Native

Deepshikha 5:32 AM api integration in react native , api integration react native 2 Comments

Video Demo

Many times in react native we need to fetch data from a server end. In this tutorial we will learn how to call the rest api's in React Native. DOWNLOAD SOURCE CODE FROM BELOW

HomeScreen.js

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


export default class HomeScreen extends Component{
    state={
        response:'',
        loading:false,
    }


customListView(rowdata){
        return (
            <View style={styles.itemContainer}>
            <Text>{rowdata.item.name}</Text>
            <Text>{rowdata.item.email}</Text>
            <Text>{rowdata.item.phone.mobile}</Text>
            </View>
        )
    }


customListViewDivider(){
        return(
            <View style={styles.dividerContainer}></View>
        )
    }


componentDidMount(){
        this.setState({
            loading:true,
        })
        this.fetchData()
    }


fetchData(){
       fetch('https://api.androidhive.info/contacts/')
       .then((response)=> response.json())
       .then((responsjson)=>{
        this.setState({
            response:responsjson.contacts,
            loading:false,
        })


})
       .catch((error)=>{
           console.log("error ",error.toString())
           this.setState({
               loading:false,
           })
       })
   }






render(){
        return(
            <View style={styles.container}>
                <View style={styles.headerContainer}>
                    <Text style={styles.headerTxt}>Home Screen</Text>
                </View>
                <FlatList data={this.state.response}
                renderItem={this.customListView}
                keyExtractor={(item, index) => index.toString()}
                ItemSeparatorComponent={this.customListViewDivider}
                ></FlatList>
                <View style={this.state.loading? styles.loaderContainer: {display:"none"}}>
                <ActivityIndicator animating={true} size='large' color='#FFFFFF'></ActivityIndicator>
                </View>
            </View>
        )
    }
}


const styles = StyleSheet.create({
    container:{
       height:'100%',
       position:'relative'
    },


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


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


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


itemContainer:{
        flex:1,
        paddingLeft:10,
        justifyContent:'center',
        width:'100%',
        height:100,
    },


loaderContainer:{
        height:'100%',
        opacity:0.8,
        width:'100%',
        backgroundColor:'#000000',
        position:'absolute',
        justifyContent:'center',
        alignItems:'center'
    }


})

DOWNLOAD SOURCE CODE FROM HERE

Tuesday, March 12, 2019

Flatlist React Native Horizontal

Deepshikha 11:16 PM flatlist react native horizontal , horizontal scroll react native flatlist 3 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 add the Horizontal FlatList in react native. DOWNLOAD SOURCE CODE FROM BELOW.

react native scrollview horizontal flatlist

HomeScreen.js

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


export default class HomeScreen extends Component{
    state ={
        category:[
            {name:"Life isn't about finding yourself. Life is about creating yourself."},
            {name:"The most important thing is to enjoy your life - to be happy - it's all that matters."},
            {name:"Life is really simple, but we insist on making it complicated."},
            {name:"We all have two lives. The second one starts when we realize we only have one."},
           { name:"When one door closes, another opens; but we often look so long and so regretfully upon the closed door that we do not see the one that has opened for us."}
        ]
    }


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


<View style={styles.mainContainer}>
            <FlatList horizontal
             data={this.state.category}
            keyExtractor={(item,index)=> index.toString()}
            ItemSeparatorComponent={this.listDivider}
            renderItem={this.customListView.bind(this)}></FlatList>
            </View>
            </View>
        )
    }


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


listDivider(){
        return (
            <View style={styles.dividerContainer}></View>
        )
    }




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


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


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


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


listContainer:{
        width:250,
        height:250,
        padding:10,
        justifyContent:'center',
        alignItems:'center',
        alignSelf:'center',
        backgroundColor:'#EAEAEA'
    },


mainContainer:{
        flex:1,
        padding:10,
        justifyContent:'center',
        alignItems:'center',
        alignSelf:'center',
        alignContent:'center',
    },


dividerContainer:{
        width:10,
        height:1,
    },


listTxt:{
        color:'#FF5722',
        fontSize:13,
    }
})

DOWNLOAD SOURCE CODE FROM HERE

Sunday, March 3, 2019

Facebook Login In React Native

Deepshikha 8:21 PM facebook login for react native , facebook login in react native 2 Comments

Video Demo:

This article is about facebook integration in your react native application. Nowadays my applications are using Facebook login to register user in their application. The fbsdk library is a simplest way for Facebook integration in react native. DOWNLOAD SOURCE CODE FROM BELOW.

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 Facebook library in your project:
react-native install react-native-fbsdk
Step 4->
Link this library with your native project
react-native link react-native-fbsdk

Configuration for Android:

Step 1-> Add the following lines in your MainApplication.java class
Path-> ProjectName-> android->app->src->MainApplication.java

MainApplication.java

package com.loginfb;
import android.app.Application;
import com.facebook.react.ReactApplication;
import com.facebook.reactnative.androidsdk.FBSDKPackage;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;
import java.util.Arrays;
import java.util.List;
import com.facebook.FacebookSdk;
import com.facebook.CallbackManager;
import com.facebook.appevents.AppEventsLogger;


public class MainApplication extends Application implements ReactApplication {


private static CallbackManager mCallbackManager = CallbackManager.Factory.create();


protected static CallbackManager getCallbackManager() {
    return mCallbackManager;
  }


private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    public boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }


@Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(new MainReactPackage(), 
      new FBSDKPackage(mCallbackManager));
    }


@Override
    protected String getJSMainModuleName() {
      return "index";
    }
  };


@Override
  public ReactNativeHost getReactNativeHost() {
    return mReactNativeHost;
  }


@Override
  public void onCreate() {
    super.onCreate();    
    FacebookSdk.setApplicationId("1650042371898848");
    FacebookSdk.sdkInitialize(this);
    AppEventsLogger.activateApp(this);
    SoLoader.init(this, /* native exopackage */ false);
  }
}

Step 2 Add Facebook callback on your MainActivity.java
Path-> ProjectName-> android->app->src->MainActivity.java

MainActivity.java

package com.loginfb;
import com.facebook.react.ReactActivity;
import android.content.Intent;


public class MainActivity extends ReactActivity {
    /**
     * Returns the name of the main component registered from JavaScript.
     * This is used to schedule rendering of the component.
     */
    @Override
    protected String getMainComponentName() {
        return "LoginFB";
    }


@Override
public void onActivityResult(int requestCode, int resultCode, Intent data) {
    super.onActivityResult(requestCode, resultCode, data);
    MainApplication.getCallbackManager().onActivityResult(requestCode, resultCode, data);
}
}

For IOS Facebook configuration please follow this link https://github.com/facebook/react-native-fbsdk

Now you can start work on your React native project

HomeScreen.js

import React, {Component} from 'react'
import {View, StyleSheet, Text,Button,Image, StatusBar} from 'react-native'
import {AccessToken,GraphRequest,GraphRequestManager, LoginManager} from 'react-native-fbsdk'


export default class HomeScreen extends Component {


state = {
        facebookLogin:false,
        name:'',
        email:'',
        image:'no',
    }


facbookLogout(){
        let context = this
        LoginManager.logOut()
        this.setState({
            facebookLogin:false,
            name:'',
            email:'',
            image:'no'
        })
    }


facebookLoginfunctionality (){
        var accessTokenValue='';
        var context = this;
        LoginManager.logInWithReadPermissions(['email', 'public_profile']).then(
            function (result){
                if (result.isCancelled){
                    console.log("request cancel")
                }else{
                    console.log('result' + result.toString())
                    AccessToken.getCurrentAccessToken().then(
                        function (data){
                            console.log(data.accessToken.toString())
                            accessTokenValue= data.accessToken.toString()


const graphRequest = new GraphRequest('me/',{
                                accessToken: accessTokenValue,
                                parameters: {
                                    'fields': {
                                        'string' : 'email,name,picture.type(large)'
                                    }
                                }
                            }, (error,result)=>{
                                if(error){
                                    console.log("error profile login")
                                }else{
                                    console.log(result.picture.data.url)
                                    context.setState(
                                        {facebookLogin:true,
                                            name:result.name,
                                            email:result.email,
                                            image:result.picture.data.url


}
                                    )
                                }
                            })


new GraphRequestManager().addRequest(graphRequest).start()


}
                    )
                }
            },


function(error){
                console.log('error '+ error.toString())
            }
        )
    }


render(){
        return(
            <View style={styles.container}>


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


<View style={styles.mainContainer}>
                <View style= {this.state.facebookLogin?style={display:'none'}:styles.loginContainer}>
                <View style={styles.btnContianer}>
                <Button color="#4267B2" title="Login" onPress={this.facebookLoginfunctionality.bind(this)} ></Button>
                </View>
                </View>


<View style={this.state.facebookLogin? styles.loginContainer: style={display:'none'}}>
                <Image style={styles.profileImage} source={{uri:this.state.image}}></Image>
                <Text style={styles.profileTxt}>{this.state.name}</Text>
                <Text style={styles.profileTxt}>{this.state.email}</Text>                
                <View style={styles.btnContianer}>
                <Button backgroundColor="#4267B2" color="#4267B2" title="Logout" onPress={this.facbookLogout.bind(this)} ></Button>
                </View>                
                </View>
                </View>                
            </View>
        )
    }


}


const styles= StyleSheet.create({
    container:{
        flex:1
    },
    headerContainer:{
        backgroundColor:'#FF5722',
        height:40,
        justifyContent:'center',
        alignItems:'center'        
    },
    headerTxt:{
        color:'white',
        fontSize:13
    },


mainContainer:{
        flex:1,
        backgroundColor:'white',
        justifyContent:'center',
        alignItems:'center'
    },


loginContainer:{
        flex:1,
        backgroundColor:'white',
        justifyContent:'center',
        alignItems:'center',
        alignSelf:'center',
    },


profileImage:{
        height:50,
        width:50,
        margin:10,
    },
    profileTxt:{
        fontSize:13,
        color:'black',
        marginBottom:10
    },


btnContianer:{
        width: 200,
        height: 30,
    }
})

Download source code from here

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

Sunday, November 10, 2019

Runtime Permission In React Native

Wednesday, June 12, 2019

React Native Dropdown Example

Friday, April 19, 2019

Webview In React Native

Wednesday, March 20, 2019

Api Integration In React Native

Tuesday, March 12, 2019

Flatlist React Native Horizontal

Sunday, March 3, 2019

Facebook Login In React Native

Advertisement

Popular

Blog Archive

Contributors