1 possible answer(s) on “Does this package depend on Redux? Can we use it with Mobx?

  1. Managing the nav state from mobx is actually pretty simple too, here is a quick example i’m using.
    You need a mobx store that stores the nav state as an observable and a dispatcher action:

    import { autobind } from "core-decorators";
    import { action, observable } from "mobx";
    import { MainStackScreen } from "../components/screens/MainScreen";
    
    export class GlobalStore {
        @observable.ref public navigationState = {
            index: 0,
            routes: [
                { key: "ChatListScreen", routeName: "ChatList" },
            ],
        };
    
        // NOTE: the second param, is to avoid stacking and reset the nav state
        @autobind
        @action
        public dispatchNavigation(action: any, stackNavState: boolean = true) {
            const previousNavState = stackNavState ? this.navigationState : null;
            return this.navigationState = MainStackScreen
                .router
                .getStateForAction(action, previousNavState);
        }
    }
    
    export default new GlobalStore();
    

    Then you pass that dispatcher and state to the stack navigation like in the redux example:

    <MainStackScreen navigation={addNavigationHelpers({
        dispatch: this.props.globalStore.dispatchNavigation,
        state: this.props.globalStore.navigationState,
    })} />
    

    And to trigger a navigation change:

    <Button
        onPress={() => {
            stores.globalStore.dispatchNavigation(
                NavigationActions.navigate({ routeName: "ChatList" }),
                false,
            );
        }}
       title="Get me to another page"
    />