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.
Top comments (0)