Redirect Setelah Sukses Login di React Native

Redirect Setelah Sukses Login adalah hal yang sering digunakan dalam sebuah pengembangan aplikasi Mobile. Bagaimana melakukan hal tersebut di React Native. Selamat menyimak

Untuk mengalihkan halaman di React Native, Anda dapat menggunakan library navigasi yang Anda gunakan, seperti React Navigation. Berikut adalah contoh bagaimana Anda dapat mengalihkan ke halaman “member.js” jika data.success bernilai true:

1. Pastikan Anda telah menginstal dan mengkonfigurasi React Navigation di proyek Anda. Anda dapat mengikuti dokumentasi React Navigation untuk menginstal dan mengkonfigurasi dengan benar.
2. Mengasumsikan Anda telah memiliki stack navigasi yang sudah dikonfigurasi, impor modul-modul yang diperlukan untuk navigasi:

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

3. Konfigurasikan stack navigasi Anda dan tentukan halaman-halaman yang Anda inginkan:

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Login" component={LoginScreen} />
        <Stack.Screen name="Member" component={MemberScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

4. Pada komponen layar login, atur logika dan lakukan pengalihan sesuai kebutuhan:

import React from 'react';
import { View, Text } from 'react-native';

function LoginScreen({ navigation }) {
  // Mengasumsikan Anda telah menerima data dari suatu sumber
  const data = { success: true };

  if (typeof data === 'object' && data.hasOwnProperty('success')) {
    if (data.success) {
      console.log('Login berhasil!');
      navigation.dispatch(StackActions.replace('Member'));
    } else {
      console.log('Login gagal: ' + data.message);
      // Tangani kegagalan login, tampilkan pesan kesalahan, dll.
    }
  }

  return (
    <View>
      <Text>Layar Login</Text>
    </View>
  );
}

export default LoginScreen;

Pada contoh di atas, baris navigation.dispatch(StackActions.replace('Member')) bertanggung jawab untuk mengalihkan ke layar “Member”. Ini menggantikan layar saat ini dalam stack dengan layar “Member”, sehingga secara efektif mengalihkan pengguna.

Pastikan untuk menggantikan komponen LoginScreen dan MemberScreen dengan komponen login dan member sesungguhnya di proyek Anda.

Selalu konfigurasikan stack navigasi dan komponen Anda sesuai dengan setup yang Anda gunakan.