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

Monday, January 28, 2019

Navigation Drawer In React Native

Video Demo:

Basically a navigation drawer is used to show a main menu of application. The user can see the drawer when they swipe their finger from left to right or a vice verse. They can also open the drawer by tapping on hamburger icon. This tutorial will help you to install and understand the flow of react native navigation drawer. You can also download the source code from below.

create navigation drawer in react native

navigation drawer in 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 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->
For android you need to change your MainActivity with following functionations. Path: ProjectName->Android-> app->src->java->MainActivity.java

MainActivity.Java:

package com.navigationdrawer;
import com.facebook.react.ReactActivity;
import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
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 "NavigationDrawer";
    }


@Override
    protected ReactActivityDelegate createReactActivityDelegate() {
    return new ReactActivityDelegate(this, getMainComponentName()) {
    @Override
    protected ReactRootView createRootView() {
    return new RNGestureHandlerEnabledRootView(MainActivity.this);
    }
    };
    }


}
    

Now you can start work on your React native project

App.js:

import React, {Component} from 'react';
import {createDrawerNavigator, createAppContainer} from 'react-navigation'
import HomeScreen from './Screens/HomeScreen'
import SettingScreen from './Screens/SettingScreen'
import ProfileScreen from './Screens/ProfileScreen';


export default class App extends Component {
  render() {
    return (
     <MyAppdrawer></MyAppdrawer>
    );
  }
}


const MyDrawerNavigator = createDrawerNavigator({
  Home: {
    screen: HomeScreen,
  },
  Settings: {
    screen: SettingScreen,
  },
  Profile:{
    screen: ProfileScreen
  }
});


const MyAppdrawer = createAppContainer(MyDrawerNavigator);

HomeScreen.js:

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


export default class HomeScreen extends Component{


menuClick(){
        this.props.navigation.openDrawer()
    }




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


<View style={styles.topBar}>
               
 <View style={styles.leftHeader}>
                  <TouchableOpacity style={styles.imgClick} onPress={this.menuClick.bind(this)}>
                    <Image style={styles.imgMenu} source={require('../assets/menu.png')}></Image>
                  </TouchableOpacity>
                </View>


<Text style={styles.txtBar}>Home Screen</Text>
              <View style={styles.rightHeader}></View></View>
              <View style={styles.contentBar}>


<Image style={styles.imgHome}source={require('../assets/mansion.png')}></Image>
              </View>


</View>
        )
    }



}


const styles = StyleSheet.create({
    container:{
        flex:1,
        flexDirection:'column',
    },
    topBar:{
        height:40,
        flexDirection:'row',
        alignItems:'center',
        justifyContent:'space-between',
        backgroundColor: '#FF5722',
    },


leftHeader:{
        flex:1,
        marginLeft:10,
        justifyContent:'flex-start',
    },


rightHeader:{
        flex:1,
        justifyContent:'flex-end',
    },


txtBar:{
        color: '#ffffff',

    },


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


imgMenu:{
        width:20,
        height:20,


},


imgClick:{
        width:40,
        height:40,
        justifyContent:'center'
    },


imgHome:{
        width: 200,
        height: 200
    },
})

ProfileScreen.js:

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


export default class ProfileScreen extends Component{


menuClick(){
      this.props.navigation.openDrawer()
    }


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


<View style={styles.topBar}>
                <View style={styles.menuView}>
                <TouchableOpacity style={styles.imgClick} onPress={this.menuClick.bind(this)}>
                <Image style={styles.imgMenu} source={require('../assets/menu.png')} ></Image>
                </TouchableOpacity>
                </View>
              <Text style={styles.topTxt}>Profile Screen</Text>   
                   <View style={styles.menuViewright}></View></View>


<View style={styles.contentBar}>
                  <Image source={require('../assets/boy.png')} style={styles.imgSetting}></Image>
                </View>
            </View>
        )
    }


}


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


topBar:{
        height: 40,
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        backgroundColor: '#FF5722',  
    },


menuView:{
        flex:1,
        flexDirection: 'row',
        justifyContent: 'flex-start',


},
     menuViewright:{
        flex:1,
        flexDirection: 'row',
        justifyContent: 'flex-end',


},


topTxt:{
        color:'white',
        flex:1,
    },


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


imgMenu:{
        height:20,
        marginLeft:10,
        width:20,
    },


