I'm putting together a react-native app and want tabs along the top. I am using createMaterialTopTabNavigator for the tabs and this works fine. However when I run the app on the newest iPhone simulator, the tabs bleed into the sensor bar. In trying to solve this, people suggest using the safeareaview but it doesn't seem to be any information on how to combine this with an outer tabs parent.
Any help that you guys could offer I would be greatly appreciated.
Thanks
import React from 'react';
import { createMaterialTopTabNavigator, SafeAreaView, MaterialTopTabBar } from 'react-navigation';
const SafeAreaMaterialTopTabBar = ({ ...props }) => (
<SafeAreaView>
<MaterialTopTabBar {...props} />
</SafeAreaView>
);
const options = {
tabBarComponent: props => (<SafeAreaMaterialTopTabBar {...props} />),
};
const RentalsTopTabNavigator = createMaterialTopTabNavigator({
[Routes.ROUTE_1]: {
screen: Screen1,
navigationOptions: {
title: 'Tab1',
},
},
[Routes.ROUTE_2]: {
screen: Screen2,
navigationOptions: {
title: 'Tab 2',
},
},
}, options);
Related
I have been working on this simple mobile application. I am trying to show some icon on the bottom tab navigation instead of labels, but the icons are not showing up. Can someone help me figure out what the problem is?
I have been working on this simple mobile application. I am trying to show some icon on the bottom tab navigation instead of labels, but the icons are not showing up. Can someone help me figure out what the problem is?
Here is my code:
import React from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import { createStackNavigator } from 'react-navigation-stack';
import { Icon } from 'react-native-elements';
// Components
import Home from './src/components/home/Home'
import EventInfo from './src/components/common/eventInfo/EventInfo'
import Profile from './src/components/profile/Profile'
import Browse from './src/components/browse/Browse'
import Activity from './src/components/activity/Activity'
import homeIcon from './src/images/home.png'
import browseIcon from './src/images/home.png'
import activityIcon from './src/images/home.png'
import profileIcon from './src/images/home.png'
import myIcon from './src/images/activity.png';
const HomeStackNavigator = createStackNavigator({
Home: {
screen: Home
},
EventInfo: {
screen: EventInfo
},
},{
initialRouteName: 'Home',
})
const BrowseStackNavigator = createStackNavigator({
Browse: {
screen: Browse
},
},{
initialRouteName: 'Browse',
})
const ActivityStackNavigator = createStackNavigator({
Activity: {
screen: Activity
},
},{
initialRouteName: 'Activity',
})
const ProfileStackNavigator = createStackNavigator({
Profile: {
screen: Profile
},
EventInfo: {
screen: EventInfo
},
},{
initialRouteName: 'Profile',
})
const AppNavigator = createBottomTabNavigator({
Home : HomeStackNavigator,
Browse: BrowseStackNavigator,
Activity: ActivityStackNavigator,
Profile : ProfileStackNavigator,
},{
initialRouteName:'Profile',
defaultNavigationOptions: ({ navigation }) => ({
tabBaricon: ({ focused, horizontal, tintColor }) => {
return (
<Image
source={myIcon}
style={{width:30, height:30}}
/>
);
},
}),
tabBarOptions: {
}
}
);
export default createAppContainer(AppNavigator);
This should fix your issue. You should also consider going through the docs here and here to understand better.
...
const AppNavigator = createBottomTabNavigator({
Profile: {
screen: Profile,
navigationOptions: {
tabBarIcon: ({ focused }) => (
<Icon
name='rowing' />
)
}
},
EventInfo: {
screen: EventInfo,
navigationOptions: {
tabBarIcon: ({ focused }) => (
<Icon
name='rowing' />
)
}
},
}, {
initialRouteName:'Profile',
});
...
Kindly let me know if this helped.
I'm learning react native and I did manage to get 2 tabbars up and running.
Now I'm trying to add a 3rd tabbar but every time I try to add a 3rd tabbar I only see 2 tabbars. I'm a little bit stuck and hope some one can help with some codeing.
import React from 'react';
import {
createMaterialTopTabNavigator,
} from 'react-navigation';
import FoldersList from '../screens/FoldersList';
const Routes = {
Home: {
screen: (props) => <FoldersList {...props} tabIndex={0}/>,
navigationOptions: {
title: 'Home'
}
},
MyNewTab: {
screen: (props) => <FoldersList {...props} tabIndex={1} createFolderTitle='Create new tab folder' />,
navigationOptions: {
title: 'My New Tab'
}
},
MyThirdTab: {
screen: (props) => <FoldersList {...props} tabIndex={2} createFolderTitle='Create new tab folder' />,
navigationOptions: {
title: 'My Third Tab'
}
}
}
const routeConfig = {
swipeEnabled: false
}
export default TabNavigator = createMaterialTopTabNavigator({
...Routes
}, routeConfig);
Your code has a syntax error and it's probably not compiling. Change the following:
export default TabNavigator = createMaterialTopTabNavigator({
to
export default createMaterialTopTabNavigator({
I'm trying to add icons to my bottomTabNavigator using Icons from react-native-elements.
import { createBottomTabNavigator } from "react-navigation"
import { ServicesNavigator } from "./services-navigator"
import { AccountScreen } from "../screens/account-screen/account-screen"
import { Icon } from "react-native-elements"
export const BottomTabNavigator = createBottomTabNavigator({
services: {
screen: ServicesNavigator,
navigationOptions: {
tabBarLabel:"Services",
tabBarIcon: ({ tintColor }) => (
<Icon name="ios-build" type="Ionicon" size={10} />
)
},
},
account: { screen: AccountScreen },
})
The code above shows the following error in ios: Unexpected token, expected "</>/<=/>=" around the line where <Icon> is.
I've tried looking online but I can't seem to fix my problem. Any help would be appreicated!
those settings should not be within the RouteConfigs. Studying https://reactnavigation.org/docs/en/tab-based-navigation.html#customizing-the-appearance you should do more like
export const BottomTabNavigator = createBottomTabNavigator({
services: ServicesNavigator,
account: AccountScreen,
},
{
defaultNavigationOptions: () => {
tabBarIcon: () => <Icon name="ios-build" type="Ionicon" size={10} />
},
},
})
I finally found the problem. All this time my file's extension was .ts, which does not support jsx, instead of .tsx. Changing the file extension to .tsx did it for me.
I always use react-native-router-flux for navigation, but on this project I need to use react-navigation and I got some troubles with it. I need to implement drawer and tabBar inside stack navigator.
Problems:
I use header component from native-base library but i can't open
drawer.
How to use my own customized component for drawer and tabBar?
Maybe I need to chage structure. I will consider any recommendations how to improve structure.
I used version 3 of react-navigation.
My code:
const AppStackNavigator = createStackNavigator({
loginFlow: {
screen: createStackNavigator({
intro: { screen: Intro },
login: { screen: Login },
registration: { screen: Registration },
}),
navigationOptions: {
header: null
}
},
mainFlow: {
screen: createStackNavigator({
MyDrawer: createDrawerNavigator({
Dashboard: {
screen: Home,
},
first: {
screen: first,
},
second: {
screen: second
},
third: {
screen: third
},
last: {
screen: last
}
}),
// settings: { screen: SettingsScreen },
someTab: {
screen: createBottomTabNavigator({
main: { screen: Home },
firsrTab: { screen: Screen1 },
secondTab: { screen: Screen2 },
thirdTab: { screen: Screen3 },
nextTab: { screen: Screen4 }
}),
navigationOptions: {
header: null
},
}
}),
navigationOptions: {
header: null
}
}
});
const AppContainer = createAppContainer(AppStackNavigator);
import React from 'react';
import { Header, Left, Icon, Right } from 'native-base';
const CustomHeader = (props) => {
return(
<Header>
<Left>
<Icon
name='menu'
onPress={() => {this.props.navigation.openDrawer()}}
/>
</Left>
</Header>
)
}
export { CustomHeader }
You might wanna consider the SwitchNavigator for the authentication flow instead of a Stack at the top as it replaces the routes so that you can never navigate back to the login/signup/splash once you get into the application and for accessing Tabs and Drawer inside stack/switch, you can wrap the Drawer inside your top level navigator and tab inside the drawer.
So you root navigation would look like this.
export default RootNavigation = createSwitchNavigator({
LoginScreen: {screen: LoginContainer},
Application: {screen: AppDrawer},
});
Your drawer navigator should be like the following:
const AppDrawer = createDrawerNavigator({
ApplicationTab: {screen: TabBar},
... other screen that you might want to use in drawer navigation.
}, {
contentComponent : (props) => <MyCustomDrawer {...props} />
});
and, Tab Navigator would be,
const TabBar = createBottomTabNavigator({
TabScreen1: {screen: Tab1},
... other tabs...
}, {
tabBarComponent : (props) => <MyTabBar {...props} />
});
If you put each of those navigators in single file then please do declare Tab before Drawer and Drawer before the Switch, else it would give errors.
In my experience, customising drawer navigator is very simple and fruitful but customising tab is not, there aren't proper API doc for the same and community answers are also somewhat misleading.
BUT, with normal use cases and for most of the vivid ones too, you can do your job without needing to override the default one as it is already highly operable and customisable in terms of icons, materialism and each tab exposes its on onPress that can also be easily overriden.
and as you as the drawer is not getting operated from/via the header, then can you please ensure that the navigation prop you are using to operate the drawer open close or toggle action is the one given by drawer ?
I'm using react-native 0.50.3 with the react-navigation package. I've some issues to go to previous scene using the back button of the phone. Is it related to the last version of RN ?
This is the used code :
App.js defining drawer and stacknavigator :
import React from "react";
import {TabView, TabBarBottom} from 'react-navigation';
import { Platform } from "react-native";
import { Root } from "native-base";
import { StackNavigator, TabNavigator, DrawerNavigator } from "react-navigation";
import SideBar from "./main_scenes/sidebar/";
import HomeServices from "./main_scenes/services/";
import Profile from "./main_scenes/profile/";
import Splashscreen from "./main_scenes/home/splash";
import Services from "./main_scenes/services/servicesdetails/";
const Drawer = DrawerNavigator(
{
Splashscreen:{screen:Splashscreen},
Services:{screen:Services},
},
{
initialRouteName: "Splashscreen",
contentOptions: {
activeTintColor: "#e91e63"
},
contentComponent: props => <SideBar {...props} />
}
);
const Feedstack = StackNavigator(
{
Drawer: { screen: Drawer },
HomeServices:{screen:HomeServices},
Profile:{screen:Profile},
},
{
initialRouteName: "Drawer",
headerMode: "none",
}
);
export default () =>
<Root>
<Feedstack />
</Root>;
And this how i navigate from a scene to other :
From my scene called "services" to "servicesdetails". First, i've a array for all my data within the route as a variable
const datas = [
{
img: img1,
text: "Some text,
note: "Its time to build a difference . .",
route: "Services",
},
{
img: img2,
text: "Some text",
note: "Its time to build a difference . .",
route : "Another_one_for_test"
},
]
Then in the render(), i use :
<Content>
<List
dataArray={datas}
renderRow={data =>
<ListItem button thumbnail onPress={() => this.props.navigation.navigate(data.route)}>
<Left>
<Thumbnail square size={80} source={data.img} />
</Left>
<Body>
<Text >{data.text}</Text>
<Text numberOfLines={1} note>{data.note}</Text>
</Body>
</ListItem>}
/>
</Content>
My navigation goes very well, but from the scene details to the services's scene, cannot be back neither from the previous button, nor from the back button of the phone.
the function <Button transparent onPress={() => this.props.navigation.goBack()}> send me directly to "splashscreen" defined as the initialroutename in the app.js. Same for the back button.
Is there something i've done wrong ?
Thanks
Go back to previous screen and close current screen. back action creator takes in one optional parameter:
key - string or null - optional - If set, navigation will go back from the given key. If null, navigation will go back anywhere. Refer here
You have to provide the key to goBack from current screen if its nested.
this.props.navigation.goBack(this.props.navigation.state.key)}
you should pass the navigation prop to the different Navigators: using navigation={this.props.navigation}, more details here: https://reactnavigation.org/docs/intro/nesting#Nesting-a-Navigator-in-a-Component
as a side note, I would suggest using Native Splashcreen for iOS & Android, not just a component, and then Invert the logic of your routing,
to add a splash screen, you could use rn-toolbox: https://github.com/bamlab/generator-rn-toolbox/tree/master/generators/assets
const Drawer = DrawerNavigator(
{
Splashscreen:{screen:Splashscreen},
Services:{screen:Services},
Feedstack:{screen:Feedstack}
},
{
initialRouteName: "Feedstack",
contentOptions: {
activeTintColor: "#e91e63"
},
contentComponent: props => <SideBar {...props} />
}
);
const Feedstack = StackNavigator(
{
HomeServices:{screen:HomeServices},
Profile:{screen:Profile},
},
{
initialRouteName: "HomeServices",
headerMode: "none",
}
);