Skip to content

Instantly share code, notes, and snippets.

@guillainbisimwa

guillainbisimwa/App.js

Last active October 19, 2021 21:17
Show Gist options
  • Save guillainbisimwa/fc233f8e7da31f3f3d58cf4d8765b6a5 to your computer and use it in GitHub Desktop.
Save guillainbisimwa/fc233f8e7da31f3f3d58cf4d8765b6a5 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. guillainbisimwa revised this gist Oct 19, 2021. 1 changed file with 22 additions and 0 deletions.
    22 changes: 22 additions & 0 deletions App.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,22 @@
    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;
  2. guillainbisimwa created this gist Oct 19, 2021.
    37 changes: 37 additions & 0 deletions Details.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,37 @@
    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;
    22 changes: 22 additions & 0 deletions Home.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,22 @@
    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;