I am trying to make one screen to act as modal inside regular StackNavigation object. Mean, I want all the screens act as cards (render from the side) but one screen to act as modal (render from the bottom) but it just dont work, all the screens render from the side.
CODE:
export const Modal = StackNavigator({
ReportPage: {
screen: ReportContainer
}
}, {
headerMode: 'none',
mode:'modal'
})
export const Main = StackNavigator({
Feed: {
screen: Feed
},
ModalScreen: {
screen: Modal
}
}, {
headerMode: 'none'
})
Use code below:
export const HomeNavigator = StackNavigator({
Feed: {
screen: Feed
},
OtherScreen: {
screen: OtherScreen
}
})
const Main = StackNavigator(
{
Home: { screen: HomeNavigator }
ModalScreen: { screen: ModalScreen }
},
{
mode: 'modal',
headerMode: 'none',
},
);
You need to create a Home StackNavigator containing all screens having Push Navigation and
then create a main StackNavigator which will contain Home Stack and the modal screen you want to display.
Related
In my react native app I am using TabNavigator inside a StackNavigator as so:
const AppTabs = createBottomTabNavigator(
{
Home: Tab1,
Create: Tab2,
Search: Tab3,
Ask: Tab4
}
);
const AppStack = createStackNavigator(
{
Tabs: AppTabs,
Screen2: SecondScreen,
Screen3: ThirdScreen,
},
{
initialRouteName: "Tabs"
}
);
This works fine but when I try to use another StackNavigator for the Search Tab, two headers are displayed and the only solution I have found is to hide the nested StackNavigator's header with headerMode: "none":
const SearchStack = createStackNavigator(
{
Search: SearchScreen,
Post: PostScreen,
},
{
headerMode: "none",
navigationOptions: {
headerShown: false
},
initialRouteName: "Search"
}
);
However, this functionality is not best for my app. I need the outside StackNavigator's header to be hidden instead when the Search tab is in focus so the user can still go back and forth between screens in the nested Search Stack. Can someone advise me what I should do to achieve this?
I think you are using react-navigation in the wrong way, you should not make separate stack navigator for SearchStack, instead you should add SearchStack's screens in AppStack only.
const AppTabs = createBottomTabNavigator(
{
Home: Tab1,
Create: Tab2,
Search: Tab3,
Ask: Tab4
}
);
const AppStack = createStackNavigator(
{
Tabs: AppTabs,
Post: PostScreen,
Screen2: SecondScreen,
Screen3: ThirdScreen,
},
{
initialRouteName: "Tabs"
}
);
Change your AppStack navigator to the following:
const AppStack = createStackNavigator(
{
Tabs: AppTabs,
Screen2: SecondScreen,
Screen3: ThirdScreen,
},
{
defaultNavigationOptions: ({navigation}) => {
const currentRoute = navigation.state.routes[navigation.state.index];
const {routeName} = currentRoute;
let tabBarVisible = true;
if (routeName === 'Search') {
tabBarVisible = false;
}
return {
headerShown: tabBarVisible,
};
},
initialRouteName: 'Tabs',
},
);
If the app is rendering the Search route, the headerShown property of your top most StackNavigator (AppStack) will be set to false. Meaning the app will not show the AppStack header when rendering the Search route.
The SearchStack navigator can be defined simply like this:
const SearchStack = createStackNavigator(
{
Search: SearchScreen,
Post: PostScreen,
},
{
initialRouteName: 'Search',
},
);
Simply use below code in the page you want to hide the header
export default class SearchScreen extends Component {
static navigationOptions = {
header: null
}
}
I currently have a navigation structure that looks like this:
Newsfeed (in RootBottomTabNavigator)
NewsfeedItem
CommentModal
Search (in RootBottomTabNavigator)
const NewsfeedStack = createStackNavigator(
{
Newsfeed: {
screen: NewsfeedScreen,
},
NewsfeedItem: {
screen: NewsfeedItemScreen,
},
}
);
const NewsfeedItemStack = createStackNavigator(
{
Main: {
screen: NewsfeedStack,
},
CommentModal: {
screen: CommentModal,
},
},
{
mode: 'modal',
headerMode: 'none',
}
);
const SearchStack = createStackNavigator(
{
Search: { screen: SearchScreen }
}
)
const Tabs = createBottomTabNavigator(
{
Newsfeed: { screen: NewsfeedStack },
Search: { screen: SearchStack },
},
);
Two issues I could not resolve with this set up are:
Hiding the BottomTabs on the NewsfeedItem and CommentModal screens.
Clicking on the tab to return to the initial screen no longer works because the navigation stack thinks that the NewsfeedItem is the initial screen.
Is there a setup to fix these issues?
My App.js looks like this which has StackNavigator
export default class App extends Component {
render() {
return (
<AppStackNavigator />
);
}
}
const AppStackNavigator = new StackNavigator({
LoginScreen: { screen: LoginScreen },
DashboardScreen: { screen: DashboardScreen },
ImportantNumberScreen: { screen: ImportantNumberScreen },
EventListScreen: { screen: EventListScreen },
});
I have to create bottom navigation so i am using react-navigation component createBottomTabNavigator where i want to set header as null
so i tried following code
static navigationOptions = {
header: null,//works with createStackNavigator but not with createBottomTabNavigator
}
Also tried
export default createBottomTabNavigator({
HomeScreen: {screen : HomeScreen,navigationOptions:{header:null}},
GuestCardScreen: GuestCardScreen,
MoreScreen: MoreScreen,
StatementScreen: StatementScreen,
});
but unfortunately these code not working with createBottomTabNavigator
I am using
"react-navigation": "^2.17.0"
Node version v10.11.0
npm version v6.4.1
TabBar
const MainAppTab = createBottomTabNavigator({
[HOME_STACK]: {
screen: Home,
},
[NOTIFACATION]: NotificationContainer,
[STINGER]: StingerContainer,
[MESSAGE]: MessageContainer,
[USER_PROFILE]: ProfileContainer
},
},
{
// settings
});
Main Navigator
const AppNavigator = createStackNavigator({
[WELCOME]: {
screen: WelcomeContainer,
},
// other screens
[MAIN]: {
screen: MainAppTab,
navigationOptions: {
header: null, <----- this will help you
},
},
}, {
initialRouteName: WELCOME,
},
});
you should set tab bar options like below:
const TabNav = createBottomTabNavigator({
HomeScreen: {screen : HomeScreen},
GuestCardScreen: GuestCardScreen,
MoreScreen: MoreScreen,
StatementScreen: StatementScreen,
});
// just for hide tabbar header
const StackNavForTabs = createStackNavigator({
tab: TabNav,
}, {
header: null,
headerMode: 'none'
});
//your main stack navigator
export default AppStack = createStackNavigator({
otherStackRoutes: OtherRoute,
tabStack: StackNavForTabs,
});
I used TabNavigator in the main.js file
const TabsNav = TabNavigator({
sccreen1: {
screen: screen1
},
screen2: {
screen: screen2
},
},
{
navigationOptions: ({ navigation }) => ({
tabBarVisible: false,
}),
});
I used the following code in the today.js file
class TodayMenu extends Component {
static navigationOptions = {
title: 'today',
headerBackTitle: null,
}
}
export default TodayMenu = StackNavigator(
{
First: {screen: TodayMenu},
Second: {screen: DetailsProduct}
}
)
I'm going to transition the screen today to screen1 or screen2, which code should i use?
if you want to have stackNavigator you should define a button or somthing like that and use
this.props.navigation.navigate('destination screen')
you can find more about it hear
I want to navigate to to the same screen but with different params.
so imagine
navigate to MyRouteName
on this screen click a button which should navigate me to MyRouteName but with different params.
currently I've tried
this.props.navigation.navigate('MyRouteName', {param1: 'new val'})
and
const setParamsAction = NavigationActions.setParams({
params: { param1: 'new val'},
key: 'mrn-new_val',
})
this.props.navigation.dispatch(setParamsAction)
Neither work. Neither the docs nor github issues I found provide clear guidance on this.
How do i accomplish this?
Update: in response to comment below
I'm using a stacked Navigator as my root, which leads to a DrawerNavigator
// MyDrawer.js
// ...
const MyDrawer = DrawerNavigator(
{
MyRouteName: {
screen: MyScreen,
},
},
{
initialRouteName: 'MyRouteName',
contentOptions: {
activeTintColor: '#e91e63',
},
contentComponent: props => <DrawerScreen {...props}/>,
}
);
export default MyDrawer;
// MyScreen.js
class MyScreen extends React.Component{
//..
//.. stuff goes here
//..
drillDown(newVal){
const setParamsAction = NavigationActions.setParams({
params: { param1: newVal },
key: 'ms-${newVal}',
})
this.props.navigation.dispatch(setParamsAction)
}
//..
//.. more stuff
//..
}
My final implementation based on #benneygenel's answer below.
const MyDrawer = DrawerNavigator({
MyRouteName: {
screen: StackNavigator({
DrillDown:{
screen: MyScreen,
},
}, {
headerMode: 'none',
}),
},
});
(MyScreen defines it's own header)
You can use a StackNavigator inside the Drawer and navigate like a normal StackNavigator.
const MyDrawer = DrawerNavigator({
MyRouteName: {
screen: StackNavigator({
DrillDown: {
screen: MyScreen
}
}),
},
});
export default MyDrawer;