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

Deepshikha Puri, the young Indian Entrepreneur heading the mobile development trade from years to successive extent, has worked with numerous clients and many tremendous brands in this industry of mobile encompassing in India and overseas maintaining promising work relationships with each of them with an impression to manage it's whole thing.

Sunday, November 10, 2019

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 react native android runtime permission

react-native-permissions example Request Runtime permission React Native

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

Demo:
react native dropdown example  react native picker dropdown example react native dropdown menu example

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

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.

webview in react native webview in react native example react native webview npm

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
Now you can start work on your React native project 

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

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
api integration in react native rest api integration in react native

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
Now you can start work on your React native project

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

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.

flatlist react native horizontal horizontal scroll react native flatlist react native scrollview horizontal flatlist

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
Now you can start work on your React native project

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

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.

how to facebook login in react native facebook login react native

react native facebook login tutorial facebook login using react native

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

facebook login in react native android 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 facebook login for react native 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