react-native navigation params drawerNavigator

Question

I have a tabNavigator nested in a drawerNavigator parent. In the drawerNavigator is have a custom content screen which is a favourite list.

What I'm trying to achieve is when the drawer is triggered open the favourite list in reloaded.

I'm passing navigator params from the drawerNavigator to the tabNavigator but when I try to pass from tabNavigator to drawerNavigator it's undefined.

How can I pass a navigation param from LaunchScreen into the DrawerScreen?

export const PrimaryNav = TabNavigator({
  Home: {
    screen: LaunchScreen,
    navigationOptions: {
      swipeEnabled: false,
      tabBarIcon: ({ tintColor }) => (
        <Image
          style={[styles.icon]}
          source={require('../Images/img.png')}
        />
      ),
    },
  },
  Map: {
    screen: FirstScreen,
    navigationOptions: {
      tabBarIcon: ({ tintColor }) => (
        <Image
          source={require('../Images/img1.png')}
          style={[styles.icon]}
        />
      ),
    },
  },
},
{
  headerMode: 'none',  
  tabBarPosition: 'top',
  animationEnabled: true,
  tabBarOptions: {
    showIcon: true,
    showLabel: false,
    activeTintColor: '#ffffff',
    indicatorStyle: {
      borderBottomColor: '#33b2f4',
      borderBottomWidth: 3,
    },
    style: {
    backgroundColor: '#000',
    paddingTop:20,
    }
  },
});

const MyDrawerNavigator =  DrawerNavigator({
  Home: {
    screen: PrimaryNav
  },
}, {
  contentComponent: DrawerScreen
});

export default MyDrawerNavigator

Pete Nice Pete Nice · Accepted Answer · 2018-02-21T14:55:56

Ok so here's how I solved the issue:

I hooked up mobx and implemented a simple store:

import {observable, action} from 'mobx'

class Store {
  @observable refresh = 'false';

  @action changeRefresh(value) {
    this.refresh = value;
  }

}

export default new Store;

Then I tested for the draw state (open/close) in my root container:

class RootContainer extends Component {

  handleNavigationState = (previous, next, action) => {    
    if (action.routeName === 'DrawerOpen') {
        this.props.store.changeRefresh('true')  
    } else if (action.routeName === 'DrawerClose') {
        this.props.store.changeRefresh('false')    
    }
  }

  render () {
    return (
      <View style={styles.applicationView}>
        <StatusBar barStyle='light-content' />
        <AppNavigation onNavigationStateChange={this.handleNavigationState} />
      </View>
    )
  }
}

Then checked the store prop in my drawer screen and reloaded my favourite list:

render () {
  this.props.store.refresh==='true' ? (this.loadFavs()) : (null)
  ...

react-native navigation params drawerNavigator

1 Answers