I want to accomplish the most commont android structure: a drawer navigator with an header (stackNavigator).
The app is very simple: it is a dictionary and shows a list of item grouped by first letter (BrowseScreen) and also it allows a search by keyword (SearchScreen, someone call this Master–detail pattern).
Starting from those 2 screens, I have to be able to reach the ItemScreen (which shows the details of a single term).
How can I structure this in react-navigator 3? This is my attempt, but I'm not sure it's the best way, and also I don't know where to place ItemScreen. No drawer item should be active while I'm on an ItemScreen.
const RootDrawer = createDrawerNavigator(
{
Home: {
screen: createStackNavigator({
Home: { screen: Home },
//Browse: { screen: Browse },
//Search: { screen: Search }
}, {
initialRouteName: 'Home',
})
},
Browse: {
screen: createStackNavigator({
Browse: { screen: Browse }, //it shows a grid of buttons with the alphabet
Search: { screen: Search }, //it shows the items by a First letter
}, {
initialRouteName: 'Browse',
})
},
Search: {
screen: createStackNavigator({
Search: { screen: Search}
}, {
initialRouteName: 'Search',
})
},
Bookmarks: {
screen: createStackNavigator({
Bookmark: { screen: Bookmarks },
Item: { screen: ItemScreen },
}, {
initialRouteName: 'Bookmark',
})
}
},
{
mode: 'modal',
headerMode: 'screen' ,
initialRouteName: 'Home',
}
);
Related
I have a StackNavigation like this:
const AppNavigator = createStackNavigator({
Login: {
screen: Login,
navigationOptions: () => ({
title: 'Login',
headerTintColor: 'white',
headerStyle:{
backgroundColor: '#000',
elevation: 0,
showdowOpacity: 0
},
})
},
Home: {
screen: AppDrawerNavigator,
navigationOptions: () => ({
header: null
})
},
});
With a DrawerNavigator nested inside:
const AppDrawerNavigator = createDrawerNavigator({
Home: {
screen: Home,
navigationOptions: {
drawerLabel: 'Home',
gesturesEnabled: false,
}
},
Favorites: {
screen: Favorites,
navigationOptions: {
drawerLabel: 'Favorites',
}
}
},
{
drawerPosition: 'left',
contentComponent: props => <Drawer {...props} />
});
The initial route of the stack navigator is working fine
Login -> Home
But when I try navigating from Home to Favorites it navigates immediately back to Home after rendering the Favorites screen.
I am using react-navigation#2.11.2 and react-native#0.56.0
With Home being used in both stack and drawer navigator.
There are high chances of name conflicts occurring here.
Try this structure.
const Stack = {
FirstView: {
screen: FirstView
},
SecondView: {
screen: SecondView
},
ThirdView: {
screen: ThirdView
}
};
const DrawerRoutes = {
FirstViewStack: {
name: 'FirstViewStack',
screen: StackNavigator(Stack, { initialRouteName: 'FirstView' })
},
SecondViewStack: {
name: 'SecondViewStack',
screen: StackNavigator(Stack, { initialRouteName: 'SecondView' })
},
ThirdViewStack: {
name: 'ThirdViewStack',
screen: StackNavigator(Stack, { initialRouteName: 'ThirdView' })
},
};
const RootNavigator =
StackNavigator({
Drawer: {
name: 'Drawer',
screen: DrawerNavigator(
DrawerRoutes,
),
},
...Stack
},
{
headerMode: 'none'
}
);
I faced a similar issue when i tried to use a hamburger menu in my Home page (which uses stack navigator to goto other pages).
Check this Git Article also.
I use react-navigation version 3.x. How to make screen from tabBarNavigator invisible on TabBar?
I need to remove main screen from tabBar(it should be invisible) but TabBar must be on main screen.
My screen structure is next:
const AppStackNavigator = createStackNavigator({
loginFlow: {
screen: createStackNavigator({
intro: { screen: Intro },
login: { screen: Login },
registration: { screen: Registration }
})
},
mainFlow: {
screen: createStackNavigator({
// settings: { screen: SettingsScreen },
someTab: {
screen: createBottomTabNavigator({
main: { screen: Home },
Tab1: { screen: Tab1 },
Tab2: { screen: Tab2 },
Tab3: { screen: Tab3 },
Tab4: { screen: ChatMain }
})
}
})
}
});
Your question is worded weirdly, but I'll give you answers to both of my interpretations:
If you want so remove a screen from your tab bar, simply comment it out:
// main: { screen: Home },
If you want to have the main screen in the same stack as the rest of your tab bar, but not want it to show within the tab bar, you could nest it inside a switchNavigator:
mainFlow: {
screen: createStackNavigator({
// settings: { screen: SettingsScreen },
someSwitch: createSwitchNavigator({
main: { screen: Home },
someTab: {
screen: createBottomTabNavigator({
Tab1: { screen: Tab1 },
Tab2: { screen: Tab2 },
Tab3: { screen: Tab3 },
Tab4: { screen: ChatMain }
})
}
})
})
}
Actually I just used my own TabBar component. just need to use tabBarComponent properties.
I'm using react-navigation.
now I want to change first screen load from inside of StackNavigator.
export const LoginStack = StackNavigator({
Login: {
screen: Login,
},
Phone: {
screen: Phone,
},
Activation: {
screen: Activation,
}
},
{
headerMode: 'none',
initialRouteName: 'Phone',
});
export const HomeStack = StackNavigator({
Home: {
screen: ContainerNavs,
},
Notifications: {
screen: Notification,
},
Question: {
screen: Question,
},
SelectContacts: {
screen: SelectContacts,
},
Options: {
screen: Options,
},
},
{
headerMode: 'none'
});
export const RootNavigator = StackNavigator({
Login: {
screen: LoginStack,
},
Home:{
screen: HomeStack,
},
},{
mode: 'modal',
headerMode: 'none',
initialRouteName: 'Login',
}
);
but my router always load Login screen. but I want to load Phone screen.
Just Replace The Screen and set first screen you want to load first .. that's it... so i just set Phone screen at the top of the stacknavigator
export const LoginStack = StackNavigator({
Phone: {
screen: Phone,
},
Login: {
screen: Login,
},
Activation: {
screen: Activation,
}
},
{
headerMode: 'none',
initialRouteName: 'Phone',
});
Stack Navigator "Root"
--Stack Navigation A
-- SN Login
-- SN Signup
-- SN HOME
Initial Route is "LOGIN"
HOME contain tab navigation
--Tab Navigator
--- TAB Navigator A
----Screen "Setting"
--- TAB Navigator B
----Screen "1"
----Screen "Setting"
App.js
const AppNavigator = StackNavigator({
Login: {
screen: Login
},
SignUp: {
screen: SignUp
},
TermsConditions: {
screen: TermsConditions
},
Home: {
screen: Home
},
Setting: {
screen: Setting
}
}, {
initialRouteName: "Login",
headerMode: "none",
// mode: 'modal',
navigationOptions: {
gesturesEnabled: false
}
});
When user login, navigate to "Home" screen -- End open the Truck as initial route.
Home.js
const HomeNavigation = StackNavigator(
{
Home: {
screen: Trucks
},
TruckDetailController: {
screen: TruckDetailController
},
Setting: {
screen: Setting
},
{
initialRouteName: "Home",
headerMode: "none"
}
);
const FavouriteNavigation = StackNavigator(
{
Favourite: {
screen: Favourite
},
TruckDetailController: {
screen: TruckDetailController
},
Setting: {
screen: Setting
},
{
initialRouteName: "Favourite",
headerMode: "none"
}
);
const TabRoute = TabRouter(
{
Trucks: {
screen: HomeNavigation
},
Favourite: {
screen: FavouriteNavigation
},
Loyalty: {
screen: Loyalty
},
Offer: {
screen: Offer
}
},
{ initialRouteName: "Trucks" }
);
I Just want to logout from setting and switch to "Stack Navigation A -- Login" screen.
If anybody will give the solution for above so its appreciable and make a good point. :)
You have two options here. The first, is to use the Back action with a key (you'll have to save the key for the Feed screen when you're there).
The second is to use Reset as you have, but you misunderstood the role of the actions array - it is only intended for building a stack for a stack navigator.
To perform the inner stack-navigator navigation, you'll have to specify an action inside the navigation action:
const resetAction = NavigationActions.reset({
index: 1,
actions: [
NavigationActions.navigate({
routeName: '1',
params: {},
action: NavigationActions.navigate({
routeName: 'Feed'
})
})
]
});
const AppTabs = TabNavigator({
Home: {
screen: FilmList,
},
FilmCinemaList: {
screen: FilmCinemaList,
path: 'cart',
},
FilmGoodsList: {
screen: FilmGoodsList,
},
FilmMe: {
screen: FilmMe,
},
})
when I click FilmCinemaList, i wanna pass a params. how to use setParams?
You can pass the params this way when rendering your AppTabs:
<AppTabs screenProps={{ FilmCinemaList: { ...yourParams } }}/>
And you can access them on FilmCinemaList by:
this.props.screenProps.FilmCinemaList
.
Through navigationOptions, what you have to do is to set the navigationOptions for the screen before pass it in the TabNavigator like the following:
FilmCinemaList.navigationOptions = {
'param1':'value1';
};
const AppTabs = TabNavigator({
Home: {
screen: FilmList,
},
FilmCinemaList: {
screen: FilmCinemaList,
path: 'cart',
},
FilmGoodsList: {
screen: FilmGoodsList,
},
FilmMe: {
screen: FilmMe,
},
})
And then you can access it
FilmCinemaList.navigationOptions.param1
When ever you need to.