We Keep Coding

How To Use CreateBottomTabNavigator in React Native?

Current code
App.js
import React from 'react';
import {NavigationContainer} from '#react-navigation/native';
import {createStackNavigator} from '#react-navigation/stack';
import { Icon } from 'react-native-elements';
import HomeScreen from 'app/src/screens/home/Index';
import DetailScreen from 'app/src/screens/home/Detail';
import MypageScreen from 'app/src/screens/mypage/Index';
import InitialScreen from 'app/src/screens/authentication/Initial';
const Home = {
screen: HomeScreen,
navigationOptions: ({ navigation }) => {
return {
title: 'Home',
};
},
};
const Detail = {
screen: DetailScreen,
navigationOptions: ({ navigation }) => {
return {
title: 'Detail',
};
},
};
const Mypage = {
screen: MypageScreen,
navigationOptions: ({ navigation }) => {
return {
title: 'MyPage',
};
},
};
const Initial = {
screen: InitialScreen,
navigationOptions: ({ navigation }) => {
return {
title: 'Initial',
};
},
}
const HomeStack = createStackNavigator(
{
Home,
Detail,
},
{
initialRouteName: 'Home',
navigationOptions: {
tabBarIcon: <Icon name="home" />,
},
}
);
const MypageStack = createStackNavigator(
{
Mypage,
},
{
initialRouteName: 'Mypage',
navigationOptions: {
tabBarIcon: <Icon name="person" />,
},
}
);
const postLoginNavigator = createBottomTabNavigator({
Home: HomeStack,
Mypage: MypageStack,
});
const AppNavigator = createStackNavigator({
Initial,
PostLogin: postLoginNavigator
},{
mode: 'modal',
headerMode: 'none',
initialRouteName: 'Initial'
})
const AppContainer = createAppContainer(AppNavigator);
export default class App extends React.Component {
render() {
return (
<AppContainer />
);
}
}
What I want to do
I wanna make tabs in bottom using createBottomTabNavigator.
Home and My Page tabs.
Error that I'm facing
Error: Creating a navigator doesn't take an argument. Maybe you are trying to use React Navigation 4 API with React Navigation 5?
ps
I'm using
"#react-navigation/native": "^5.2.3",
"#react-navigation/stack": "^5.2.8",
"#react-navigation/bottom-tabs": "^5.0.6",
I would appreciate it if you could give me any advices.

const MyTabs = () => {
return(
<Tab.Navigator>
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="Mypage" component={MypageScreen} />
</Tab.Navigator>);
}
Can you try this? I think I missed the return statement

Add the bottomTabNavigator inside a StackNavigator. In future, if you are adding more screens you can add it to the stack
import React from 'react';
import {NavigationContainer} from '#react-navigation/native';
import {createStackNavigator} from '#react-navigation/stack';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import { Icon } from 'react-native-elements';
import HomeScreen from 'app/src/screens/home/Index';
import MypageScreen from 'app/src/screens/mypage/Index';
const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();
const MyTabs = () => {
<Tab.Navigator>
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="Mypage" component={MypageScreen} />
</Tab.Navigator>
}
const AuthStack = () => (
<Stack.Navigator>
<Stack.Screen name="Tabs" component={MyTabs} />
</Stack.Navigator>
);
const AuthenticationNavigator = () => (
<NavigationContainer>
<AuthStack />
</NavigationContainer>
);
export default AuthenticationNavigator;

Using FontAwesome in a tabbar with React Native

I am new to react native and am trying to create a tabbar using createBottomTabNavigator. I would like each tab to have its own icon.
I have followed the following tutorial which uses FontAwesome to display the tab icon.
Tutorial
When I run my app in the iso simulator the tabs display but the icons don't.
Here is my code
import { createStackNavigator } from 'react-navigation-stack';
import { createAppContainer } from 'react-navigation';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import Icon from "react-native-vector-icons/FontAwesome5";
import HomeScreen from './HomeScreen';
import SecondActivity from './second';
const TabNavigator = createBottomTabNavigator({
Home: { screen: HomeScreen,
defaultNavigationOptions: {
tabBarIcon: ({tintColor}) =>
<Icon name="home" size={25} color={tintColor} />
}
},
Events: { screen: SecondActivity,
defaultNavigationOptions: {
tabBarIcon: ({tintColor}) =>
<Icon name="chart-bar" size={25} color={tintColor} />
}
}
}
);
const MyStack = createStackNavigator({
Tabs: {
screen: TabNavigator
},
Home: {
screen: HomeScreen
},
Events: {
screen: SecondActivity
}
},
{
initialRouteName: 'Tabs',
}
);
export default createAppContainer(MyStack);
How do I get the icons to display?

