Change StackNavigator order

[amorenew]

I am using the react-native-restart library for restarting the app so I can change the app language in the runtime. After I restart the app I want to change the first StackNavigator screen in the react-navigation library after restarting the app.

Navigator class is like this

import Screen1 from './Screen1'
import Screen2 from './Screen2'
import Screen3 from './Screen3'
import {StackNavigator} from 'react-navigation';

const Navigator = StackNavigator({
    Screen1: {
        screen: Screen1
    },
    Screen2: {
        screen: Screen2
    },
    Screen3: {
        screen: Screen3
    }
});
export default Navigator;

in screen 2 I change the language and restart the app by the following function:

_onDirectionChange = () => {
      I18nManager.forceRTL(true);
      // Immediately reload the React Native Bundle
      RNRestart.Restart();  }

my question on stackoverflow

[linkinmedo]

if you are using redux you can save a toggle there and use it to set initial route, some thing like:

const Navigator = StackNavigator({
    Screen1: {
        screen: Screen1
    },
    Screen2: {
        screen: Screen2
    },
    Screen3: {
        screen: Screen3
    }
},{
  initialRouteName: RTL ? 'Screen2' : 'Screen1',
});

[amorenew]

Full Solution

import React, {Component} from 'react';
import {connect} from 'react-redux';
import * as GeneralPref from './../preferences/GeneralPref'
import Log from './../utils/Log'
import {AsyncStorage, View} from 'react-native';
import * as Pref from './../preferences/Preferences';
import {NavigationActions} from 'react-navigation'

const TAG = 'InitialScreen'

class InitialScreen extends Component {
    static navigationOptions = {
        header: false
      };
    componentWillMount() {
        Log(TAG+' Mount')
        const {navigate} = this.props.navigation;
        GeneralPref
            .getInitialScreen()
            .then(value => {
                Log(TAG+' Initial',value)                
                if (value != null) {
                    Log(TAG+' Initial',value)                                    
                    return value
                } else {
                    Log(TAG+' No Initial','Splash')                                    
                    return 'Splash'
                }
            })
            .then(screenName => this.props.navigation.dispatch(NavigationActions.reset({
                index: 0,
                actions: [NavigationActions.navigate({routeName: screenName})]
            })))
            .catch(err => {
                Log(TAG+' Initial Error',value)                                
                this.props.navigation.dispatch(NavigationActions.reset({
                    index: 0,
                    actions: [NavigationActions.navigate({routeName: 'Splash'})]
                }))
            });
    }
    render() {
        return null;
    }
}

export default InitialScreen;

in Language Screen

changeLanguageTo(language) {
    Log(TAG+'Change Language', "Change Language To: " + language.code);
    // Log(TAG, 'Current State');
    Log(TAG+' Language State', language);
    GeneralPref.setInitialScreen('Login');
    
    this
      .props
      .actions
      .changeLanguage(language);
      I18nManager.forceRTL(true);      
    // Immediately reload the React Native Bundle
    RNRestart.Restart();
  };

in Navigator

const Navigator = StackNavigator({
    InitialScreen: {
        screen: InitialScreen
    },
    Splash: {
        screen: Splash
    },
    LanguageStartup: {
        screen: LanguageStartup
    },
    Login: {
        screen: Login
    },
    Register: {
        screen: Register
    }
}, {initialRouteName: 'InitialScreen'});

export default Navigator;

[6axter82]

@amorenew, can you give a gist or a link to your full full solution, I'd like to see how you realised GeneralPref and getInitialScreen()

[amorenew]

@6axter82 GeneralPref is just async storage to save user is signed in.

import {AsyncStorage} from 'react-native';
import * as Pref from './Preferences';
import Log from './../utils/Log'
const TAG = 'General Pref';

export function setInitialScreen(screenName) {
    AsyncStorage.setItem(Pref.Initial_Screen_KEY, screenName);
    Log(TAG + ' set InitialScreen', screenName);
}
export async function getInitialScreen() {
    Log(TAG + ' get InitialScreen');
    try {
        const screenName = await AsyncStorage.getItem(Pref.Initial_Screen_KEY);
        if (screenName !== null) {
            Log(TAG + ' get InitialScreen', screenName);
            return screenName;
        }
        return 'Splash';
    } catch (error) {
        Log(TAG + ' get InitialScreen', 'Error' + error);
    }
}

export function setFirstEntry() {
    AsyncStorage.setItem(Pref.First_Entry_KEY, true);
    Log(TAG + ' set FirstEntry', true);
}

