Last active
October 19, 2021 21:17
-
-
Save guillainbisimwa/fc233f8e7da31f3f3d58cf4d8765b6a5 to your computer and use it in GitHub Desktop.
Navigation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { NavigationContainer } from '@react-navigation/native'; | |
| import { createNativeStackNavigator } from '@react-navigation/native-stack'; | |
| import React from 'react'; | |
| import { Category, Details, Home } from './Screens'; | |
| const Stack = createNativeStackNavigator(); | |
| const App = () => { | |
| return ( | |
| <NavigationContainer > | |
| <Stack.Navigator initialRouteName='Home' | |
| screenOptions={{ headerShown: false }} | |
| > | |
| <Stack.Screen name='Home' component={Home} /> | |
| <Stack.Screen name='Details' component={Details} /> | |
| </Stack.Navigator> | |
| </NavigationContainer> | |
| ) | |
| }; | |
| export default App; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from "react"; | |
| import { Block, Text } from "../Components"; | |
| import Ionicons from 'react-native-vector-icons/Ionicons'; | |
| import { Colors } from "../Constants"; | |
| import { TouchableOpacity } from "react-native"; | |
| const Details = ({navigation, route}) => { | |
| return ( | |
| <Block p={15}> | |
| <Block> | |
| <TouchableOpacity onPress={() => { | |
| navigation.navigate('Home') | |
| }} > | |
| <Ionicons name="arrow-back-outline" size={30} color={Colors.grey_one} /> | |
| </TouchableOpacity> | |
| </Block> | |
| <Text h1 bold >Details {route.params.name}</Text> | |
| <Block row wrap> | |
| { | |
| route.params.cats.map((cat, index) => { | |
| return ( | |
| <Block center middle key={index} color={cat.color} style={styles.cat}> | |
| <Ionicons name={cat.icon} color={Colors.white} size={60} /> | |
| <Text white bold h2>{cat.name}</Text> | |
| <Text size={15} grey_four >{cat.places} places</Text> | |
| </Block> | |
| ) | |
| }) | |
| } | |
| </Block> | |
| </Block> | |
| ); | |
| }; | |
| export default Details; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from "react"; | |
| import { Colors } from "../Constants"; | |
| import { Block, Text } from "../Components"; | |
| import Ionicons from 'react-native-vector-icons/Ionicons'; | |
| import { TouchableOpacity } from "react-native"; | |
| const Home = ({ navigation }) => { | |
| return ( | |
| <Block p={15}> | |
| <Text h1 bold >Home </Text> | |
| <TouchableOpacity onPress={() => { | |
| navigation.navigate('Details', {cats: ["Food", "PIzza"]}) | |
| }} > | |
| <Ionicons name="bulb-sharp" size={50} color={Colors.blue} /> | |
| </TouchableOpacity> | |
| </Block> | |
| ); | |
| }; | |
| export default Home; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment