React-native Dispatch action with two tabs at once

advertisements

I want to re-render two tabs by setParams, it works if i dispatch to one tab, but dispatch to two tabs like code bellow doesn't work

const setParamsAction1 = NavigationActions.setParams({ params: { foo: 'bar' } }, key: 'a' });
const setParamsAction2 = NavigationActions.setParams({ params: { foo: 'bar' } }, key: 'b' });
this.props.navigation.dispatch(setParamsAction1);
this.props.navigation.dispatch(setParamsAction2);


You need to hook the onNavigationStateChange event to dispatch your second setParams action.

//a navigator for demo
const AppNav = TabNavigator({
    main: {screen: MainScreen},
    a: {screen: aScreen},
    b: {screen: bScreen}
});

//get the root reference
let appNavRef;

class App extends Component {

    render() {
        return (
            <AppNav ref={navigatorRef => {
                appNavRef = navigatorRef
            }}
                    onNavigationStateChange={
                        (prevState, currentState) => {
                            //print the state to get more detail
                            // console.log(prevState);
                            // console.log(currentState);
                            //compare the two state: before and after dispatch setParams for "a"
                            //change the if condition for your need
                            let preParams = prevState.routes[1].params;
                            let currentParams = currentState.routes[1].params;
                            if (preParams === undefined && currentParams.foo === 'bar') {
                                //dispatch setParams for "b"
                                const setParamsAction = NavigationActions.setParams({
                                    params: currentParams,
                                    key: 'b',
                                });
                                appNavRef.dispatch(setParamsAction)
                            }
                        }
                    }/>
        );
    }
}

export default App;