I want to add icons on my bottom navigator but I don't know how or where to put it. Can someone help me? I'm currently learning react native so please bear with me. Thank you!.
screenshot of bottom navigator
Here is my code for navigation:
import { StyleSheet } from "react-native";
import { createAppContainer, createSwitchNavigator } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
import { createBottomTabNavigator } from "react-navigation-tabs";
import SignInScreen from "./src/screens/SignInScreen";
import SignUpScreen from "./src/screens/SignUpScreen";
import RestaurantScreen from "./src/screens/RestaurantScreen";
import RestaurantDetailScreen from "./src/screens/RestaurantDetailScreen";
import MapScreen from "./src/screens/MapScreen";
import MyDealsScreen from "./src/screens/MyDealsScreen";
import { setNavigator } from "./src/navigationRef";
import Header from "./src/components/Header";
import React from "react";
const switchNavigator = createSwitchNavigator({
loginFlow: createStackNavigator({
Signin: SignInScreen,
Signup: SignUpScreen,
}),
mainFlow: createBottomTabNavigator({
List: createStackNavigator({
RestaurantList: RestaurantScreen,
RestaurantDetail: RestaurantDetailScreen,
}),
Map: MapScreen,
MyDeals: MyDealsScreen,
}),
});
you can do this please check official document for reference
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
const Tab = createBottomTabNavigator();
function MyTabs() {
return (
<Tab.Navigator
initialRouteName="Feed"
screenOptions={{
tabBarActiveTintColor: '#e91e63',
}}
>
<Tab.Screen
name="Feed"
component={Feed}
options={{
tabBarLabel: 'Home',
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="home" color={color} size={size} />
),
}}
/>
<Tab.Screen
name="Notifications"
component={Notifications}
options={{
tabBarLabel: 'Updates',
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="bell" color={color} size={size} />
),
tabBarBadge: 3,
}}
/>
<Tab.Screen
name="Profile"
component={Profile}
options={{
tabBarLabel: 'Profile',
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="account" color={color} size={size} />
),
}}
/>
</Tab.Navigator>
);
}
Related
I have a navigation container that calls a function to my stack. I would like to navigate to a tab screen from a stack screen AND change a state in that tab screen. I have given some code below and a demo. In the demo you can see on screen3(stack screen) I am trying to navigate to Home(tab screen) and change a state so that it renders the MapHome screen.
I am unsure how to pass the state to the bottom tab screen without rendering it elsewhere.
I appreciate any insight more than you know.
here is my demo as well as some code below of App.js. You must run the demo in IOS or android, it will not work for web.
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import {createStackNavigator} from '#react-navigation/stack';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import { MaterialCommunityIcons } from '#expo/vector-icons';
import Home from './Home'
import ListHome from './screens/screen1'
import MapHome from './screens/screen2'
import Screen3 from './screens/screen3'
const Tab = createBottomTabNavigator();
function MyTabs() {
return (
<Stack.Navigator
initialRouteName="Home">
<Stack.Screen name="Home" component= {Home} options={{headerShown: false}}/>
<Stack.Screen name="Screen1" component= {ListHome} options={{headerShown: false}}/>
<Stack.Screen name="Screen2" component= {MapHome} options={{headerShown: false}}/>
</Stack.Navigator>
);
}
export default function App() {
return (
<NavigationContainer>
<Tab.Navigator
initialRouteName="Home"
screenOptions={{
tabBarActiveTintColor: '#F60081',
tabBarInactiveTintColor: '#4d4d4d',
tabBarStyle: {
backgroundColor: '#d1cfcf',
borderTopColor: 'transparent',
},
}}
>
<Tab.Screen
name="Home"
component={MyTabs}
options={{
tabBarLabel: 'Home',
headerShown: false,
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="home" color={color} size={size} />
),
}}
/>
<Tab.Screen
name="Screen3"
component={Screen3}
options={{
tabBarLabel: 'Screen3',
headerShown: false,
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="account-group" color={color} size={size} />
),
}}
/>
</Tab.Navigator>
</NavigationContainer>
);
}
const Stack = createStackNavigator();
You can pass a parameter from Screen3 to the Home screen.
I have forked your demo and did some small refactoring (including changing from Class to Function components just for preference) so you may need to adapt it to your needs. You can find it here.
In Screen3 you can modify your onPress logic to the following:
navigation.navigate('Home', {
screen: 'Home',
params: {
componentToShow: 'Screen2'
}
});
Here's a breakdown of why you are seeing Home twice:
navigation.navigate('Home', { // <-- Tab.Screen name.
screen: 'Home', // <-- Stack.Screen name.
params: {
componentToShow: 'Screen2'
}
});
With this code you are now passing a route.param to the Home screen. I've included a useEffect to run any time route.params changes.
const [whichComponentToShow, setComponentToShow] = React.useState("Screen1");
React.useEffect(() => {
if(route.params && route.params.componentToShow) {
setComponentToShow(route.params.componentToShow);
}
}, [route.params]);
Now, whenever a User navigates to the Home screen and a componentToShow route parameter is provided, the Home screen will update.
I tried following this tutorial https://www.reactnativeschool.com/integrating-react-navigation-back-button-with-a-webview.
Here is my Index.js/App.js code. Any guidance mainly HOW TO ADD adding natigationOptions to Stack.Screen.
import React, { useEffect } from "react";
import { StyleSheet, Text, View } from "react-native";
import { NavigationContainer } from "#react-navigation/native";
import {
createStackNavigator,
HeaderBackButton, // new import
} from "#react-navigation/stack";
import Home from "./screens/Home";
import Details from "./screens/Details";
import Icon from "react-native-vector-icons/FontAwesome";
const Stack = createStackNavigator();
const App = () => {
return (
<NavigationContainer>
<Stack.Navigator
screenOptions={{
headerShown: true,
}}
>
<Stack.Screen name="Home" component={Tabs} />
<Stack.Screen
name="Details"
component={Details}
options={({ navigation }) => ({
headerTitle: "Details",
headerLeft: (props) => {
const headerLeftInfo = navigation.getParam("headerLeftInfo");
if (headerLeftInfo) {
return (
<HeaderBackButton
{...props}
title={headerLeftInfo.title}
onPress={headerLeftInfo.onPress}
/>
);
}
return <HeaderBackButton {...props} />;
},
})}
/>
</Stack.Navigator>
</NavigationContainer>
);
};
export default App;
const styles = StyleSheet.create({});
How to add navigationOptions like the code below:
const App = createStackNavigator({
Index: {
screen: Index,
navigationOptions: {
headerTitle: 'Index',
},
},
Details: {
screen: Details,
navigationOptions: ({ navigation }) => ({
headerTitle: 'Details',
}),
},
});
I have a main navigator in app.js
import React from 'react';
import LoginScreen from './src/screens/LoginScreen';
import HomeScreen from './src/screens/HomeScreen';
import { Image } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { Constans } from './src/constants/Constant';
import SignupScreen from './src/screens/SignupScreen';
import { EventScreen } from './src/screens/EventScreen';
const navigator = createStackNavigator(
{
Login: {
screen: LoginScreen,
navigationOptions: {
headerShown: false
}
},
SignUp: {
screen: SignupScreen,
navigationOptions: {
headerShown: false
}
},
Home: {
screen: HomeScreen,
navigationOptions: {
headerLeft:()=>false,
headerTitle:()=> (
<Image style={{width:35,height:35}} source={Constans.logoImage}/>
)
}
},
Event:{
screen:EventScreen,
navigationOptions: {
headerLeft:()=>false,
headerTitle:()=> (
<Image style={{width:35,height:35}} source={Constans.logoImage}/>
)
}
}
},
{
initialRouteName: 'Home'
}
);
const AppContainer = createAppContainer(navigator);
export default class App extends React.Component {
render() {
return <AppContainer />;
}
}
and when I go HomeScreen I have also menu navigator.
import React from 'react';
import Icon from 'react-native-vector-icons/FontAwesome';
import { NavigationContainer } from '#react-navigation/native';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import { TabEventsScreen } from './TabEventsScreen';
import { TabForYouScreen } from './TabForYouScreen';
import { TabProfileScreen } from './TabProfileScreen';
const Tab = createBottomTabNavigator();
export default function HomeScreen() {
return (
<NavigationContainer>
<Tab.Navigator
screenOptions=
{
({ route }) =>
(
{
tabBarIcon: ({ focused, color }) =>
{
return <Icon
name={route.name === 'Explore' ? "globe" : route.name === 'Profile' ? 'user' : route.name === 'Wallet' ? 'money' :'star'}
size={focused ? 32: 24}
color={color} />;
}
}
)
}
tabBarOptions=
{
{
activeTintColor: '#1F7A8C',
inactiveTintColor: 'gray',
}
}>
<Tab.Screen name="Explore" component={TabEventsScreen} />
<Tab.Screen name="For You" component={TabForYouScreen} />
<Tab.Screen name="Wallet" component={TabProfileScreen} />
<Tab.Screen name="Profile" component={TabProfileScreen} />
</Tab.Navigator>
</NavigationContainer>
);
}
in one tab screen I am trying to navigate Event screen of main navigator. How can I do it?
import React, { useState, useEffect } from 'react';
import { Constans } from './../constants/Constant';
import { View, ImageBackground, Text, ScrollView } from 'react-native';
import { TabEventsScreenStyle } from './../styles/TabEventsScreenStyle';
import { IncomingEvents } from './../services/TabEventsService';
import { EventCard } from './../components/Eventcard'
export function TabEventsScreen({navigation}) {
const [events, setEvents] = useState([]);
const [page, setPage] = useState(1);
_getEvents = () => {
return IncomingEvents(1, page, 20);
}
useEffect(() => {
setEvents(_getEvents().Events);
});
_OnButtonPress=(key)=>{
console.log(navigation)
navigation.navigate('Event',{itemId:key});
}
return (
<ScrollView>
<ImageBackground source={Constans.homeBackGroundImage} style={TabEventsScreenStyle.backgroundImage} >
<Text style={TabEventsScreenStyle.title}>Incoming Events</Text>
<View>
{
events.map(el =>
<Text style={TabEventsScreenStyle.text} onPress={()=> this._OnButtonPress(el.key)}>
<EventCard key={el.key} data={el}></EventCard>
</Text>
)
}
</View>
</ImageBackground>
</ScrollView>
);
}
my error is
The action 'NAVIGATE' with payload
{"name":"Event","params":{"itemId":1}} was not handled by any
navigator.
Do you have a screen named 'Event'?
If you're trying to navigate to a screen in a nested navigator, see
https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nested-navigator.
I also tried
const parent_nav=navigation.dangerouslyGetParent();
console.log(navigation);
parent_nav.navigate('Event',{itemId:key});
but parent_nav is undefined
Thanks in advance
You can navigate as if all screens were at the same level.
Navigation actions are handled by current navigator and bubble up if couldn't be handled
For example, if you're calling navigation.goBack() in a nested screen, it'll only go back in the parent navigator if you're already on the first screen of the navigator. Other actions such as navigate work similarly, i.e. navigation will happen in the nested navigator and if the nested navigator couldn't handle it, then the parent navigator will try to handle it. In the above example, when calling navigate('Messages'), inside Feed screen, the nested tab navigator will handle it, but if you call navigate('Settings'), the parent stack navigator will handle it.
The source.
When you navigate, it will try to find your screen in the current navigation and if it failed, then will try with the parent until the root navigation.
Wrap your AppContainer with NavigationContainer instead of the TabNavigator, so that both the StackNavigator and TabNavigator use the same navigation prop
export default class App extends React.Component {
render() {
return(
<NavigationContainer>
<AppContainer />
<NavigationContainer/>
)}
}
And remove NavigationContainer from the TabNavigator
Here is how I nested Stack and Tab Navigator
import React from 'react';
import {Dimensions, StatusBar, StyleSheet} from 'react-native';
import {createMaterialBottomTabNavigator} from '#react-navigation/material-bottom-tabs';
import {NavigationContainer} from '#react-navigation/native';
import {createStackNavigator} from '#react-navigation/stack';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import AScreen from './AScreen';
import BScreen from './BScreen';
import CScreen from './CScreen';
import DScreen from './DScreen';
import A from './a';
import B from './B';
import C from './C';
import D from './D';
const Tab = createMaterialBottomTabNavigator();
const Stack = createStackNavigator();
const BottomTab = () => {
return (
<Tab.Navigator
activeColor="#ff6362"
backBehavior="initialRoute"
barStyle={{backgroundColor: '#000000'}}>
<Tab.Screen
name="A"
component={AScreen}
options={{
tabBarLabel: 'A',
tabBarIcon: ({color}) => (
<MaterialCommunityIcons name="book-open" color={color} size={26} />
),
}}
/>
<Tab.Screen
name="B"
component={BScreen}
options={{
tabBarLabel: 'B',
tabBarIcon: ({color}) => (
<MaterialIcons name="people" color={color} size={26} />
),
}}
/>
<Tab.Screen
name="C"
component={CScreen}
options={{
tabBarLabel: 'C',
tabBarIcon: ({color}) => (
<MaterialIcons name="people" color={color} size={26} />
),
}}
/>
<Tab.Screen
name="D"
component={DScreen}
options={{
tabBarLabel: 'D',
tabBarIcon: ({color}) => (
<MaterialIcons name="person-pin" color={color} size={26} />
),
}}
/>
</Tab.Navigator>
);
};
export default function AdminScreen(props) {
return (
<NavigationContainer>
<StatusBar hidden />
<Stack.Navigator headerMode="none">
<Stack.Screen name="BottomTab" component={BottomTab} />
<Stack.Screen name="A" component={A} />
<Stack.Screen name="B" component={B} />
<Stack.Screen name="C" component={C} />
<Stack.Screen name="D" component={D} />
</Stack.Navigator>
</NavigationContainer>
);
}
I have created a navigator with 4 tab navigator screens->Home, Search, Upload and Library; and I have stack navigation screens like Sign up, log in, home tabs, and video.
Now, I want to remove the bottom tab bar from the Upload screen but am not sure whether it is possible?
Below is the exact code that I have written:
import React from 'react';
import 'react-native-gesture-handler';
import {StatusBar} from 'react-native';
import {NavigationContainer, DarkTheme} from '#react-navigation/native';
import {createStackNavigator} from '#react-navigation/stack';
import {createMaterialBottomTabNavigator} from '#react-navigation/material-bottom-tabs';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialIcons';
import Home from '../screens/Home';
import Search from '../screens/Search';
import Library from '../screens/Library';
import ProfileAuthor from '../screens/ProffileAuthor';
import Shoot from '../screens/Shoot';
import LoginScreen from '../screens/LoginScreen';
import SignUp from '../screens/SignUp';
const Stack = createStackNavigator();
const Tab = createMaterialBottomTabNavigator();
function myTabs() {
return (
<Tab.Navigator
initialRouteName="Home"
activeColor="#000"
inactiveColor="#000"
barStyle={{
backgroundColor: '#FFF',
}}>
<Tab.Screen
name="Home"
component={Home}
options={{
title: 'Home',
tabBarLabel: 'Home',
tabBarIcon: ({color}) => (
<MaterialCommunityIcons color={color} name="home" size={26} />
),
}}
/>
<Tab.Screen
name="Search"
component={Search}
options={{
title: 'Search',
tabBarLabel: 'Search',
tabBarIcon: ({color}) => (
<MaterialCommunityIcons color={color} name="search" size={26} />
),
}}
/>
<Tab.Screen
name="Upload"
component={Shoot}
options={{
title: 'Upload',
tabBarLabel: 'Upload',
tabBarIcon: ({color}) => (
<MaterialCommunityIcons color={color} name="add-box" size={26} />
),
}}
/>
<Tab.Screen
name="Library"
component={Library}
options={{
title: 'Library',
tabBarLabel: 'Library',
tabBarIcon: ({color}) => (
<MaterialCommunityIcons
color={color}
name="person-outline"
size={26}
/>
),
}}
/>
</Tab.Navigator>
);
}
const Routes = () => {
return (
<NavigationContainer theme={DarkTheme}>
<Stack.Navigator>
<Stack.Screen
name="login"
component={LoginScreen}
options={{
header: () => null,
}}
/>
<Stack.Screen
name="signup"
component={SignUp}
options={{
header: () => null,
}}
/>
<Stack.Screen
name="Home"
component={myTabs}
options={{
header: () => null,
}}
/>
<Stack.Screen
name="Video"
component={ProfileAuthor}
options={{
header: () => null,
}}
/>
</Stack.Navigator>
</NavigationContainer>
);
};
export default Routes;
could anyone please tell me whether it is possible in this structure, if yes then how to implement? any help would be great.
tabBarVisible: false
It is working when you used createBottomTabNavigator from #react-navigation/bottom-tabs. but if you will use createMaterialBottomTabNavigator from #react-navigation/material-bottom-tabs to create bottom tabs, it's not working. createMaterialBottomTabNavigator can't hide the tab bar, you can see that there is no such option in docs. You should try to nest the bottom-tabs navigator inside the stack navigator if you want it to disappear on the other screens of the stack navigator. The below code is for the hide tab bar in createBottomTabNavigator.
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
const BottomTabs = createBottomTabNavigator();
<BottomTabs.Navigator>
<BottomTabs.Screen name={AppRoute.MORE} component={MoreStack}
options={({ route }) => ({
tabBarVisible: getTabBarVisibility(route),
tabBarLabel: languages.stack_More
})}
/>
</BottomTabs.Navigator>
const getTabBarVisibility = (route: any) => {
const routeName = route.state ? route.state.routes[route.state.index].name: '';
if (routeName === AppRoute.PROFILE
|| routeName === AppRoute.HELP_CENTER
|| routeName === AppRoute.TERMS_CONDITION) {
return false;
}
return true;
}
I'm currently doing a react-native course and I started implementing my own code for the styling part. I have an issue with icons not showing and I can't seem to find a problem. I have been trying to implement the icon on the bookcase tab, but it doesn't appear on it, and also I don't get an error message on the expo.
import React from 'react';
import { createBottomTabNavigator } from 'react-navigation-tabs'
import { createAppContainer, createSwitchNavigator} from 'react-navigation';
import { View, StyleSheet } from 'react-native';
import { Text, Button, Input } from 'react-native-elements';
import {createStackNavigator} from 'react-navigation-stack';
import { Ionicons } from '#expo/vector-icons';
const switchNavigator = createSwitchNavigator({
ResolveAuth: ResolveAuthScreen,
loginFlow: createStackNavigator ({
Signin: signin,
Signup: signup,
}),
mainFlow: createBottomTabNavigator({
Bookcase: bookcase,
Explore: explore,
Profile: profile
}, {
tabBarOptions: {
activeTintColor: 'red',
inactiveTintColor: 'grey',
showIcon: true,
}},
{
Bookcase:{
screen:bookcase,
navigationOptions:{
tabBarLabel:'Bookcase',
tabBarIcon:({ tintColor })=>(
<Ionicons name="ios-home" color={tintColor} size={2}/>
)
}
}
}
)
});
const App = createAppContainer(switchNavigator)
export default () => {
return (
<AuthProvider>
<App ref ={(navigator) => {setNavigator(navigator)}} />
</AuthProvider>
);
};
If you are using react-navigation v5, then is preferred way to implement bottomStackNavigation. This code will render icons and its color according to active as well as inactive state. You have to pass options property to individual screen tab in react-navigation v5.
const BottomNavigator = () => {
const BottomNavigation = createBottomTabNavigator();
return (
<BottomNavigation.Navigator>
<BottomNavigation.Screen
name="Home"
component={HomeStack}
options={{
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="home" color={color} size={size} />
),
}}
/>
<BottomNavigation.Screen
name="Exam"
component={ExamStack}
options={{
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="book" color={color} size={size} />
),
}}
/>
</BottomNavigation.Navigator>
);
};