imgClick:{
        width:40,
        height:40,
        justifyContent:'center'
    },


imgSetting:{
        width: 200,
        height: 200
    },
})

SettingScreen.js:

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


export default class SettingScreen extends Component{


menuClick(){
        this.props.navigation.openDrawer()
    }


render(){
        return(


<View style={styles.container}>
               <StatusBar backgroundColor='#FF7043'></StatusBar>
                <View style={styles.topBar}>
                    <View style={styles.headerLeft}>
                        <TouchableOpacity  style={styles.imgClick} onPress={this.menuClick.bind(this)}>                            
       <Image source={require('../assets/menu.png')}  style={styles.imgMenu}></Image>
                        </TouchableOpacity>
                    </View>




<Text style={styles.topTxt}>Setting Screen</Text>
                   <View style={styles.headerRight}></View>
                </View>


<View style={styles.contentBar}>
                    <Image source={require('../assets/setting2.png')} style={styles.imgSetting}></Image>
                </View>
            </View>
        )
    }
}


const styles=StyleSheet.create({


container:{
        flex:1
    },


topBar:{
        height: 40,
        backgroundColor:'#FF5722',
        flexDirection:'row',
        alignItems:'center',
    },


headerLeft:{
        flex:1,
        marginLeft:10,
        justifyContent:'flex-start',
    },


headerRight:{
        flex:1,
        justifyContent:'flex-end'
    },


topTxt:{
        color: '#FFFFFF',
    },


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


imgMenu:{
        height:20,
        width:20,
    },


imgClick:{
        width:40,
        height:40,
        justifyContent:'center'
    },


imgSetting:{
        width: 200,
        height: 200
    },
})

DOWNLOAD SOURCE CODE FROM HERE

Tuesday, January 15, 2019

React Native Navigation

Deepshikha 10:25 PM navigation between screens react native , navigation in react native 0 Comments

Video Demo:

Basically a react native navigation is Javascript library to move from one screen to another screen. This tutorial will help you to install and understand the flow of React navigation. You can download the source code from below.

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->
For android you need to change your MainActivity with following functionations.
Path: ProjectName->Android-> app->src->java->MainActivity.java

MainActivity.Java:

packagecom.movingscreens;
    importcom.facebook.react.ReactActivity;
    importcom.facebook.react.ReactActivityDelegate;
    importcom.facebook.react.ReactRootView;
    importcom.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
    publicclassMainActivityextendsReactActivity {
    /**     * Returns the name of the main component registered from JavaScript.     * This is used to schedule rendering of the component.     */@OverrideprotectedStringgetMainComponentName() {
    return"MovingScreens";
    }
    
@OverrideprotectedReactActivityDelegatecreateReactActivityDelegate() {
    returnnew ReactActivityDelegate(this, getMainComponentName()) {
    @OverrideprotectedReactRootViewcreateRootView() {
    returnnew RNGestureHandlerEnabledRootView(MainActivity.this);
    }
    };
    }
       }
    


Now you can start work on your React native project



App.js:

import React, {Component} from 'react';
    import {createStackNavigator,createAppContainer} from 'react-navigation'
    import HomeScreen from './Screens/HomeScreen';
    import ProfileScreen from './Screens/ProfileScreen';
    import ContactScreen from './Screens/ContactScreen';
    import MainScreen from './Screens/MainScreen'
    

export default class App extends Component {
    render() {
 
    return <AppNavigationContainer/>
  
    }
   
    }
    const AppNavigator = createStackNavigator({
   
    Main:MainScreen,
    
    Home: HomeScreen,
    
    Profile: ProfileScreen,
    
    Contact:ContactScreen
   
    }, {
   
    initialRouteName: 'Main',
   
    navigationOptions: {
  
    headerTitleStyle: {
   
    fontWeight: "bold",
  
    color: "red",
   
    },
   
    headerTintColor: "red"
    
    }
    
    })
   
    const AppNavigationContainer = createAppContainer(AppNavigator);
    

Now create a new folder in your project with the name of Screens and add the following files in this folder



MainScreen.js:

