Introduction to React Native Navigation

 Create a project "exop init ProjectName"

Install the following dependencies in order to use Stack, Tab, Drawer Navigations and Icons

1. npm install @react-navigation/native
2. npm install @react-navigation/stack
3. expo install react-native-gesture-handler
4. npm install @react-navigation/bottom-tabs
5. npm install @react-navigation/drawer
6. expo install react-native-gesture-handler react-native-reanimated
7. expo install react-native-reanimated
8. npm install react-native-elements --save --force
9. npm install react-native-vector-icons --save

Open Babel.config.js and change as follows

module.exports = function(api) {

  api.cache(true);

  return {

    presets: ['babel-preset-expo'],

    plugins: ['react-native-reanimated/plugin'],

  };

};

Now run expo start --clear

Now create JS Files as follows

Header.js

import { StatusBar } from 'expo-status-bar';

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

import Photo from './Photo';

export default function Header() {

    return (

      <View style={styles.container}>

        <Text style={styles.text}> Hello React Native</Text>

        <StatusBar style="auto" />

      </View>

    );

  }

 

  const styles = StyleSheet.create({

    container: {

      flex: 1,

      backgroundColor: '#fff',

      alignItems: 'center',

      justifyContent: 'center',

    },

    text: {

      fontFamily: 'serif',

      fontSize: 40,

      color: 'blue'

    }

  });

 

Photo.js

import { StatusBar } from 'expo-status-bar';

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

function Photo() {

    return (

      <View style={styles.container}>

        <Image source={require('./assets/logo.jpg')} style={styles.Image} />

        <StatusBar style="auto" />

      </View>

    );

  }

 

  const styles = StyleSheet.create({

    container: {

      flex: 1,

      backgroundColor: '#fff',

      alignItems: 'center',

      justifyContent: 'center',

    },

    Image: {

        width: 400,

        height: 200

    }

  });

  export default  Photo;

Home.js

import { StatusBar } from 'expo-status-bar';

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

import Photo from './Photo';

import Header from './Header';

export default function Home({ navigation }) {

  return (

    <View style={styles.container}>

      <Photo/>

      <Header/>

      <Text>This is Home Page</Text>

      <Button title='Go to Contact' onPress={() => navigation.navigate('Contact Page')}>

         

      </Button>

     

      <StatusBar style="auto" />

    </View>

  );

}

const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: '#fff',

    alignItems: 'center',

    justifyContent: 'center',

  },

});

Contact.js

import { StatusBar } from 'expo-status-bar';

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

import Photo from './Photo';

import Header from './Header';

export default function Contact({navigation}) {

  return (

    <View style={styles.container}>

      <Photo/>

      <Header/>

      <Text>This is Contact Page</Text>

      <Button title='Go to Home' onPress={() => navigation.navigate('Home Page')}>

         

      </Button>

     

      <StatusBar style="auto" />

    </View>

  );

}

const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: '#fff',

    alignItems: 'center',

    justifyContent: 'center',

  },

});

App.js

import { StatusBar } from 'expo-status-bar';

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

import Photo from './Photo';

import Header from './Header';

import Home from './Home';

import Contact from './Contact';

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

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

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

import { createDrawerNavigator } from '@react-navigation/drawer';

import { Icon } from 'react-native-elements';

import { Ionicons } from '@expo/vector-icons';

// const Stack = createStackNavigator();

// export default function App() {

//   return (

//     <NavigationContainer>

//       <Stack.Navigator >

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

//             headerShown: false,

//             title: 'My Home Screen',

//             headerStyle: {

//             backgroundColor: '#f4511e',

//             },

//             headerTintColor: '#fff',

//             headerTitleStyle: {

//             fontWeight: 'bold',

//             },

//             }}/>

//         <Stack.Screen name="Contact Page" component={Contact}/>

//       </Stack.Navigator>

//     </NavigationContainer>

//   );

// }

const Drawer = createDrawerNavigator();

export default function App() {

  return (

    <NavigationContainer>

      <Drawer.Navigator >

        <Drawer.Screen name="Home Page" component={Home} options={{

            title: 'My Home Screen',

            headerStyle: {

            backgroundColor: '#f4511e',

            },

            headerTintColor: '#fff',

            headerTitleStyle: {

            fontWeight: 'bold',

            },

            }}/>

        <Drawer.Screen name="Contact Page" component={Contact}

        // options={{ drawerItemStyle: { display: 'none' }, }}

        />

      </Drawer.Navigator>

    </NavigationContainer>

  );

}

// const Tab = createBottomTabNavigator();

// export default function App() {

//   return (

//     <NavigationContainer>

//       <Tab.Navigator screenOptions={({ route }) => ({

//                 tabBarIcon: ({ focused, color, size }) => {

//                     let iconName = "ios-home";

//                     if(route.name === 'Home Page') {

//                     }

//                     else if (route.name === 'Contact Page') {

//                         iconName = 'ios-list';

//                     }

//                     return <Ionicons name={iconName} size={size} color={color} />;

//                 },

//             })}>

//         <Tab.Screen name="Home Page" component={Home} />

//         <Tab.Screen name="Contact Page" component={Contact}/>

//       </Tab.Navigator>

//     </NavigationContainer>

//   );

// }

const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: '#fff',

    alignItems: 'center',

    justifyContent: 'center',

  },

});

The above code is only for Drawer Navigation. Just comment this and uncomment Tab and Stack Navigations and check

Save the following image under assets

That's all. Enjoy Creating Mobile Apps.

Thank You