CODEWITHSUNDEEP
androidreact-nativereact-navigation
I am a Student
I am a Student

Reputation: 1590

React Native - Two Apps Bar Being Display in One Screen

My issue is I tried to implement 2 type of Nagivation Type in my Apps, TabNavigation and StackNavigation, so I using a root StackNavigator, which has one route to myTabNavigator and one to my other StackNavigator(Code Snippet of App.js). However, when I navigate to View Screen which is SecondActivity.js there will be two header pop out. I try to use header:null on SecondActivity.js but it will cause both header gone.

Is there any way to remove only 1 of the header from the SecondActivity.js Screen?

App.js (using RootNavigator to combine Tab and Stack Navigation in this Apps)

const App = TabNavigator({
 HomeScreen: { screen: HomeScreen },
 ProfileScreen: { screen: ProfileScreen },
}, {
     tabBarOptions: {
       activeTintColor: '#7567B1',
       labelStyle: {
       fontSize: 16,
       fontWeight: '600'
       }
     }
   });

const Go = StackNavigator({
 First: { screen: ProfileScreen },
 Second: { screen: SecondActivity }
});

const rootNav = StackNavigator({
 app: {screen: App},
 go: {screen: Go},
});

export default rootNav;

ProfileScreen.js

 static navigationOptions = {
   tabBarLabel: 'View/Edit', 
   header: null
 }

 // This Line Used to Navigate to SecondActivity.js Screen
 OpenSecondActivity(id) {
    this.props.navigation.navigate('Second', { ListViewClickItemHolder: id });
 }

 // The ListView onPress will call the function above.
 <ListView
           automaticallyAdjustContentInsets={false}

              dataSource={this.state.dataSource}

              renderSeparator= {this.ListViewItemSeparator}

              renderRow={(rowData) => <Text style={styles.rowViewContainer}
              onPress={this.OpenSecondActivity.bind(this, rowData.RecipeID)}> {rowData.RecipeName} </Text>}

            />

SecondActivity.js

static navigationOptions = {
  title: 'View Details',
};

Upvotes: 2

Views: 1420

Answers (2)

Rajat Gupta
Rajat Gupta

Reputation: 1954

  • Each StackNavigator has its own header.

  • this is happening you are using nested stackNavigator, so one header is because of Go (stackNavigator), and another one is because of rootNav (stackNavigator).

  • The Go StackNavigation is unnecessary instead change the rootNav into this:

const App = TabNavigator({
 HomeScreen: { screen: HomeScreen },
 ProfileScreen: { screen: ProfileScreen },
}, {
     tabBarOptions: {
       activeTintColor: '#7567B1',
       labelStyle: {
       fontSize: 16,
       fontWeight: '600'
       }
     }
   });


const rootNav = StackNavigator({
 app: {screen: App},
  First: { screen: ProfileScreen },
 Second: { screen: SecondActivity }

});

export default rootNav;

Upvotes: 1

Bruno Mazzardo
Bruno Mazzardo

Reputation: 1586

This is happening because of the fact that the tab navigator is being rendered within the stack navigator.

Create a util file, and put this method on it. It resets the stack and put tab navigator on top

const resetActivities = (navigation, rootPath,props) => {

const stackAction = NavigationActions.reset({
    index: 0,
    key: null,
    actions: [NavigationActions.navigate({ routeName: rootPath,params:props })],
});
navigation.dispatch(stackAction);
}

and pass the 'App', and the navigation object

Upvotes: 0

Related Questions