Tutorial React Native Navigation 5

Pada tutorial kali ini. kita akan membahasa tentang navigation versi 5.x pada aplikasi react-native. react native navigation versi 5.x yang merupakan versi terbaru dan sangat support untuk hooks. Nah di tutorial ini kita akan mempelajari bagaiman cara berpindah laman/screen di React Native.

Apa Yang Akan Kita Pelajari ?

• Instalasi dan Setup React Navigation 5
• Routing di React Navigation
• Berpindah Halaman/Screen

Langsung saja kita coba koding langsung pada aplikasi

1. Buat project React-Native baru dengan nama reactnavigation

   npx react-native init reactnavigation

2. Install react-navigation 5 pada root project dengan perintah command line

   yarn add @react-navigation/native
   yarn add @react-navigation/stack

3. Install juga pendukung react-navigation untuk react-native

   npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
   

4. Tambahkan library pada folder android/app/build.grandle

   implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
   implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02' 

5. import packages react-navigation dan createStackNavigator pada app.js

   import { NavigationContainer } from '@react-navigation/native';
   import { createStackNavigator } from '@react-navigation/stack';

6. dan edit app.js sehingga menjadi

   import * as React from 'react';
   import { Button, View, Text } from 'react-native';
   import { NavigationContainer } from '@react-navigation/native';
   import { createStackNavigator } from '@react-navigation/stack';
   import HomeScreen from './src/Screen/HomeScreen';
   import DetailsScreen from './src/Screen/DetailsScreen';
   import ProfilesScreen from './src/Screen/ProfilesScreen';
   
   // Stack berguna untuk routing aplikasi
   const Stack = createStackNavigator();
   
   function App() {
     return (
       <NavigationContainer>
         <Stack.Navigator initialRouteName="Home">
           <Stack.Screen name="Home" component={HomeScreen} />
           <Stack.Screen name="Details" component={DetailsScreen} />
           <Stack.Screen name="Profiles" component={ProfilesScreen} />
         </Stack.Navigator>
       </NavigationContainer>
     );
   }
   
   export default App;

7. Buat folder file src/Screen/HomeScreen.js

   import React from 'react'
   import { Button, View, Text } from 'react-native'
   
   // Screen Home
   const HomeScreen = ({ navigation }) => {
       console.log(navigation)
       return (
           <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
               <Text>Home Screen</Text>
               <Button
                   title="Go to Details"
                   onPress={() => navigation.navigate('Details')}
               />
   
               <Button
                   color="red"
                   title="Go to Profile"
                   onPress={() => navigation.navigate('Profiles')}
               />
           </View>
       );
   }
   
   export default HomeScreen
   

8. Buat folder file src/Screen/DetailsScreen.js

   import React from 'react'
   import { Button, View, Text } from 'react-native'
   
   // Screen Detail
   const DetailsScreen = ({ route, navigation }) => {
       return (
           <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
               <Text>Details Screen</Text>
               <Button
                   title="Go to Details... again"
                   onPress={() => navigation.push('Details')}
               />
               <Button title="Go to Home" onPress={() => navigation.navigate('Home')} />
   
               <Button title="Go back" onPress={() => navigation.goBack()} />
               <Button
                   title="Go back to first screen in stack"
                   onPress={() => navigation.popToTop()}
               />
           </View>
       );
   }
   
   
   export default DetailsScreen
   

9. Buat folder file src/Screen/ProfilesScreen.js

   import React from 'react'
   import {Button, View, Text } from 'react-native'
   
   const ProfilesScreen = ({ route, navigation }) => {
       
       return (
           <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
               <Text>Profile Screen</Text>
               <Button
                   color="black"
                   title="Go to Home"
                   onPress={() => navigation.navigate('Home')}
               />
               <Button title="Go back" onPress={() => navigation.goBack()} />
               <Button
                   color="green"
                   title="Go back to first screen in stack"
                   onPress={() => navigation.popToTop()}
               />
           </View>
       );
   }
   export default ProfilesScreen
   

Hasil Belajar

Kesimpulan