I have a solution for you that is a bit different that what you did in there .. so
const config = Platform.select({
web: { headerMode: "screen" },
default: {}
})
const HomeStack = createStackNavigator(
{
Home: HomeScreen
},
config
)
HomeStack.navigationOptions = {
tabBarIcon: ({ focused }) => (
<TabBarIcon
focused={focused}
name={Platform.OS === "ios" ? "ios-calendar" : "md-calendar"}
/>
)
}
HomeStack.path = ""
and them you can do like this in createBottomTabNavigator
const tabNavigator = createBottomTabNavigator(
{
HomeStack,
},
{
activeColor: '#000'
}

// You can import Ionicons from #expo/vector-icons if you use Expo or
// react-native-vector-icons/Ionicons otherwise.
import Ionicons from 'react-native-vector-icons/Ionicons';
import { createAppContainer } from 'react-navigation';
import { createBottomTabNavigator } from 'react-navigation-tabs';
export default createBottomTabNavigator(
{
Home: HomeScreen,
Settings: SettingsScreen,
},
{
defaultNavigationOptions: ({ navigation }) => ({
tabBarIcon: ({ focused, horizontal, tintColor }) => {
const { routeName } = navigation.state;
let IconComponent = Ionicons;
let iconName;
if (routeName === 'Home') {
iconName = focused
? 'ios-information-circle'
: 'ios-information-circle-outline';
// Sometimes we want to add badges to some icons.
// You can check the implementation below.
IconComponent = HomeIconWithBadge;
} else if (routeName === 'Settings') {
iconName = focused ? 'ios-list-box' : 'ios-list';
}
// You can return any component that you like here!
return <IconComponent name={iconName} size={25} color={tintColor} />;
},
}),
tabBarOptions: {
activeTintColor: 'tomato',
inactiveTintColor: 'gray',
},
}
);
Link : https://snack.expo.io/#react-navigation/basic-tabs-v3
Link : https://reactnavigation.org/docs/en/tab-based-navigation.html

Uncaught Error: undefined is not an object (evaluating 'Y.props.navigation') touchableHandlePress#[native code]

I'm adding in the react-navigation header a drawerMenuButton to open the Drawer Menu.
The icon appears normally but when pressed returns the error quoted.
import React from 'react';
import { View, Dimensions } from 'react-native';
import { Button, Icon } from 'native-base';
import { createAppContainer, createStackNavigator, createDrawerNavigator } from 'react-navigation';
...
const DrawerConfig = {
drawerWidth: Dimensions.get('window').width * 0.75,
contentComponent: ({ navigation }) => {
return(<MenuDrawer navigation={navigation} />)
}
}
const HomeNavigator = createStackNavigator ({
...
}, {
defaultNavigationOptions: ({ navigation }) => {
return {
headerTitleStyle: {
fontWeight: 'bold'
},
headerLeft: (
<Button transparent onPress={() => this.props.navigation.toggleDrawer()}>
<Icon name='menu' style={{color: '#FFF'}} />
</Button>
),
headerRight: (
<HomeIcon navigation={navigation} />
),
headerStyle: {
backgroundColor: '#b80003'
},
headerTintColor: '#FFF'
}
}
});
const DrawerNavigator = createDrawerNavigator (
{
'Principal': {
screen: HomeNavigator
},
'Sobre o Aplicativo': {
screen: InformationApp
},
'Sobre os Responsáveis': {
screen: Team
},
'Sobre o Projeto': {
screen: Project
},
'Política e Termos': {
screen: Policy
}
},
DrawerConfig
);
const AppDrawerContainer = createAppContainer(DrawerNavigator);
export default AppDrawerContainer;
It is important to note that for screens belonging to const DrawerNavigator = createDrawerNavigator I am using the same code above to render drawerMenuButton and it is working normally, the error occurs only on const screens HomeNavigator = createStackNavigator.

Change your code like this
onPress={() => navigation.toggleDrawer()}>

How to force stackNavigator to target MainScreen?

I have implemented a StackNavigator and a DrawerNavigator, in my DrawerNavigator in the first option I am calling StackNavigator. The problem is that when I'm browsing Stack screens I wanted to go back to the main screen through Drawer but this doesn't happen because Stack stores the last screen the user was on.
I have tried using some Navigation Prop but I am not sure where to insert this code or even which of the commands to use on the stack.
MenuDrawer.js
import React from 'react';
import {
View,
ScrollView,
Text,
StyleSheet,
TouchableOpacity,
Image,
Dimensions
} from 'react-native';
export default class MenuDrawer extends React.Component{
navLink(nav, text) {
return(
<TouchableOpacity style={{height: 50}} onPress={() => this.props.navigation.navigate(nav)}>
<Text style={styles.link}>{text}</Text>
</TouchableOpacity>
)
}
render() {
return(
<ScrollView styles={styles.continer}>
<View style={styles.topImage}>
<Image style={styles.image} source={require('../images/informationappscreen/act.png')} />
</View>
<View style={styles.bottomLinks}>
{this.navLink('Principal', 'Principal')}
{this.navLink('Sobre o Aplicativo', 'Sobre o Aplicativo')}
{this.navLink('Sobre os Responsáveis', 'Sobre os Responsáveis')}
{this.navLink('Sobre o Projeto', 'Sobre o Projeto')}
{this.navLink('Política e Termos', 'Política e Termos')}
</View>
<View style={styles.footer}>
<Text style={styles.description}>ACT</Text>
<Text style={styles.version}>v1.3.0</Text>
</View>
</ScrollView>
);
}
}
App.js
import React from 'react';
import { View, Dimensions } from 'react-native';
import { Button, Icon } from 'native-base';
import { createAppContainer, createStackNavigator, createDrawerNavigator } from 'react-navigation';
...
const HomeNavigator = createStackNavigator ({
'Main1': {
screen: Main1,
navigationOptions: {
title: 'Menu Principal',
headerRight: (<View></View>)
}
},
'Main2': {
screen: Main2,
navigationOptions: {
title: 'Menu Principal',
headerRight: (<View></View>)
},
},
'SecondMain': {
screen: SecondMain,
navigationOptions: {
title: 'Menu Querer'
}
},
'Action1': {
screen: Action1,
navigationOptions: {
title: 'Ações'
}
},
...
}, {
defaultNavigationOptions: ({ navigation }) => {
return {
headerTitleStyle: {
fontWeight: 'bold'
},
headerLeft: (
<Button transparent onPress={() => navigation.toggleDrawer()}>
<Icon name='menu' style={{color: '#FFF'}} />
</Button>
),
headerRight: (
<HomeIcon navigation={navigation} />
),
headerStyle: {
backgroundColor: '#b80003'
},
headerTintColor: '#FFF'
}
}
});
const DrawerConfig = {
drawerWidth: Dimensions.get('window').width * 0.75,
contentComponent: ({ navigation }) => {
return(<MenuDrawer navigation={navigation} />)
}
}
const DrawerNavigator = createDrawerNavigator (
{
'Principal': {
screen: HomeNavigator
},
'Sobre o Aplicativo': {
screen: InformationApp
},
'Sobre os Responsáveis': {
screen: Team
},
'Sobre o Projeto': {
screen: Project
},
'Política e Termos': {
screen: Policy
}
},
DrawerConfig
);
const AppDrawerContainer = createAppContainer(DrawerNavigator);
export default AppDrawerContainer;

Can you try reset , change method navLink
import { StackActions, NavigationActions } from 'react-navigation';
navLink(nav, text) {
return (
<TouchableOpacity
style={{ height: 50 }}
onPress={() => {
const resetAction = StackActions.reset({
index: 0,
actions: [NavigationActions.navigate({ routeName: nav })]
});
this.props.navigation.dispatch(resetAction);
}}
>
<Text style={styles.link}>{text}</Text>
</TouchableOpacity>
);
}

Try using this.props.navigation.push('your_pagename') this will push new item to the stack. It means when using push componentDidMount() method call again

Why doesn't the nested stack navigation work in react native?

I'm a beginner programmer and I'm trying to created a nested navigator in react native. The stack navigator on the Home screen works but the stack navigator on the MyEvents Screen does not. I use the tabs to navigate between Home and MyEvents and within the those pages I want to use a stack navigator to get to other pages. Please help! (also please let me know if I am being unclear)
This is Router.js
import React from 'react';
import {StackNavigator, TabNavigator} from 'react-navigation';
import InputScreen from './InputPage';
import HomeScreen from './Home';
import DetailsScreen from './Details';
import MyEventsScreen from './MyEvents';
import EditScreen from './EditPage';
import MapScreen from './Map';
const BottomNavigation = require('react-native-bottom-navigation');
export const Tabs = TabNavigator({
Home: {screen: HomeScreen},
EventMap: {screen: MapScreen},
Input: {screen: InputScreen},
MyEvents:{screen: MyEventsScreen},
},{
tabBarOptions: {
activeTintColors: '#e91e63',
//swipeEnabled: true,
}
});
export const EventsStack = StackNavigator({
Home: {
screen: Tabs,
},
Details: {
screen: DetailsScreen,
navigationOptions: {
header: null,
},
},
});
export const MyEventsStack = StackNavigator({
MyEvents: {
screen: Tabs,
navigationOptions: {
header: null
}
},
MyEventsDetails: {
screen: EditScreen,
navigationOptions: {
header: null,
/*navigation: ({ navigation }) => ({
title: `${navigation.state.params.name.first.toUpperCase()} ${navigation.state.params.name.last.toUpperCase()}`,
}),*/
},
},
});
export const Root = StackNavigator({
TabNav: {
screen: EventsStack,
}
}, {headerMode: 'none'});
This is Home.js
import React, {Component} from 'react';
import {View, Text, TouchableHighlight, SectionList} from 'react-native';
import {ListItem} from 'react-native-elements';
import {firebaseApp} from './App';
import Icon from 'react-native-vector-icons/MaterialIcons';
import {StackNavigator, TabNavigator} from 'react-navigation';
import {Tabs} from './Router';
export default class HomeScreen extends Component {
constructor(props) {
super(props);
this.state = {
data: []
};
this.itemsRef = firebaseApp.database().ref().child('items');
console.ignoredYellowBox = [
'Setting a timer'
];
}
onLearnMore = (item) => {
this.props.navigation.navigate('Details', {
...item
});
};
static navigationOptions = {
tabBarLabel: 'Home',
tabBarIcon: ({tintColor}) => (
<Icon
name = {'Home'}
size = {26}
style = {{color: tintColor}} />
)
}
listenForItems(itemsRef) {
itemsRef.on('value', (snap) => {
// get children as an array
var items = [];
snap.forEach((parent) => {
var children = [];
parent.forEach((child) => {
children.push({
"name": child.val().name,
"when": child.val().when,
"who": child.val().who,
});
});
items.push({
data: children,
key: parent.key.toUpperCase(),
})
});
this.setState({
data: items
});
});
}
componentDidMount() {
this.listenForItems(this.itemsRef);
}
render() {
var styles = require('./Styles');
const {navigate} = this.props.navigation;
return (
<View style={{flex: 1}}>
<View style={styles.header}>
<Text style={styles.title}>Princeton Events</Text>
</View>
<View style={styles.body}>
<SectionList renderItem={({item}) => <ListItem style={styles.item}
title={item.name} subtitle={item.when}
onPress={() => this.onLearnMore(item)}/>}
renderSectionHeader={({section}) =>
<Text style={styles.sectionHeader}>{section.key}</Text>}
sections={this.state.data} keyExtractor={(item) => item.name}/>
</View>
</View>
);
}
}
This is MyEvents.js
import React, {Component} from 'react';
import {View, Text, TouchableHighlight, FlatList} from 'react-native';
import {ListItem, List} from 'react-native-elements';
import Icon from 'react-native-vector-icons/MaterialIcons';
import Router from './Router';
export default class MyEventsScreen extends Component {
onViewMyEvent = (item) => {
this.props.navigation.navigate('Edit', {
...item
});
};
static navigationOptions = {
tabBarLabel: 'MyEvents',
tabBarIcon: ({tintColor}) => (
<Icon
name = {'account circle'}
size = {26}
style = {{color: tintColor}} />
)
}
render() {
var styles = require('./Styles');
const {navigate} = this.props.navigation;
return (
<View style={{
flex: 1
}}>
<View style={styles.header}>
<Text style={styles.title}>My Events</Text>
</View>
<View style={styles.body}>
<List containerStyle={{
borderTopWidth: 0,
borderBottomWidth: 0
}}>
<FlatList data={[
{
"name": "Event 1",
"who": "E-Club",
"what": "description goes here description goes here description goes here",
"when": "1:00",
"where": "Ehub",
"RSVP": "yes"
}, {
"name": "Event 2",
"who": "Club 2",
"what": "description goes here",
"when": "2:00",
"where": "Location 2",
"RSVP": "no"
}
]} renderItem={({item}) => <ListItem style={styles.item} title={item.name} subtitle={item.when} containerStyle={{
borderBottomWidth: 0
}} onPress={() => this.onViewMyEvent(item)}/>} keyExtractor={(item, index) => index}/>
</List>
</View>
<View style={styles.footer}>
<TouchableHighlight style={styles.button} onPress={() => navigate('Home')} underlayColor='#ffd199'>
<Text style={styles.buttonText}>Back</Text>
</TouchableHighlight>
</View>
</View>
);
}
}