Comments (3)
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"
/>
from react-navigation.
@rodrigopivi with tab not working
from react-navigation.
This library does not depend on Redux, we have an example showing how to use it with Redux though: https://github.com/react-community/react-navigation/tree/master/examples/ReduxExample
Would love to see an example with Mobx, feel free to send a PR with that!
from react-navigation.
Related Issues (20)
- Adjust the margin of the bottom menu bar HOT 3
- DRAWER ENCERRA O APLICATIVO HOT 10
- Sometimes duplicate tab bar labels appear in bottom tabs HOT 1
- unmountOnBlur shows white screen randomly when switchint tabs HOT 2
- useHeaderHeight changes several times when orientation changes HOT 3
- Navigate into page, increase RAM, navigate back and RAM stays high HOT 1
- When using frosted glass stack to jump in Android mode, ReactNavigation will experience lag and frosted glass will reset HOT 5
- Weird transition in navigation HOT 2
- Invariant Violation: requireNativeComponent: "RNSModalScreen" was not found in the UIManager. HOT 17
- [Bridgeless] [RN 0.74] Event cannot be both direct and bubbling: topFocus HOT 4
- Strange flicker when you scroll up a modal with NativeStack in iOS
- Ripple effect shown twice after clicking one time on material top tab after new architecture enabled. HOT 5
- onStateChange called after screen's mount (useEffect) HOT 6
- MaterialTopTabNavigator Icon Layout Shifting HOT 4
- To prevent the default behavior using e.preventDefault() on `tabPress` event is no longer working HOT 4
- RemoveEventListener error in react-native-navigation@4 HOT 7
- Keyboard is dismissed immediately when focusing on TextInput field on non-outer tabs for `react-native-tab-view` HOT 1
- RemoveEventListener error in react-native-navigation@4 HOT 8
- Bottom Tabs flash when opening keyboard HOT 2
- Bottom Tab Navigator falls out of viewable area HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-navigation.