CODEWITHSUNDEEP
react-nativenavigationreact-navigationtabnavigatorex-navigation
vannguyen
vannguyen

Reputation: 356

Handle click event in TabNavigator of react-navigation to refresh view in react native app

I am programming React Native app. I am using react-navigation for navigating screens. I have 2 StackNavigator, they are stayed in TabNavigator. And I also have a DrawerNavigator.

const HomeStack = StackNavigator({
  screenA: {screen: screenA},
  screenB: {screen: screenB},
});

const UserStack = StackNavigator({
  screenC: {screen: screenC},
  screenD: {screen: screenD},
});

const TabBar = TabNavigator({
  home1: {
    screen: HomeStack,
  },
  user1: {
    screen: UserStack,
  }
});

const DrawerMenu = DrawerNavigator({
  TabBar: {screen: TabBar},
},{
    drawerWidth: 300,
    drawerPostition: 'left',
    contentComponent: props => <MenuSide {...props}/>,
  }
)
var App = React.createClass({

  render: function() {
     return (
      <View>
        <DrawerMenu name='John'/>
      </View>
    );
  },
});

Question 1: I want when I click tab home1 or user1, screen of home1 (screenA) or screen of user1 (screenC) will refresh. Is there any way to handle event which tab is focused?

Question 2: In DrawerMenu of App class, I have a prop "name". I want screenA will receive props "name". How can I do for my goal?

Thank you so much.

Upvotes: 1

Views: 2165

Answers (1)

David Schumann
David Schumann

Reputation: 14793

according to the documentation here, you can use navigationOptions: {navigationOptions: () => doWhatever()} to handle tab bar taps.

In your case 

const TabBar = TabNavigator({
  home1: {
    screen: HomeStack,
  },
  user1: {
    screen: UserStack,
    navigationOptions: {navigationOptions: () => doWhatever()}
  }
});

Upvotes: 1

Related Questions