TopTabNavigator add custom icon - react-native

I'm following an tutorial and I got a little stuck.
I'm trying to add an custom icon in a react native tab navigator but I had not been lucky and hope some fellow member can guide me in the right direction.
import React from 'react';
import { createMaterialTopTabNavigator, Image} 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: 'MyNewTab'
}
},
MyThirdTab: {
screen: (props) => <FoldersList {...props} tabIndex={2} createFolderTitle='Create third tab folder'/>,
navigationOptions: {
tabBarIcon: ({ tintColor }) => {
return (<Image
style={{ width: 50, height: 50 }}
source={{ require: "../../images/AddFolder.png" }}/>);}
}
},
};
const routeConfig = {
swipeEnabled: false,
tabBarOptions: {
style: {
backgroundColor: '#013a65',
},
renderIndicator: () => null, // Indicatorline under tabbar
activeTintColor:'red',
inactiveTintColor:'#ffffff',
},
},
};
export default TabNavigator = createMaterialTopTabNavigator({
...Routes
}, routeConfig);

Hello here is a simple code:
UPDATE
class MyHomeScreen extends React.Component {
static navigationOptions = {
tabBarLabel: 'Home',
// Note: By default the icon is only shown on iOS. Search the showIcon
option below.
tabBarIcon: ({ tintColor }) => (
<Image
source={require('./chats-icon.png')}
style={[styles.icon, {tintColor: tintColor}]}
/>
),
};
render() {
return (
<Button
onPress={() => this.props.navigation.navigate('Notifications')}
title="Go to notifications"
/>
);
}
}
class MyNotificationsScreen extends React.Component {
static navigationOptions = {
tabBarLabel: 'Notifications',
tabBarIcon: ({ tintColor }) => (
<Image
source={require('./notif-icon.png')}
style={[styles.icon, {tintColor: tintColor}]}
/>
),
};
render() {
return (
<Button
onPress={() => this.props.navigation.goBack()}
title="Go back home"
/>
);
}
}
const styles = StyleSheet.create({
icon: {
width: 26,
height: 26,
},
});
const MyApp = TabNavigator({
Home: {
screen: MyHomeScreen,
},
Notifications: {
screen: MyNotificationsScreen,
},
}, {
tabBarPosition: 'top',
animationEnabled: true,
tabBarOptions: {
activeTintColor: '#e91e63',
},
});
According to the docs, the showIcon property is setted to false on Android ( https://web.archive.org/web/20171015002750/https://reactnavigation.org/docs/navigators/tab#tabBarOptions-for-TabBarTop-default-tab-bar-on-Android ).
IF THE ABOVE CODE DO NOT WORKS FOLLOW THE BELLOW STEPS:
const MyApp = TabNavigator({
Displayed: {
screen: MyHomeScreen,
navigationOptions: {
title: 'Favorites',
tabBar: {
icon: ({tintColor}) => (<Image
source={require('./chats-icon.png')}
style={{width: 26, height: 26, tintColor: tintColor}}
/>)
},
},
},
...
or
class MyHomeScreen extends React.Component {
static navigationOptions = {
title: 'Foo Bar',
tabBar: {
icon: ({ tintColor }) => (
<Image
source={require('./chats-icon.png')}
style={{width: 26, height: 26, tintColor: tintColor}}
/>
),
}
};
...
I really hope that some code help you...

if you until do not work if the codes bellow, please see this other code:
UPDATE
//Package json
//change "react-navigation-material-bottom-tabs": "0.1.2"
import React, {Component} from 'react';
import {View,
Text,
StyleSheet,
//use SafeAreaView to move the images away from the top of the phone
SafeAreaView,
Image} from 'react-native';
import {createMaterialBottomTabNavigator} from 'react-navigation-material-bottom-tabs';
import {createMaterialTopTabNavigator} from 'react-navigation'
//imports the icons
import Icon from 'react-native-vector-icons/Ionicons'
export default class App extends Component{
render(){
return(
<SafeAreaView style = {{ flex: 1, backgroundColor: '#f2f2f2'}} >
<AppTabNavigator/>
</SafeAreaView>
)
}
}
//homescreen and the text that is displayed on that page
class HomeScreen extends Component {
render() {
return(
<View style = {styles.container}>
<Text>Welcome to my Navigator! </Text>
</View>
);
}
}
//MyPage and the text that is displayed on that page
class MyPage extends Component {
render() {
return(
<View style = {styles.container}>
<Text>My Page </Text>
</View>
);
}
}
//settings and the text that is displayed on that page
class SettingsScreen extends Component {
render() {
return(
<View style = {styles.container}>
<Text>Settings </Text>
</View>
);
}
}
//settings and the text that is displayed on that page
class ProfileScreen extends Component {
render() {
return(
<View style = {styles.container}>
<Text>Profile </Text>
</View>
);
}
}
//ceated a topTabNavigator then moved the buttons to the bottom
const AppTabNavigator = createMaterialTopTabNavigator({
Home: {
screen: HomeScreen,
navigationOptions: {
tabBarLabel: 'Home',
tabBarIcon: ({tintColor}) => (
<Icon name="ios-home" color = {tintColor} size = {24}/>
)
}
},
Settings: {
screen: SettingsScreen,
navigationOptions: {
tabBarLabel: 'Settings',
tabBarIcon: ({tintColor}) => (
<Icon name="ios-settings" color = {tintColor} size = {24}/>
)
}
},
Profile: {
screen: ProfileScreen,
navigationOptions: {
tabBarLabel: 'Profile',
tabBarIcon: ({tintColor}) => (
// <Icon name="ios-profile" color = {tintColor} size = {24}/>
<Image
source={require('./assets/snack-icon.png')}
style={{
marginLeft: 1,
marginTop: 1,
width: 25,
height: 25,
tintColor: '#FF3D00',
}}
/>
)
}
},
MyPage: {
screen: MyPage,
navigationOptions: {
tabBarLabel: 'Page',
tabBarIcon: ({tintColor}) => (
<Icon name = "ios-body" color = {tintColor} size = {24} />
)
}
}
},
{
//starts the program on Home Screen
initialRouteName: 'Home',
//orders the screens
//order: ['Settings', 'Home'],
//puts a color when that screen is activated in the tabs
//activeTintColor: 'white',
//Allows for icons(only) to appear on inactive tabs when you have more than 3 tabs
shifting: true,
tabBarPosition: 'top',
// swipeEnabled: true,
// animationEnabled: false,
tabBarOptions: {
activeTintColor: 'red',
inactiveTintColor: 'grey',
style: {
backgroundColor: 'pink',
borderTopWidth: 0.5,
borderTopColor: 'grey'
},
// indicatorStyle: {
// height: 0
// },
showIcon: true
}
})
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
}
});
the code to help you is this:
Profile: {
screen: ProfileScreen,
navigationOptions: {
tabBarLabel: 'Profile',
tabBarIcon: ({tintColor}) => (
// <Icon name="ios-profile" color = {tintColor} size = {24}/>
<Image
source={require('./assets/snack-icon.png')}
style={{
marginLeft: 1,
marginTop: 1,
width: 25,
height: 25,
tintColor: '#FF3D00',
}}
/>
)
}
},

Related

How Can I touch overflow Middle Button on bottomTab navigation?

I want to Make TabNavigation Using react-navigation.
like that picture.
Here is picture my App. I want to Touch that 'red-section' But it is now work now
I want to active that section. Please tell me how can i do...
Middle Button is more bigger than others
this is my App.js Code. And I made AddButton Component.
const AppContainer = createStackNavigator(
{
default: createBottomTabNavigator(
{
Home: {
screen: HomeScreen,
navigationOptions: {
tabBarIcon: ({ tintColor }) => <AntDesign name="home" size={35} color={tintColor} />
}
},
Post: {
screen: () => null,
navigationOptions: {
tabBarIcon: ({ tintColor }) => (
<TouchableOpacity size={150}
activeOpacity={1}
style={{
width:75,
height:75,
justifyContent: 'center',
alignItems: 'center',
height:80,
marginBottom:80
}}
>
<AddButton/>
</TouchableOpacity>
),
},
},
Profile: {
screen: ProfileScreen,
navigationOptions: {
tabBarIcon: ({ tintColor }) => <MaterialIcons name="person-outline" size={35} color={tintColor} />
}
}
},
{
defaultNavigationOptions: {
tabBarOnPress: ({ navigation, defaultHandler }) => {
if (navigation.state.key === 'Post') {
navigation.navigate('postModal')
} else {
defaultHandler()
}
}
},
tabBarOptions: {
activeTintColor: '#5A2AB7',
inactiveTintColor: '#404040',
showLabel: false,
style: { height: 80 },
}
}
),
postModal: {
screen: PostScreen
}
},
{
mode: 'modal',
headerMode: 'none',
}
)
const AuthStack = createStackNavigator({
Login: LoginScreen,
Register: RegisterScreen
})
export default createAppContainer(
createSwitchNavigator(
{
Loading: LoadingScreen,
App: AppContainer,
Auth: AuthStack
},
{
initialRouteName: "Loading"
}
)
);
here is AddButton.js
import React from 'react'
import {View, StyleSheet, Text, TouchableHighlight, Animated} from 'react-native'
import {FontAwesome5} from '#expo/vector-icons'
export default class AddButton extends React.Component {
render() {
return (
<View style={styles.button} underlayColor='#875EC1'>
<FontAwesome5 name="plus" size= {24} color="#FFF" />
</View>
)
}
}
const styles = StyleSheet.create({
button:{
backgroundColor:'#875EC1',
alignItems:'center',
justifyContent:'center',
width:72,
height:72,
borderRadius:36,
shadowColor:'#875EC1',
shadowRadius:5,
shadowOffset: {height:10},
shadowOpacity:0.3,
elevation:3
}
})

React Native Navigation Title

Apparently simple problem: the Header Title in react Navigation
Navigator file with my Bottom Tabs
const BottomTabNavigator = createMaterialBottomTabNavigator(
{
ToFind: {
screen: TopBarNavigator,
navigationOptions: {
title: "Discover",
tabBarIcon: (tabInfo) => {
return (
<Ionicons
name="md-search"
size={25}
color={tabInfo.tintColor} //prende lo stesso colore di tintcolor giù
/>
);
},
tabBarColor: "#27ae60",
activeColor: "white",
},
},
....
const Navigator = createStackNavigator({
BottomTabNavigator,
Detail: DetailScreen, // not visible but I need the navigation
Item: ItemDisplay, // not visible but I need the navigation
});
Now I try to set the name into the page (at the bottom)
MapScreen.navigationOptions = (navData) => {
return {
headerTitle: "Map",
};
};
Doing this I have the Bottom Tabs styled as I want and navigation but I CAN'T change the header title (navigation title) but I always see BottomTabNavigator
It looks really trick or I'm mistaking somewhere?
Any Idea?
Thanks
createMaterialBottomTabNavigator does not have header bar by default, but createStackNavigator has.
You can do something like this.
import React from "React";
import { createAppContainer, createStackNavigator } from "react-navigation";
import { createMaterialBottomTabNavigator } from "react-navigation-material-bottom-tabs";
class HomeScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<Text>Home Screen</Text>
</View>
);
}
}
const Tab1 = createStackNavigator({
S1: {
screen: ToFind
}
});
const Tab2 = createStackNavigator({
S2: {
screen: ToFind
}
});
export default createAppContainer(
createBottomTabNavigator({
Tab1,
Tab2
}, {
//CUSTOM CONFIG
initialRouteName: 'Tab1',
navigationOptions: ({ navigation }) => ({
tabBarIcon: ({ tintColor }) => {
const { routeName } = navigation.state;
let iconName;
if (routeName === 'Tab1') {
iconName = 'icon1';
} else if (routeName === 'Tab2') {
iconName = 'icon2';
}
return <Icon name={iconName} size={24} color={tintColor} />;
<Ionicons
name={iconName}
size={25}
color={tabInfo.tintColor} //prende lo stesso colore di tintcolor giù
/>
},
}),
tabBarOptions: {
activeTintColor: 'white',
inactiveTintColor: 'black',
showLabel: false,
style: {
backgroundColor: '#27ae60',
borderTopWidth: 0,
borderTopColor: '#27ae60',
},
},
});
);
Try these steps. Hope to fix your problem.
Create Your Bottom Tab Navigator :
const BottomTabNavigator = createMaterialBottomTabNavigator(
{
PageOne: {
screen: PageOneComponent,
navigationOptions: {
tabBarIcon: ({ tintColor }) => <Feather name="airplay" size={26} color={tintColor} />,
tabBarLabel: null,
barStyle: { backgroundColor: 'white', elevation: 0, }
},
},
PageTwo: {
screen: PageTwoComponent,
navigationOptions: {
tabBarIcon: ({ tintColor }) => <Feather name="search" size={25} color={tintColor}/>,
tabBarLabel: null,
barStyle: { backgroundColor: 'white', elevation: 0, }
}
},
MapViewLink: {
screen: MapView,
navigationOptions: {
tabBarIcon: <Feather name="map-pin" size={25} color={'green'} />,
tabBarOnPress: ({ navigation }) => {
navigation.navigate('MapView');
},
tabBarLabel: null
}
},
},
{
initialRouteName: 'PageOne',
activeColor: 'orange',
inactiveColor: 'grey',
labeled: false,
barStyle: { backgroundColor: 'white', elevation: 0, borderTopWidth: 1, borderTopColor: '#efefef' },
}
);
Create your StackNavigator and export the navigator
const StackNavigator = createStackNavigator({
// bottom tab navigator
BottomTabNavigator: {
screen: BottomTabNavigator,
navigationOptions: {
header: null
}
},
// MapView Page
MapView: {
screen: MapView,
navigationOptions: ({ navigation }) => ({
title: 'Hello World'
})
},
}, {
defaultNavigationOptions: ({navigation}) => ({
headerTitleAlign: 'center',
cardStyle: { backgroundColor: '#FFFFFF' },
headerTitleStyle: {
// the default styles you want to apply to header title
},
});
export default createAppContainer(StackNavigator);
In the end, put the navigator inside the main project file. e.g App.js

How to toggle the side menu bar in react native?

I am trying to create a new app. I have created the side menu. But side menu drawer not working if i am in the same screen.For example in the screenshot i am already in the home screen. Now if i click the home in the side menu there is no action. One more question now the side menu covers the whole screen height. I want to be display between the header and bottom tab navigator. Please help me image
const DashboardTabNavigator = createBottomTabNavigator( {
Home: HomeScreen,
WebMenu: WebMenuScreen,
Settings: SettingsScreen,
},
{
tabBarOptions: {
activeTintColor: 'tomato',
inactiveTintColor: 'gray',
labelStyle: {
fontSize: 15
},
tabStyle: {
justifyContent: 'center'
},
showIcon: false
},
});
//MenuDrawer
export class MenuDrawer extends React.Component {
gotoHome = () => {
this.props.navigation.navigate('Home');
}
gotoWebMenu = () => {
this.props.navigation.navigate('WebMenu');
}
gotoSettings = () => {
this.props.navigation.navigate('Settings');
}
render() {
return(
<View style = {styles.container}>
<Text onPress={this.gotoHome} style = {styles.item} ><Ionicons name="md-home" size={20} /> Home</Text>
<Text onPress={this.gotoWebMenu} style = {styles.item} ><Ionicons name="logo-rss" size={20} /> Web Menu</Text>
<Text onPress={this.gotoSettings} style = {styles.item} ><Ionicons name="md-settings" size={20} /> Settings</Text>
</View>
)
}
}
//side menu
const MyApp = createDrawerNavigator({
Menu: {
screen: DashboardTabNavigator,
},
},
{
contentComponent: MenuDrawer,
drawerPosition: 'right',
drawerWidth:width - width/2
},
{
initialRouteName: 'Login'
});
//screen route
const LoginStack = createStackNavigator({
Login: {
screen: Login
},
Home:{ screen: MyApp},
}, {
initialRouteName: 'Login',
headerMode: 'null'
});
const MyApp1 = createAppContainer(LoginStack);
Try this.
class NavigationDrawerStructure extends Component {
toggleDrawer = () => {
//Props to open/close the drawer
this.props.navigationProps.toggleDrawer();
};
render() {
return (
<View style={{ flexDirection: 'row' }}>
<TouchableOpacity onPress={this.toggleDrawer.bind(this)}>
<Image
source={require('../Img/hamburger.png')}
style={{ width: 25, height: 25, marginLeft: 20, tintColor: '#ffffff' }}
/>
</TouchableOpacity>
</View>
);
}
}
And then use it in this way
const HomeActivity_StackNavigator = createStackNavigator({
Home: {
screen: Main,
navigationOptions: ({ navigation }) => ({
title: 'Dashboard',
headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,
headerStyle: {
backgroundColor: '#FF9800'
},
headerTintColor: '#fff'
}),
},
}, {headerLayoutPreset: 'center'});

Deep Linking in Nested Navigators in react navigation

I am using react-navigation and as per the structure of my application, we have a tab navigator inside stack navigator, I am not been able to find any proper guide for implementing Deep-Linking.
https://v1.reactnavigation.org/docs/deep-linking.html. this doesn't give any reference for nested navigators.
You have to basically pass a path to every upper route untill you come to you nested route. This is indipendent of the type of navigator you use.
const HomeStack = createStackNavigator({
Article: {
screen: ArticleScreen,
path: 'article',
},
});
const SimpleApp = createAppContainer(createBottomTabNavigator({
Home: {
screen: HomeStack,
path: 'home',
},
}));
const prefix = Platform.OS == 'android' ? 'myapp://myapp/' : 'myapp://';
const MainApp = () => <SimpleApp uriPrefix={prefix} />;
In this case to route to an inner Navigator this is the route: myapp://home/article.
This example is using react-navigation#^3.0.0, but is easy to transfer to v1.
So, after the arrival of V3 of react navigation, things got extremely stable. Now i will present you a navigation structure with deep-linking in a Switch navigator -> drawerNavigator-> tabNavigator -> stack-> navigator. Please go step by step and understand the structure and keep referring to official documentation at everystep
With nested navigators people generally mean navigation structure which consists of drawer navigator, tab navigator and stackNavigator. In V3 we have SwitchNavigator too. So let's just get to the code,
//here we will have the basic React and react native imports which depends on what you want to render
import React, { Component } from "react";
import {
Platform,
StyleSheet,
Text,
View, Animated, Easing, Image,
Button,
TouchableOpacity, TextInput, SafeAreaView, FlatList, Vibration, ActivityIndicator, PermissionsAndroid, Linking
} from "react-native";
import { createSwitchNavigator, createAppContainer, createDrawerNavigator, createBottomTabNavigator, createStackNavigator } from "react-navigation";
export default class App extends Component<Props> {
constructor() {
super()
this.state = {
isLoading: true
}
}
render() {
return <AppContainer uriPrefix={prefix} />;
}
}
class WelcomeScreen extends Component {
state = {
fadeAnim: new Animated.Value(0.2), // Initial value for opacity: 0
}
componentDidMount() {
Animated.timing( // Animate over time
this.state.fadeAnim, // The animated value to drive
{
toValue: 1,
easing: Easing.back(), // Animate to opacity: 1 (opaque)
duration: 1000,
useNativeDriver: true // Make it take a while
}
).start(); // Starts the animation
}
render() {
let { fadeAnim } = this.state;
return (
<View style={{ flex: 1, alignItems: "center", justifyContent: "center", backgroundColor: '#000' }}>
<Animated.View // Special animatable View
style={{ opacity: fadeAnim }}
>
<TouchableOpacity
onPress={() => this.props.navigation.navigate("Dashboard")}
style={{
backgroundColor: "orange",
alignItems: "center",
justifyContent: "center",
height: 30,
width: 100,
borderRadius: 10,
borderColor: "#ccc",
borderWidth: 2,
marginBottom: 10
}}
>
<Text>Login</Text>
</TouchableOpacity>
</Animated.View>
<Animated.View // Special animatable View
style={{ opacity: fadeAnim }}
>
<TouchableOpacity
onPress={() => alert("buttonPressed")}
style={{
backgroundColor: "orange",
alignItems: "center",
justifyContent: "center",
height: 30,
width: 100,
borderRadius: 10,
borderColor: "#ccc",
borderWidth: 2
}}
>
<Text> Sign Up</Text>
</TouchableOpacity>
</Animated.View>
</View>
);
}
}
class Feed extends Component {
render() {
return (
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<Button
onPress={() => this.props.navigation.navigate("DetailsScreen")}
title="Go to details"
/>
</View>
);
}
}
class Profile extends Component {
render() {
return (
<SafeAreaView style={{ flex: 1, }}>
//Somecode
</SafeAreaView>
);
}
}
class Settings extends Component {
render() {
return (
<View style={{ flex: 1 }}>
//Some code
</View>
);
}
}
const feedStack = createStackNavigator({
Feed: {
screen: Feed,
path: 'feed',
navigationOptions: ({ navigation }) => {
return {
headerTitle: "Feed",
headerLeft: (
<Icon
style={{ paddingLeft: 10 }}
name="md-menu"
size={30}
onPress={() => navigation.openDrawer()}
/>
)
};
}
},
DetailsScreen: {
screen: Detail,
path: 'details',
navigationOptions: ({ navigation }) => {
return {
headerTitle: "Details",
};
}
}
});
const profileStack = createStackNavigator({
Profile: {
screen: Profile,
path: 'profile',
navigationOptions: ({ navigation }) => {
return {
headerTitle: "Profile",
headerMode: 'Float',
headerLeft: (
<Icon
style={{ paddingLeft: 10 }}
name="md-menu"
size={30}
onPress={() => navigation.openDrawer()}
/>
)
};
}
},
DetailsScreen: {
screen: Detail,
path: 'details',
navigationOptions: ({ navigation }) => {
return {
headerTitle: "Details"
};
}
}
});
const settingStack = createStackNavigator({
Settings: {
screen: Settings,
path: 'settings',
navigationOptions: ({ navigation }) => {
return {
headerTitle: "Settings",
headerLeft: (
<Icon
style={{ paddingLeft: 10 }}
name="md-menu"
size={30}
onPress={() => navigation.openDrawer()}
/>
)
};
}
},
DetailsScreen: {
screen: Detail,
path: 'details',
navigationOptions: ({ navigation }) => {
return {
headerTitle: "Details"
};
},
}
});
const DashboardTabNavigator = createBottomTabNavigator(
{
feedStack: {
screen: feedStack,
path: 'feedStack',
navigationOptions: ({ navigation }) => {
let tabBarVisible = true;
if (navigation.state.index > 0) {
tabBarVisible = false;
}
return {
tabBarLabel: "Feed",
tabBarVisible,
//iconName :`ios-list${focused ? '' : '-outline'}`,
tabBarIcon: ({ tintColor }) => (
<Icon name="ios-list" color={tintColor} size={25} />
)
};
}
},
profileStack: {
screen: profileStack,
path: 'profileStack',
navigationOptions: ({ navigation, focused }) => {
let tabBarVisible = true;
if (navigation.state.index > 0) {
tabBarVisible = false
}
return {
tabBarVisible,
tabBarLabel: "Profile",
tabBarIcon: ({ tintColor }) => (
<Icon name="ios-man" color={tintColor} size={25} />
)
};
// focused:true,
}
},
settingStack: {
screen: settingStack,
path: 'settingsStack',
navigationOptions: ({ navigation }) => {
let tabBarVisible = true;
if (navigation.state.index > 0) {
tabBarVisible = false;
}
return {
tabBarVisible,
tabBarLabel: "Settings",
tabBarIcon: ({ tintColor }) => (
<Icon name="ios-options" color={tintColor} size={25} />
)
}
}
},
},
{
navigationOptions: ({ navigation }) => {
const { routeName } = navigation.state.routes[navigation.state.index];
return {
// headerTitle: routeName,
header: null
};
},
tabBarOptions: {
//showLabel: true, // hide labels
activeTintColor: "orange", // active icon color
inactiveTintColor: "#586589" // inactive icon color
//activeBackgroundColor:'#32a1fe',
}
}
);
const DashboardStackNavigator = createStackNavigator(
{
DashboardTabNavigator: {
screen: DashboardTabNavigator,
path: 'dashboardtabs'
},
DetailsScreen: {
screen: Detail,
path: 'details',
navigationOptions: ({ navigation }) => {
return {
headerTitle: "Details"
};
}
}
},
{
defaultNavigationOptions: ({ navigation }) => {
return {
headerLeft: (
<Icon
style={{ paddingLeft: 10 }}
name="md-menu"
size={30}
onPress={() => navigation.openDrawer()}
/>
)
};
}
}
);
const AppDrawerNavigator = createDrawerNavigator({
Dashboard: {
screen: DashboardStackNavigator,
path: 'welcome'
},
DetailsScreen: {
screen: Detail,
path: 'friends',
navigationOptions: ({ navigation }) => {
return {
headerTitle: "Details",
};
}
}
});
//Switch navigator , will be first to load
const AppSwitchNavigator = createSwitchNavigator({
Welcome: {
screen: WelcomeScreen,
},
Dashboard: {
screen: AppDrawerNavigator,
path: 'welcome'
}
});
const prefix = 'myapp://';
const AppContainer = createAppContainer(AppSwitchNavigator);
For the process to setup React-navigation deep-linking please follow the official documentation
DetailsScreen was in my different folder and that will have class component of your choice
To launch the App the deep-link URL is myapp://welcome
To go to root page the deep-link URL is myapp://welcome/welcome
(this will reach at first page of first tab of tab navigator)
To go to any particular screen of tab navigator (suppose details
screen in profile tab) -
myapp://welcome/welcome/profileStack/details
const config = {
Tabs: {
screens: {
UserProfile: {
path: 'share//user_share/:userId',
parse: {
userId: (userId) => `${userId}`,
},
},
},
},
};
const linking = {
prefixes: ['recreative://'],
config,
};
if you have a screen in tab navigator you can do it like this via react-navigation v5

Icons/Images do not display with TabBarBottom in React Native

I've pretty much taken the sample code from the TabNavigator documentation and the icon's/images simply don't appear on iOS or Android. Even the label override doesn't seem to take effect. What am I doing wrong?
Here's the link to the docs I've been using:
https://reactnavigation.org/docs/navigators/tab
Here's my code:
class MyHomeScreen extends React.Component {
static navigationOptions = {
tabBarLabel: 'Not displayed',
// Note: By default the icon is only shown on iOS. Search the showIcon option below.
tabBarIcon: ({ tintColor }) => (
<Image
source={require('./chats-icon.png')}
style={[styles.icon, {tintColor: tintColor}]}
/>
),
};
render() {
return (
<Button
onPress={() => this.props.navigation.navigate('Notifications')}
title="Go to notifications"
/>
);
}
}
class MyNotificationsScreen extends React.Component {
static navigationOptions = {
tabBarLabel: 'Notifications',
tabBarIcon: ({ tintColor }) => (
<Image
source={require('./notif-icon.png')}
style={[styles.icon, {tintColor: tintColor}]}
/>
),
};
render() {
return (
<Button
onPress={() => this.props.navigation.goBack()}
title="Go back home"
/>
);
}
}
const styles = StyleSheet.create({
icon: {
width: 26,
height: 26,
},
});
const MyApp = TabNavigator({
Displayed: {
screen: MyHomeScreen,
},
Notifications: {
screen: MyNotificationsScreen,
},
}, {
tabBarOptions: {
activeTintColor: '#e91e63',
},
});
Alright, I finally figured it out after wanting to slam my face into the keyboard.
The title and tab bar icon is actually a different structure to what's inside the docs.
const MyApp = TabNavigator({
Displayed: {
screen: MyHomeScreen,
navigationOptions: {
title: 'Favorites',
tabBar: {
icon: ({tintColor}) => (<Image
source={require('./chats-icon.png')}
style={{width: 26, height: 26, tintColor: tintColor}}
/>)
},
},
},
...
or
class MyHomeScreen extends React.Component {
static navigationOptions = {
title: 'Foo Bar',
tabBar: {
icon: ({ tintColor }) => (
<Image
source={require('./chats-icon.png')}
style={{width: 26, height: 26, tintColor: tintColor}}
/>
),
}
};
...
As for react-navigation-tabs v2.6.2 is it now as described in the doc.
To update the old example, you have to replace tabBar: { icon: ... } by tabBarIcon: ...
e.g.
class MyHomeScreen extends React.Component {
static navigationOptions = {
title: 'Foo Bar',
tabBarIcon: ({ tintColor }) => (
<Image
source={require('./chats-icon.png')}
style={{width: 26, height: 26, tintColor: tintColor}}
/>
)
};
I was searching for answers in stack overflow while answer was in documentation itself. For using images as icon in react-native bottom tab. This is according to current React Navigation 4.x.
const tabNavigator = createBottomTabNavigator({
Style: HomeScreen,
Location: LocationScreen,
},
{
defaultNavigationOptions: ({ navigation }) => ({
tabBarIcon: ({ focused, horizontal, tintColor }) => {
const { routeName } = navigation.state;
if (routeName === 'Style') {
return <Image
source={require('./screens/assets/notifications.png')}
style={{ height: 25, width: 25, tintColor: tintColor }}
/>;
} else if (routeName === 'Location') {
return <Image
source={require('./screens/assets/location.png')}
style={{ height: 35, width: 35, tintColor: tintColor }}
/>;
}
},
}),
tabBarOptions: {
activeTintColor: 'tomato', //For changing tint colors
inactiveTintColor: 'gray',
},
}
),
You can find additional info here.
Got the same problem, but this solution didn't worked for me. Invalid Key 'tabBar' defined in navigation options...
Edit:
Got it working when I removed the tabBarOptions from my tab navigator.
instead used the activeTintColor and inactiveTintColor as the props of TabBarBottom.