Create navigation screens in expo project 🧑‍💻

Today ,we are creating navigation screens in expo project from scratch. For that let's first of all create a react-native project.

expo init online-store

after running above command click enter , it will choose default options.

Now ,we have our react-native project. now we need to install some more dependencies, which are as follow -

npm install @react-navigation/native @react-navigation/native-stack

expo install react-native-screens react-native-safe-area-context

Now go to app.js and delete existing code, we don't need it. we need below code.

import { StyleSheet, Text, View } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import Homepage from "./Screens/Homepage";
import MenSection from "./Screens/MenSection";
import WomenSection from "./Screens/WomenSection";
import Contactus from "./Screens/Contactus";
const stack = createNativeStackNavigator();
export default function App() {
  return (
    <NavigationContainer>
      <stack.Navigator>
        <stack.Screen
          name="Home"
          component={Homepage}
          options={{ title: "Welcome to online store" }}
        />
        <stack.Screen name="Men" component={MenSection} />
        <stack.Screen name="Women" component={WomenSection} />
        <stack.Screen name="Contact" component={Contactus} />
      </stack.Navigator>
    </NavigationContainer>
  );
}

If you run your project now, you can see homepage on first time. If we want to go to another page then we can use button or any other onClick method here and for that we have prop {navigation} which can help us to redirect to another page.

const Homepage= ({ navigation }) => {
  return (
    <Button
      title="Go to men's section"
      onPress={() =>
        navigation.navigate('Men', { state: 'Id of clothing' })
      }
    />
  );
};
const Men= ({ navigation, route }) => {
  return <Text>This is {route.params.state}'s profile</Text>;
};

Conclusion

That's it for react-native navigation, now you can play it with more as use case and make it more advance as you want.