I am trying to implement the bottom tab using react-navigation v5 but I am facing an issue. The top header is not showing in-app, When I implement header style is not showing. Could someone please help me how to resolve this issue? I really tried hard but was not able to achieve it.
Thanks
Note: I am using react-navigation v5.
import React from "react";
import {
FontAwesome5,
Ionicons,
Feather,
FontAwesome,
} from "#expo/vector-icons";
import { NavigationContainer } from "#react-navigation/native";
import { createBottomTabNavigator } from "#react-navigation/bottom-tabs";
import MainAppNavigator from "../navigations/AppNavigator";
const Tab = createBottomTabNavigator();
const AppNavigator = () => (
<Tab.Navigator initialRouteName="Home">
<Tab.Screen
name="Home"
component={MainAppNavigator}
options={{
headerTitle: "Simply Dispatch",
headerTintColor: "#fff",
headerStyle: {
backgroundColor: "#495AEC",
},
tabBarIcon: ({ color, size }) => (
<FontAwesome name="truck" size={size} color={color} />
),
}}
/>
</Tab.Navigator>
);
export default AppNavigator;
Related
import * as React from "react";
import { SafeAreaView, useWindowDimensions } from "react-native";
import { createDrawerNavigator } from '#react-navigation/drawer';
import { NavigationContainer } from "#react-navigation/native";
import { RegistrationScreen } from './src/screens/Registration/RegistrationScreen';
import {LoginScreen} from './src/screens/Login/LoginScreen';
import {NewAnuncioScreen} from './src/screens/NewAnuncio/NewAnuncioScreen';
import { FeedScreen } from "./src/screens/Feed/FeedScreen";
import { FontAwesome, AntDesign, FontAwesome5, Entypo} from '#expo/vector-icons';
const Drawer = createDrawerNavigator()
const App = () => {
const dimensions = useWindowDimensions();
return (
<SafeAreaView style={{ flex: 1 }}>
<NavigationContainer>
<Drawer.Navigator initialRouteName="Feed" screenOptions={{
headerStyle: { backgroundColor: "#f2bc1b" , height: 55},
drawerType: dimensions.width >= 821 ? 'permanent' : 'front',
overlayColor: 'transparent',
drawerContent:{CustomDrawerContent}
}}>
<Drawer.Screen name="Feed" component={FeedScreen}/>
<Drawer.Screen name="Registration" component={RegistrationScreen} options={{ headerShown: false }} />
<Drawer.Screen name="Login" component={LoginScreen} options={{ headerShown: false }} />
{/* <Drawer.Screen name="Criar Anúncio" component={NewAnuncioScreen} /> */}
</Drawer.Navigator>
</NavigationContainer>
</SafeAreaView>
)
}
export default App;
**I want the header´s structures can vary like that:
enter image description here
enter image description here
But i don´t know how to make this.
If someone help me i thanks.**
You should pass the Drawer props to your custom drawer and retrieve the navigation index.
drawerContent = {(props) => <CustomDrawerContent {...props} />}
Then
const CustomDrawerContent = (props) => {
const [index, setIndex] = useState(0)
useEffect(() => {
setIndex(props.state.index);
}, [props])
...
Now according to this index you can change the appearance and the behavior your drawer content.
I have 3 bottom tabs in my home screen stack. The first tab, which is home, has some buttons on it. On click of each button, a new screen is supposed to be displayed. So far, it hasn't worked. I keep getting this error:
The action 'NAVIGATE' with payload {"name":"ScreenName"} was not handled by any navigator.
Do you have a screen named 'ScreenName'?
Here's an overview of my Navigators:
StackNavigator -> Home Screen (BottomNavigator) -> HomeStackScreen(Stack Navigtor)...others are just screens in the bottom navigator for now
In code:
import * as React from 'react'
import { StatusBar, View, StyleSheet } from 'react-native'
import { NavigationContainer, Theme } from '#react-navigation/native'
import { createNativeStackNavigator } from '#react-navigation/native-stack'
import {createBottomTabNavigator} from '#react-navigation/bottom-tabs'
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'
import { navigationRef } from './NavigationService'
const Stack = createNativeStackNavigator()
const AuthStack = createNativeStackNavigator()
const BottomStack = createBottomTabNavigator()
const HomeStack = createNativeStackNavigator()
import Home from 'app/screens/Home'
import Notifications from 'app/screens/WearNotifications'
import ScanCloth from 'app/screens/ScanCloth'
import MyWardrobe from 'app/screens/MyWardrobe'
const HomeStackScreen = () => { // problem occurs with the screens in this navigator
return <HomeStack.Navigator
screenOptions={{
headerShown: false,
}}
>
<HomeStack.Screen
name="Home"
component={Home}
/>
<HomeStack.Screen
name="ScreenName"
component={ComponentToDisplayOnClick}
/>
<HomeStack.Screen
name="ScreenName"
component={ComponentToDisplayOnClick}
/>
</HomeStack.Navigator>
}
const LoggedInNavigator = () => (
<BottomStack.Navigator
screenOptions={() => ({
tabBarStyle: {
backgroundColor: '#1B1464',
height: 65,
borderTopLeftRadius: 20,
borderTopRightRadius: 20,
paddingBottom: 10,
paddingTop: 10
},
headerShown: false,
tabBarLabel: () => {return null}
})}
>
<BottomStack.Screen
name="HomeStack"
component={HomeStackScreen}
options={{
tabBarIcon: ({color}) => (
<View
style={styles.bottomNavCircle}
>
<MaterialCommunityIcons
name="home"
color={color}
size={30}
/>
</View>
)
}}
/>
... other bottom tabs
</BottomStack.Navigator>
)
const App: React.FC = () => {
return (
<NavigationContainer ref={navigationRef} >
<Stack.Navigator
screenOptions={{
headerShown: false,
}}
>
<Stack.Screen
name="UnAuthenticated"
component={AuthNavigator}
/>
<Stack.Screen
name="Home"
component={LoggedInNavigator}
/>
</Stack.Navigator>
</NavigationContainer>
)
}
export default App
Is there anything I'm doing wrong? I only want to navigate to a different screen on my home page, which is the first tab of the bottom navigator. Haven't seen any useful articles for this, all are showing stand alone use cases for navigators.
I started with React Native 12 days ago, from a Flutter background. Thanks
I solved this question by delaying the navigation call method invocation with ()=> arrow function. It navigates now, however, the bottom navigation bar still persists. Is there a way to hide the bottom bar on navigation? Thanks
So I'm pretty new to programming and while making my first React Native project I got stuck trying to create a modal that's always open behind the bottom nav (The reason I want it that way is for it to be like a cart where whenever the user adds something it'll slightly nudge up to show something new was added), I did manage to get the modal behind the tab but now the bottom tab is unresponsive, does anyone have a fix for this?
my app.js
import React from 'react';
import { NavigationContainer } from '#react-navigation/native';
import Header from './components/Header';
import RootStack from './components/RootStack';
const App = () => {
return (
<>
<Header />
<NavigationContainer>
<RootStack />
</NavigationContainer>
</>
);
};
export default App;
RootStack:
import React from 'react'
import { createStackNavigator } from '#react-navigation/stack'
import CarrinhoModal from '../CarrinhoModal'
import TabNavigator from '../TabNavigator';
const StackNavigation = createStackNavigator();
const RootStack = () => {
return (
<>
<StackNavigation.Navigator headerMode='none' >
<StackNavigation.Screen name='Tab' component={TabNavigator} />
<StackNavigation.Screen name='Carrinho' getComponent={CarrinhoModal} />
</StackNavigation.Navigator>
</>
)
}
export default RootStack;
TabNavigator:
import React from 'react';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import Home from '../../pages/Home'
import Perfil from '../../pages/Perfil'
import CarrinhoModal from '../CarrinhoModal';
const Tab = createBottomTabNavigator();
const TabNavigator = ({ navigation }) => {
return (
<>
<Tab.Navigator
initialRouteName="Home"
tabBarOptions={{
activeTintColor: 'white',
inactiveTintColor: 'gray',
activeBackgroundColor: '#1E4B75',
inactiveBackgroundColor: '#1E4B75'
}}
>
{/* <Tab.Screen
name='Carrinho'
component={CarrinhoModal}
listeners={( navigation ) => ({
tabPress: e => {
e.preventDefault();
navigation.navigate(CarrinhoModal)
}
})}
/> */}
<Tab.Screen name='Home' component={Home} />
<Tab.Screen name='Perfil' component={Perfil} />
</Tab.Navigator>
<CarrinhoModal />
</>
)
}
export default TabNavigator;
CarrinhoModal:
import React, { useRef } from 'react'
import { Modalize } from 'react-native-modalize';
import Carrinho from '../../pages/Carrinho';
const CarrinhoModal = (props) => {
return (
<>
<Modalize
ref={props.modalRef}
alwaysOpen={75}
modalHeight={400}
handlePosition='inside'
>
<Carrinho />
</Modalize>
</>
)
}
export default CarrinhoModal;
As I said I'm pretty new in all this so if you could point me in the right direction it would be much apreciated!
I have just started learning React Native. I am trying to insert bottom menu tabs on my first app.
I am using this code on Tabs.js (this is just the export part):
export default function Tabs() {
return (
<NavigationContainer>
<MyTabs />
</NavigationContainer>
);
}
Unfortunately, I don't know how to call it to my main App file (this is just one of my attempts):
import * as React from 'react';
import { Text, View } from 'react-native';
import Tabs from './Tabs.js';
Tabs();
I've read about exporting default function, but I don't understand how to use it in my main App file. I'm sure that this is a syntax issue.
Also, I am planning to add a background colour to all tabs. Any advice?
Thank you.
UPDATE:
This is my Tabs file.
import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import { MaterialCommunityIcons } from '#expo/vector-icons';
const Tabs = () => {
function Feed() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text></Text>
</View>
);
}
function Profile() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text></Text>
</View>
);
}
function MainPage() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text></Text>
</View>
);
}
const Tab = createBottomTabNavigator();
function MyTabs() {
return (
<Tab.Navigator
initialRouteName="Feed"
tabBarOptions={{
activeTintColor: '#e91e63',
}}
>
<Tab.Screen
name="Feed"
component={Feed}
options={{
tabBarLabel: '',
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="home" color={color} size={size} />
),
}}
/>
<Tab.Screen
name="MainPage"
component={MainPage}
options={{
tabBarLabel: '',
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="pill" color={color} size={size} />
),
}}
/>
<Tab.Screen
name="Profile"
component={Profile}
options={{
tabBarLabel: '',
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="format-list-text" color={color} size={size} />
),
}}
/>
</Tab.Navigator>
);
}
return (
<NavigationContainer>
<MyTabs />
</NavigationContainer>
);
}
export default Tabs
This is my main App file.
import * as React from 'react';
import { Text, View } from 'react-native';
import Tabs from './Tabs.js';
const App=()=>{
return <Tabs />
}
Make sure to export the App as default. You most probably have a file called index.js in the root folder and that is importing your App component.
Your App.js file should look like this:
import * as React from 'react';
import { Text, View } from 'react-native';
import Tabs from './Tabs.js';
export default const App=()=>{
return <Tabs />
}
And then your index.js file looks like this:
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => App);
You don't necessarily have to export as default, because you can only have one default export. If you export App as default you import it like this: import App from './App'; and if you export without a default, you have to import like this: import {App} from './App'
And to get an advice how to add background color to the tabs, check here: How to set the background color of Tab.Navigator?
you basically call it like would call a component
btw your Tabs should export like this
const Tabs=()=>{
/...
}
export default Tabs
const App=()=>{
return <Tabs />
}
I am trying to create a BottomTab navigator and when I refresh the file tabs.js, the icon is not showing at expo mobile app.
I think the main issue is at tabBarIcon
File tab.js
import React from "react"
import {
View,
Image,
TouchableOpacity
} from "react-native"
import {createBottomTabNavigator, BottomTabBar} from "#react-navigation/bottom-tabs"
import Home from "../screens/Home"
import { COLORS, icons } from "../constants"
import {Ionicons} from "#expo/vector-icons"
const Tab = createBottomTabNavigator();
const Tabs = () => {
return (
<Tab.Navigator
>
<Tab.Screen
name="Home"
component={Home}
s
options={{
tabBarIcon: ({focused})=> {
<Ionicons name="cart-outline" size={16} color= "#000000"
}
}}
/>
</Tab.Navigator>
)
}
export default Tabs;
Home.js File
Thanks for help
This will work
<Tab.Navigator>
<Tab.Screen
name="Home"
component={Dashboard}
options={{
tabBarIcon: ({}) => (
<Ionicons name="cart-outline" size={16} color="#000000" />
),
}}
/>
</Tab.Navigator>