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',
};
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;
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
Related
Imagine I have three states in my application:
Home
Settings
Messages
I want to show first two link to these states in the bottom of screen, I can achieve that with this code:
const routeConfig = {
Profile: {
screen: Profile
},
Setting: {
screen: Setting
}
};
and I export it as my root component with this:
const TabBottomNavigator = createBottomTabNavigator(routeConfig);
Now I want to show the third link, Messages in a drawer navigation, I see people do the with the following code:
const drawerRouteConfigs = {
Home: {
screen: TabNavigator,
},
Messages: {
screen: Messages,
}
};
const drawerNavigator = createDrawerNavigator(drawerRouteConfig);
and the drawer navigator by this code:
const stackRouteConfigs = {
DrawerNavigator: {
screen: DrawerNavigator
}
};
const stackNavigatorCofig = {
initialRouteName: 'DrawerNavigator',
headerMode: 'none'
};
const StackNavigator = createStackNavigator(stackRouteConfigs, stackNavigatorCofig);
My question is that should I always include tab navigation and drawer navigation as a screen in the main stack navigator?
and the same question for drawer navigator, Should I include my tab navigator in my drawer navigator?
my refrence link is this:
https://github.com/quangvietntd/AppBanHangReactNative/blob/master/App.js
No, you need to include only tab navigation as a screen into the main Stack Navigator and into DrawerNavigator, include StackNavigator as a screen.
const AppWithSlideMenu = DrawerNavigator(
{
App: { screen: MainStackNavigator }
},
{
contentComponent: Scenes.SlideMenuScene,
drawerWidth: Dimensions.get('window').width * 0.88
}
);
const MainStackNavigator = StackNavigator(
{
TabBar: { screen: TabBar },
}
);
I have a bottomTabNavigator which looks like this.
const tabNavigator = createBottomTabNavigator({
[SCREEN1]: {
screen: StackNavigator1
},
[SCREEN2]: {
screen: StackNavigator2
},
[SCREEN3]: {
screen: SplashScreen
},
},
Now, how I do I go about creating a DrawerNavigator on each of the screens ? Creating on a normal screen is fairly straightforward. How to create it within a stackNavigator ?
its pretty straight forward. You set the DrawerNavigator as the screen component.
For example:
const dn1 = createDrawerNavigator({
[Screen1]: {
screen: Screen01
}
});
const dn2= createDrawerNavigator({
[Screen1]: {
screen: Screen02
}
});
const dn3 = createDrawerNavigator({
[Screen1]: {
screen: Screen03
}
});
const tabNavigator = createBottomTabNavigator({
[SCREEN1]: {
screen: dn1
},
[SCREEN2]: {
screen: dn2
},
[SCREEN3]: {
screen: dn3
},
}
This way you would have a separate DrawerNavigator for each tab.
I trying to implement 2 type of Navigation in my apps, Tab Navigation and Stack Navigation.
My Desire Output:
But so far with my code, I only able to implement one of them.
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 } },
});
export default rootNav;
What change should I make to my code to implement these 2 Navigation in my Apps?
Thank you.
You need a root StackNavigator, which has one route to your TabNavigator and one to your other StackNavigator. Then you can navigate from the TabNavigator to your other StackNavigator.
const rootNav = StackNavigator({
app: {screen: App},
go: {screen: Go},
});
const rootNav = StackNavigator({
app: {screen: App},
go: {screen: Go},
});
Method above can achieve the desire result however it may cause some issue, such as when perform Navigation to Screen, there will pop out 2 Header on Top of the Screen.
Improvement for Code above:
const rootNav = StackNavigator({
app: {screen: App},
First: { screen: ProfileScreen },
Second: { screen: SecondActivity },
});
I am using react-navigation in my react-native project and i want tab navigator in mid of my screen default it gives top or bottom position.
const Routes = {
RECENT: { screen : Upcomings},
UPNEXT : { screen : Upcomings},
UPCOMING :{ screen : Upcomings},
};
const TabConfig = {
stateName: 'MainNavigation',
tabBarOptions: {
activeTintColor: '#e91e63',
labelStyle: {
fontSize: 12,
},style: {
backgroundColor: '#ffffff',
borderTopWidth: 1,
borderTopColor: 'gray',
}
},
};
// register all screens of the app (including internal ones)
export const screenRoute = (SignIn) => {
return StackNavigator({
LOG_IN:{screen:Login},
SIGN_UP:{screen:SignUp},
CHARITY:{screen:Charity},
FETCH_FRIEND:{screen:FetchFriend},
DASHBOARD:{screen: Dashboard},
PAYPAL:{screen: Paypal},
FPASSWORD:{screen: ForgetPassword},
ADDFRIEND:{screen: AddFriend},
UPCOMINGS : {screen :TabNavigator(Routes, TabConfig)},
},{
headerMode: 'none',
mode:'modal',
initialRouteName: SignIn ? 'UPCOMINGS':'LOG_IN'
});
};
Could this been done by any way Thanks in advance.
I have a stack navigator set up in the following way
const wishlizt = StackNavigator({
Splash: {screen: SplashScreen},
SignIn: {screen: SignInScreen},
SignUp: {screen: SignUpScreen},
Profile: {screen: ProfileScreen},
Home: {screen: MainScreenNavigator},
Chat: {screen: ChatScreen}
},
{
navigationOptions: {
title: 'Wishlizt',
header: {
style: {
backgroundColor: Colors.bgBrand,
elevation: null,
},
titleStyle: {
color: Colors.lightest
},
right: <HeaderRight />
}
},
initialRouteName: 'Splash'
});
As you can see I use a component HeaderRight in my header which contains some icons - settings cog, profile, etc. I want to be able to navigate from those icons' TouchableOpacity onPress method. But the navigation prop 'this.props.navigation' is missing in that component.
The official documentation page has this code sample on how to call navigate on the top level component and recommends using 'ref'
const AppNavigator = StackNavigator(SomeAppRouteConfigs);
class App extends React.Component {
someEvent() {
// call navigate for AppNavigator here:
this.navigator && this.navigator.dispatch({ type: 'Navigate', routeName, params });
}
render() {
return (
<AppNavigator ref={nav => { this.navigator = nav; }} />
);
}
}
I am unable to see how this can work in my example. Can anyone help on this? Thanks
Huge
The header property can be a function as well as an object. When it is a function, the navigation object is passed in as the first parameter, it can then be passed to the HeaderRight component as a prop.
navigationOptions: {
header: (navigation) => {
return {
style: {
backgroundColor: Colors.bgBrand,
elevation: null,
},
titleStyle: {
color: Colors.lightest
},
right: (<HeaderRight
navigation={navigation}
/>),
};
},
},
I don't know if this helps, I am researching why my call isn't working either in react-navigation. But your braces are messed up in your example. You have initial route name inside of the navigation options, which might be right, but your indenting shows a whole other story...
If you want to "call navigate on the top level" or if you don't have the navigation prop available you can do so as described here: https://reactnavigation.org/docs/navigating-without-navigation-prop/
Use ref in the NavigationContainer:
// App.js
import { NavigationContainer } from '#react-navigation/native';
import { navigationRef } from './RootNavigation';
export default function App() {
return (
<NavigationContainer ref={navigationRef}>{/* ... */}</NavigationContainer>
);
}
Create RootNavigation.js where you define your dispatches:
// RootNavigation.js
import { createNavigationContainerRef } from '#react-navigation/native';
export const navigationRef = createNavigationContainerRef()
export function navigate(name, params) {
if (navigationRef.isReady()) {
navigationRef.navigate(name, params);
}
}
// add other navigation functions that you need and export them
You can then use your RootNavigation to navigate to the desired screen from anywhere:
// any js module
import * as RootNavigation from './path/to/RootNavigation.js';
// ...
RootNavigation.navigate('ChatScreen', { userName: 'Lucy' });