welcome to XRM blog

Keep in touch with latest CRM/ERP articles

To remain competitive your organisation must be efficient across the business process spectrum. To do so you need to take sound decisions based on a balance between the cost and risk. To do so you will be heavily dependent on your content management in itself needs...

image
Blog

React Native Navigation v5.x: Stack Navigation

By Himanshu Yadav on 4/24/2020

Create new project: expo init stacknavigation

Open project into code editor, (I’m using Visual studio code)

Install stack navigation library

npm install @react-navigation/native

npm install @react-navigation/stack 

expo install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

Import stack navigation library, add these two lines

 

import { NavigationContainer } from '@react-navigation/native';

import { createStackNavigator } from '@react-navigation/stack';

 

Create a simple page

function HomeScreen() {

  return (

    <View style={flex: 1alignItems: 'center'justifyContent: 'center' }}>

      <Text>Home Screen</Text>

    </View>

  );

}

This is our Home Screen.

Now create an instance of stack navigator

const Stack = createStackNavigator();

 

Now put your Home Screen inside Navigation Container

<NavigationContainer>

      <Stack.Navigator initialRouteName="Home">

        <Stack.Screen name="Home" component={HomeScreen}/>

      </Stack.Navigator>

</NavigationContainer>

 

If you want to customize Header bar you can add some color into that

<NavigationContainer>

      <Stack.Navigator initialRouteName="Home">

      <Stack.Screen name="Home" component={HomeScreen} options={{

          headerStyle: {

            backgroundColor: '#8A2BE2'

          },

          headerTintColor: '#fff',

          

        }}/>

      </Stack.Navigator>

</NavigationContainer>

 

Now, lets navigation to another page from Home, so to do that we have to add one another UI view.

function DetailsScreen() {

  return (

    <View style={flex: 1alignItems: 'center'justifyContent: 'center' }}>

      <Text>Details Screen</Text>

    </View>

  );

}

 

We have to make some changes into Home Screen, we have to add a navigation prop

Also we have to add Button control, when we click on button it will open detail page.


Complete Code:

import * as React from 'react';

import { ButtonViewText } from 'react-native';

import { NavigationContainer } from '@react-navigation/native';

import { createStackNavigator } from '@react-navigation/stack';

 

function HomeScreen({ navigation }) {

  return (

    <View style={flex: 1alignItems: 'center'justifyContent: 'center' }}>

      <Text>Home Screen</Text>

      <Button

        title="Go to Details"

        onPress={() => navigation.navigate('Details')}

      />

    </View>

  );

}

 

function DetailsScreen() {

  return (

    <View style={flex: 1alignItems: 'center'justifyContent: 'center' }}>

      <Text>Details Screen</Text>

    </View>

  );

}

 

const Stack = createStackNavigator();

 

function App() {

  return (

    <NavigationContainer>

      <Stack.Navigator initialRouteName="Home">

        <Stack.Screen name="Home" component={HomeScreen} options={{

          headerStyle: {

            backgroundColor: '#8A2BE2'

          },

          headerTintColor: '#fff',

          

        }}/>

        <Stack.Screen name="Details" component={DetailsScreen} options={{

          headerStyle: {

            backgroundColor: '#8A2BE2'

          },

          headerTintColor: '#fff',

          

        }}/>

      </Stack.Navigator>

    </NavigationContainer>

  );

}

 

export default App;


 

Blog Calendar
Blog Calendar List
2022 Nov  206  2
2022 Jun  6  2
2022 May  3  2
2022 Apr  4  2
2022 Mar  1  1
2022 Feb  2  1
2022 Jan  1  1
2021 Dec  3  1
2021 Nov  2  1
2021 Oct  1  1
2021 Sep  10  1
2021 Aug  35  5
2021 Jul  34  4
2021 Jun  514  5
2021 May  25  3
2021 Apr  894  3
2021 Mar  88  5
2021 Feb  1024  7
2021 Jan  1135  9
2020 Dec  283  7
2020 Sep  61  3
2020 Aug  388  3
2020 Jul  90  1
2020 Jun  55  3
2020 Apr  37  3
2020 Mar  11  2
2020 Feb  26  5
2020 Jan  33  7
2019 Dec  17  4
2019 Nov  12  1
2019 Jan  33  3
2018 Dec  39  4
2018 Nov  68  3
2018 Oct  18  3
2018 Sep  829  11
2018 Aug  6  2
2018 Jun  11  1
2018 Jan  68  2
2017 Sep  576  5
2017 Aug  17  1
2017 Jul  17  2
2017 Jun  59  2
2017 May  21  1
2017 Apr  35  2
2017 Mar  120  4
2017 Feb  599  4
2016 Dec  192  3
2016 Nov  548  8
2016 Oct  278  10
2016 Sep  457  6
2016 Aug  39  1
2016 Jun  1827  6
2016 May  108  3
2016 Jan  71  2
2015 Dec  405  6
2015 Nov  4  1
2015 Oct  13  1
2015 Sep  1417  6
2015 Aug  14  1
2015 Jul  127  2
2015 Jun  10  1
2015 May  20  1
2015 Apr  30  3
2015 Mar  80  3
2015 Jan  5316  4
2014 Dec  17  1
2014 Nov  2252  4
2014 Oct  67  1
2014 Sep  106  2
2014 Aug  5122  1
2014 Jul  48  2
2014 Apr  2518  12
2014 Mar  302  19
2014 Feb  242  8
2014 Jan  1510  16
2013 Dec  21  2
2013 Nov  684  2
2013 Oct  256  3
2013 Sep  11  1
2013 Aug  40  3
2013 Jul  213  1
2013 Apr  56  6
2013 Mar  2143  10
2013 Feb  123  3
2013 Jan  288  2
2012 Nov  54  2
2012 Oct  490  10
Tag Cloud
Interested in our services? Still not sure about project details? get a quote