export async function isFirstEntry() {
    Log(TAG + ' get FirstEntry');
    try {
        const isFirstEntry = await AsyncStorage.getItem(Pref.First_Entry_KEY);
        if (isFirstEntry !== null) {
            Log(TAG + ' get FirstEntry', isFirstEntry);
            return isFirstEntry;
        }
        return false;
    } catch (error) {
        Log(TAG + ' get FirstEntry', 'Error' + error);
        return false;
    }
}

[6axter82]

Hey, and what about Preferences.js? How does that look? You just have a set of keys stored and fill them as key-value pairs? Can you show it as well? Thanks a lot!

[amorenew]

@6axter82
yes in preferences js just these keys

export const GUEST_MODE = "GUEST_MODE";
export const USER_SIGNED_IN = "USER_SIGNED_IN";
export const LANGUAGE_KEY = "LANGUAGE_KEY";
export const LANGUAGE_ID = "LANGUAGE_ID";
export const LANGUAGE_CODE = "LANGUAGE_CODE";
export const EnglishIsoCode = "EN";
export const ArabicIsoCode = "AR";
export const EnglishId = 1;
export const ArabicId = 2;
export const USER_KEY = "USER_KEY";
export const Guest_API_KEY = "Guest_API_KEY";
export const Initial_Screen_KEY = "Initial_Screen_KEY";
export const First_Entry_KEY = "First_Entry_KEY";
export const Language_KEY = "Language_KEY";

[dwivediamit]

Hi can you help me here...

/* @flow */

import React from "react";

import { Platform } from "react-native";
import { Root, StyleProvider } from "native-base";
import { StackNavigator } from "react-navigation";

import Artboard from "./src/artboard/Artboard";
import Login from "./src/artboard/Login";
import Signup from "./src/artboard/Signup";
import LocationMap from "./src/artboard/LocationMap";
import AvailablePlans from "./src/artboard/AvailablePlans";
import Checkout from "./src/artboard/Checkout";
import AddCard from "./src/artboard/AddCard";
import ActivityDetail from "./src/artboard/ActivityDetail";
import CalendarScreen from "./src/artboard/CalendarScreen";
import Confirmation from "./src/artboard/Confirmation";
import ForgotPassword from "./src/artboard/ForgotPassword";
import SuccessfullBooking from "./src/artboard/SuccessfullBooking";
import MainScreenNavigator from "./src/artboard/Index";

import getTheme from '../native-base-theme/components';
import material from "../native-base-theme/variables/material";
import platform from "../native-base-theme/variables/platform";

import Icon from 'react-native-fa-icons';

import commonColor from '../native-base-theme/variables/commonColor';

const AppNavigator = StackNavigator(
{

Artboard: { screen: Artboard
 //    navigationOptions: {
 //      headerLeft: null
 // },
},
Login: { screen: Login },
Signup: { screen: Signup },
MainScreenNavigator: { screen: MainScreenNavigator },
ForgotPassword: { screen: ForgotPassword },
LocationMap: { screen: LocationMap },
AvailablePlans: { screen: AvailablePlans },
Checkout: { screen: Checkout },
AddCard: { screen: AddCard },
ActivityDetail: { screen: ActivityDetail },
CalendarScreen: { screen: CalendarScreen },
Confirmation: { screen: Confirmation },
SuccessfullBooking: { screen: SuccessfullBooking },

},

{
initialRouteName: "Artboard",
headerMode: "none",
}
);

export default () =>

; how to change initialRouteName if logged in right now my initialRouteName Artboard if logged in then i want in place of Artboard it will go to home screen... please help

[Biplovkumar]

1. create a Swich navigator,then inside put 4 const stack navigator.

Artboard: { screen: Artboard} //for Auth check,user is logged in or not.
Login: { screen: Login }, //For login in
Signup: { screen: Signup },
AppNavigator ;{screen: Appnavigator }

2.your App navigator which initial screen is Home.

const AppNavigator = StackNavigator(
{
Home: { screen: Home},
MainScreenNavigator: { screen: MainScreenNavigator },
ForgotPassword: { screen: ForgotPassword },
LocationMap: { screen: LocationMap },
AvailablePlans: { screen: AvailablePlans },
Checkout: { screen: Checkout },
AddCard: { screen: AddCard },
ActivityDetail: { screen: ActivityDetail },
CalendarScreen: { screen: CalendarScreen },
Confirmation: { screen: Confirmation },
SuccessfullBooking: { screen: SuccessfullBooking },
},

{
initialRouteName: "Home",
headerMode: "none",
}
);

Now we have done ,thanks.

[zuhairnaqi]

If you are worried about stack state change and it runs from start after reloading you can check this answer Check my answer