DEV Community

Tejendra Singh Rajawat
Tejendra Singh Rajawat

Posted on

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
expo install react-native-screens react-native-safe-area-context
Enter fullscreen mode Exit fullscreen mode

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

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>;
};

Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)