I am using React navigation v1, I have a bottom tab bar set up like this
const HomeTabs = TabNavigator(
{
Startside: {
screen: MessagesList,
navigationOptions: { tabBarTestIDProps: { accessibilityLabel: "Hjem" } },
},
NewMessage: {
screen: NewMessage,
navigationOptions: {
tabBarTestIDProps: { accessibilityLabel: "Skriv melding" },
},
},
ClassList: {
screen: ClassList,
navigationOptions: {
tabBarTestIDProps: { accessibilityLabel: "Klasseliste" },
},
},
Archive: {
screen: Archive,
navigationOptions: { tabBarTestIDProps: { accessibilityLabel: "Arkiv" } },
},
Settings: {
screen: Settings,
navigationOptions: {
tabBarTestIDProps: { accessibilityLabel: "Innstillinger" },
},
},
},
{
navigationOptions: ({ navigation }) => ({
headerStyle: {
elevation: 0,
shadowOpacity: 0,
},
}),
tabBarOptions: {
showLabel: false,
style: {
borderTopColor: "rgba(0, 0, 0, 0.1)",
},
},
tabBarComponent: TabBarBottom,
// tabBarComponent: (props) => <CustomTabsNavigator isAdmin={false} />,
tabBarPosition: "bottom",
animationEnabled: false,
swipeEnabled: false,
focused: true,
lazy: false,
initialRouteName: "Startside",
}
);
Then I am included in the stack navigator like this
const MainStack = StackNavigator(
{
ContactSelector: {
screen: ContactSelector,
}
},
{
focused: true,
lazy: true,
initialRouteName: "Login",
navigationOptions: {
headerStyle: {
elevation: 0,
shadowOpacity: 0,
},
},
cardStyle: {
shadowColor: "transparent",
},
}
);
What I want is to show a tab bar item only certain users. Is it possible? I have been searching and searching but can't find anything and it seems like impossible. Any pointers?
"react-native": "^0.59.10"
React Navigation 1.x
I strongly recommend you to upgrade react navigation version. I am not sure what you want is achievable but maybe you can try something like this:
//TabNavigator takes an object as parameter
//so basically you need to update that object based on some condition
//you want. For instance you display the Admin tab only if user is authenticated
const Tabs = {
Startside: {
screen: MessagesList,
navigationOptions: { tabBarTestIDProps: { accessibilityLabel: "Hjem" } },
},
NewMessage: {
screen: NewMessage,
navigationOptions: {
tabBarTestIDProps: { accessibilityLabel: "Skriv melding" },
},
},
ClassList: {
screen: ClassList,
navigationOptions: {
tabBarTestIDProps: { accessibilityLabel: "Klasseliste" },
},
},
Archive: {
screen: Archive,
navigationOptions: { tabBarTestIDProps: { accessibilityLabel: "Arkiv" } },
},
Settings: {
screen: Settings,
navigationOptions: {
tabBarTestIDProps: { accessibilityLabel: "Innstillinger" },
},
},
}
//if some condition is met add the Admin tab to the navigator
if(authenticated) {
tabs.Admin : {
screen: Admin
}
}
const HomeTabs = TabNavigator(tabs)
Related
On my react native app i was using "createStackNavigator" but when i combine "createMaterialTopTabNavigator" it gives Error. How can i use both navigation ? I tried aolot but did not able to resolve this issue. In my code i use createStackNavigator two times one for home and other for tabScreen both work fine when i use seperatly it work but cannot able to combine.
Main.js
const Home = createStackNavigator(
{
Profile: Profile,
Feed: Feed,
Chemein: Chemein,
Graph: Graph,
},
{
initialRouteName: 'Profile',
defaultNavigationOptions: {
headerStyle: {
backgroundColor: '#744DD2',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
},
},
},
);
const TabScreen = createMaterialTopTabNavigator(
{
Clubs: { screen: Clubs },
Members: { screen: Members },
},
{
tabBarPosition: 'top',
swipeEnabled: true,
tabBarOptions: {
activeTintColor: '#ffff',
inactiveTintColor: '#ccc',
style: {
backgroundColor: '#744DD2',
},
},
}
);
const TopTab = createStackNavigator({
TabScreen: {
screen: TabScreen,
navigationOptions: {
headerStyle: {
backgroundColor: '#744DD2',
},
headerTintColor: '#FFFFFF',
title: 'Clubs',
},
},
});
const container = createAppContainer(Home);
// const container = createAppContainer(TabScreen );
export default container;
Ive done somthing like this :
const TabNavigator = createBottomTabNavigator(
{
Home: AppStack,
Notification: Notifications,
Account: SettingsScreen,
},
{
defaultNavigationOptions: ({navigation}) => ({
tabBarIcon: ({focused, tintColor}) =>
getTabBarIcon(navigation, focused, tintColor),
}),
tabBarOptions: {
activeTintColor: colors.tealC,
inactiveTintColor: 'gray',
},
},
);
And my appstack is my stack navigator with the code below :
const AppStack = createStackNavigator(
{
HomeScreen: {
screen: Home,
},
AirportMeeting: {
screen: AirportMeeting,
},
MeetingPoint: {
screen: MeetingPoint,
},
DriverDetails: {
screen: DriverDetails,
},
SightSeeing: {
screen: SightSeeing,
},
HotelDetails: {
screen: HotelDetails,
},
FlightDetails: {
screen: FlightDetails,
},
AddSight: {
screen: AddSight,
},
SightSeeingPurchase: {
screen: SightSeeingPurchase,
},
AddMeals: {
screen: AddMeals,
},
HomeCard: {
screen: HomeCard,
},
Trips: {
screen: Trips,
},
FAQ: {
screen: FAQ,
},
Support: {
screen: Support,
},
BeforeTravel: {
screen: BeforeTravel,
},
Weather: {
screen: Weather,
},
},
{
defaultNavigationOptions: {
headerShown: false,
},
initialRouteName: 'HomeCard',
transitionConfig: () => fromRight(),
},
);
So basically in my home route of tabnavigator ive used Appstack which is a stack navigator.
Just in case you are curious, ive alos made a switchnavigator where ive added tab navigator and other stack navigtors too, so everythings possible:
const navigation = createAppContainer(
createSwitchNavigator(
{
App: TabNavigator,
Auth: AuthStack,
SplashScreen: SplashScreen,
},
{
initialRouteName: 'SplashScreen',
},
),
);
I'm trying to add bottom tab bar in my jhipster ignite application, which uses react-native-navigation v2.
Screens are registered like:
Navigation.registerComponentWithRedux(LAUNCH_SCREEN, () => LaunchScreen, Provider, store)
Where e.g.:
export const LAUNCH_SCREEN = 'nav.LaunchScreen'
And here is the complete navigation:
export const topBar = {
title: {
text: 'MDNGHT',
color: Colors.snow
},
leftButtons: [
{
id: 'menuButton',
icon: Images.menuIcon,
testID: 'menuButton',
color: Colors.snow
}
]
}
export const launchScreenComponent = {
component: {
id: 'id.launch',
name: LAUNCH_SCREEN,
options: {
topBar: topBar,
bottomTab: {
fontSize: 12,
text: 'HOME'
}
}
}}
export const eventsScreenComponent = {
component: {
id: 'id.events',
name: EVENTS_SCREEN,
options: {
topBar: topBar,
bottomTab: {
fontSize: 12,
text: 'EVENTS'
}
}
}
}
export const bottomTabs = {
id: 'bottomTabs',
children: [
{
stack: {
children: [
launchScreenComponent
]
}
},
{
stack: {
children: [
eventsScreenComponent
]
}
}
],
options: {
bottomTabs: {
activeTintColor: 'red',
inactiveTintColor: 'grey',
backgroundColor: '#121212',
borderTopWidth: 0,
shadowOffset: {width: 5, height: 3},
shadowColor: 'black',
shadowOpacity: 0.5,
elevation: 5
}
}
}
export const appStack = {
root: {
sideMenu: {
left: {
component: {
name: DRAWER_CONTENT
}
},
center: {
bottomTabs: bottomTabs
}
}
}
}
Navigation.events().registerAppLaunchedListener(() => {
Navigation.setDefaultOptions({
topBar: {
topBar: {
title: {
color: Colors.snow
}
},
backButton: {
showTitle: false,
testID: 'backButton',
icon: Images.chevronLeftIcon,
color: Colors.snow,
iconColor: Colors.snow
},
background: {
color: Colors.background
}
},
sideMenu: {
left: {
enabled: false
}
}
})
Navigation.setRoot(appStack)
// handle app state and deep links
AppState.addEventListener('change', handleAppStateChange)
Linking.addEventListener('url', handleOpenURL)
})
I don't get any error message, my application just stops after start.
When I put:
stack: {
id: 'center',
children: [launchScreenComponent]
}
Instead of bottomTabs: bottomTabs in appStack, the application works (but without bottom tab bar)
Following the Layout docs from react-native-navigation, you can replace the appStack with a bottomTabs implementation instead of a drawer like below (only one tab configured as example, add another object in root.bottomTabs.children to add another tab).
export const appStack = {
root: {
bottomTabs: {
children: [
{
stack: {
id: 'firstTabStack',
children: [
{
component: {
name: LAUNCH_SCREEN,
options: {
topBar: {
title: {
text: 'Welcome!',
color: Colors.snow
}
}
}
}
}
],
options: {
bottomTab: {
iconColor: 'gray',
textColor: 'gray',
selectedIconColor: 'black',
selectedTextColor: 'black',
text: 'Launch Screen',
testID: 'LAUNCH_SCREEN',
icon: Images.menuIcon
}
}
}
}
]
}
}
}
It actually turns out that it is required to set an icon for each bottom tab, otherwise the app crashes:
bottomTab: {
fontSize: 12,
text: 'HOME'
icon: require('../shared/images/logo.png')
}
This resolves the issue.
Want to scroll tab navigator header options left and right. Only want to scroll the options not the component. Is there any way?
const MyNav = TabNavigator({
News: { screen: NewsScreen },
Videos: { screen: VideosScreen },
Bands: { screen: BandsScreen },
Jokes: { screen: JokesScreen },
}, {
tabBarPosition: 'top',
animationEnabled: true,
tabBarOptions: {
activeTintColor: '#e91e63',
},
});
add this to taBarOptions
scrollEnabled: true
My code:
const tabscreen = (screen, path, label, src) => {
return {
screen, path,
navigationOptions: {
tabBarLabel: label,
tabBarIcon: ({
tintColor,
focused = true
}) => (<TabIcon src={src} active={focused}/>),
}
};
};
const MainTab = TabNavigator({
Home: tabscreen(HomeScreen, '/home', 'home', 'home'),
Chat: tabscreen(ChatScreen, '/chat', 'chat', 'chat'),
Find: tabscreen(FindScreen, '/find', 'find', 'find'),
Profile: tabscreen(ProfileScreen, '/profile', 'find', 'profile')
}, {
tabBarPosition: 'bottom',
swipeEnabled: false,
animationEnabled: false,
lazy: false,
//...other configs
tabBarOptions: {
// tint color is passed to text and icons (if enabled) on the tab bar
activeTintColor: '#1BBC9B',
inactiveTintColor: '#9B9B9B',
showIcon: true,
style: {
backgroundColor: '#F4F4F4',
borderTopWidth: 0,
height: 49
},
labelStyle: {
marginTop: 0,
marginLeft: 0,
marginRight: 0,
marginBottom: 1.5
}
}
});
const AppNavigator = StackNavigator({
Main: {
screen: MainTab ,
path: '/',
navigationOptions: {
header: null,
headerVisible: false,
gesturesEnabled: false,
}
},
}, {
initialRouteName: 'Main',
mode: 'card',
headerMode: 'screen',
navigationOptions: {
headerVisible: false,
gesturesEnabled: true,
headerStyle: styles.headerStyle,
headerTitleStyle: styles.headerTitleStyle,
headerTintColor: 'white',
headerBackTitle: null,
}
});
This demo uses redux to control state.
In the FindScreen, I use the List view to render a list. The problem is when I click the Find tab. The List view does not render. I have to first swipe the screen, then the List view show.
I used connect of redux-react to map the dispatch to FindScreen component. I request the data source of the List view in the componentDidMount lifecycle hook.
componentWillReceiveProps(nextProps) {
if( nextProps.doctorList !== this.props.doctorList){
debugger;
this.setState({
isRefreshing: false,
dataSource: this.state.dataSource.cloneWithRows(nextProps.doctorList),
})
}
}
As the code above, I set the debugger in the componentWillReceiveProps lifecycle hook. The breakpoint stops at the line of the debugger. Now, I know I request the data from the backend well.
Do you know the reason of the List view does not render?
What can I do to show the List view in the first render?
I know one way of solving this problem is change lazy: false, to lazy: true. Due to the lazy: false is written by my leader, so I had better not change it.
Add removeClippedSubviews={false} to your ListView.
You can refer to https://github.com/react-community/react-navigation/issues/1279 for the fix.
Please note that this is not an ideal fix because this is disabling a performance optimization.
You can read about the performance optimization here https://facebook.github.io/react-native/docs/listview.html#removeclippedsubviews
In React-Native with React-Navigation I have a Tabnavigator like so:
const testScreenNavigator = TabNavigator({
Tab1: { screen: Tab1Screen },
Tab2: { screen: Tab2Screen },
Tab3: { screen: Tab3Screen },
});
testScreenNavigator.navigationOptions = {
title: 'MY TITLE',
header: {
titleStyle:{
},
style:{
// how to set the options?
},
}
}
Now I want to do 2 things:
Set the backgroundColor: 'red' of the Tabs in Android (not iOS bottom tabs)
Have a badge next to Tab1: e.g.
Tab1 (2) | Tab2 | Tab3
Regards
Set the backgroundColor for Header and Tab
To set background color for Header use navigationOptions and to set background color for Tab use tabBarOptions. See below code
const testScreenNavigator = TabNavigator ({
Tab1: { screen: RecentChatsScreen },
Tab2: { screen: AllContactsScreen },
Tab3: { screen: AllContactsScreen}
}, {
tabBarOptions : {
style: {
backgroundColor: '#42a5f5',
}
}
});
testScreenNavigator.navigationOptions = {
title: 'MY TITLE',
header: {
style: {
backgroundColor: '#42a5f5',
}
},
};
below is output