import React  ,{Component} from 'react'
    import {View, Text,StyleSheet,Button, StatusBar} from 'react-native'
    export default class MainScreen extends Component{
    
    static navigationOptions = {
    headerTintColor: 'white',
    title: 'Moving between screens',
    headerStyle: { backgroundColor: '#FF5722' },
    headerTitleStyle: {  fontWeight: '300',
    color: 'white',
    fontFamily: 'Nunito-Regular',
    justifyContent: 'center',
    alignItems: 'center',
    fontSize: 16},
    }
    homeClick(){
    this.props.navigation.navigate('Home')
    }
    contactClick(){
    this.props.navigation.navigate('Contact')
    }
    profileClick(){
    this.props.navigation.navigate('Profile')
    }
    render(){
    return(
    <View style={style.Container}>
    
    <StatusBar backgroundColor='#FF7043'></StatusBar>
    <View style={style.btnContainer}>

    <Button title='Home' color='#FF5722' onPress={this.homeClick.bind(this)}></Button>
   
    </View >
    
    <View style={style.btnContainer}>
    <Button title='Contact'  color='#FF5722' onPress={this.contactClick.bind(this)}> </Button>

    </View>
    <View style={style.btnContainer}>
 
    <Button title='Profile'  color='#FF5722' onPress={this.profileClick.bind(this)}></Button>
 
    </View>
    </View>
    )
    }
    }
    const style = StyleSheet.create({
    Container:{
    flex:1,
    justifyContent: 'center',
    alignItems: 'center',
    width: '100%'
    },
    
    btnContainer:{
    width:'70%',
    height:50,

    position:'relative',
    justifyContent: 'center',
 
    alignContent:'center',
    }
    });
    

HomeScreen.js:

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

export default class HomeScreen extends Component{
    static navigationOptions = {

        headerTintColor: 'white',

        title: 'Moving between screens',
        headerStyle: { backgroundColor: '#FF5722' },

        headerTitleStyle: {  fontWeight: '300',

        color: 'white',

       fontFamily: 'Nunito-Regular',

        justifyContent: 'center',
        alignItems: 'center',

        fontSize: 16},

      }

    render(){

        return(

            <View style={styles.Container}>

                <Text style={styles.txtStyle}>Home Screen</Text>

            </View>

        )

    }

}

const styles= StyleSheet.create({

    Container:{

        flex:1,

        justifyContent:'center',

        alignItems:'center'

    },

    txtStyle:{

        alignItems:'center',

        fontWeight: 'bold',

        fontFamily: 'Nunito-Regular',

        fontSize: 25,

    },

})

ContactScreen.js:

import React ,{Component} from 'react'
    import {View , Text, StyleSheet} from 'react-native'
    export default class ContactScreen extends Component{
    static navigationOptions = {
    
    headerTintColor: 'white',
    title: 'Moving between screens',
    headerStyle: { backgroundColor: '#FF5722' },
    headerTitleStyle: {  fontWeight: '300',
    color: 'white',
    fontFamily: 'Nunito-Regular',
    justifyContent: 'center',
    alignItems: 'center',
    fontSize: 16},
    
    }
    
    render(){
   
    return(
    
    <View style={styles.Container}>
    
    <Text style={styles.txtStyle}>Contact us</Text>
    
    </View>
    
    )
    
    }
    
    }
    
    const styles = StyleSheet.create({
   
   Container:{
    
    justifyContent:'center',
    
    alignItems:'center',
    
    flex:1,
    
    },
    
    txtStyle:{
   
    alignItems:'center',
    
    fontWeight: 'bold',
    
    fontFamily: 'Nunito-Regular',
    
    fontSize: 25,
    
    },
    
    })
    

ProfileScreen.js:

import React ,{Component} from 'react'

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

    export default class ProfileScreen extends Component{

    static navigationOptions = {

    headerTintColor: 'white',

   title: 'Moving between screens',

   headerStyle: { backgroundColor: '#FF5722' },

  headerTitleStyle: {  fontWeight: '300',

  color: 'white',

  fontFamily: 'Nunito-Regular',

  justifyContent: 'center',

   alignItems: 'center',

   fontSize: 16},

   }

   render(){

   return(

   <View style={styles.Container}>

   <Text style={styles.txtStyle}>Profile Screen</Text>

   </View>

   )

   }
   }

   const styles= StyleSheet.create({

   Container:{

   flex:1,

   justifyContent:'center',

   alignItems:'center'

   },

   txtStyle:{

   alignItems:'center',

   fontWeight: 'bold',

   fontFamily: 'Nunito-Regular',

   fontSize: 25,

   },

   })