I am new to React-Native and I am trying to make a Home Page in my app and at the same time declare some components.
Here is the code I tried to implement
import React from "react";
import {createAppContainer} from '#react-navigation/native'
import {createStackNavigator} from '#react-navigation/stack'
import Buttons from "./Buttons.js"
import PlaylistScreen from "./react/screens/PlaylistScreen.js"
// const navigator = createStackNavigator (
// {
// ButtonsScreen: Buttons,
// Playlist: {
// screen: Playlist
// }
// },
// {
// initialRouteName:'ButtonsScreen',
// defaultNavigationOptions: {
// title:"App"
// }
// }
// );
const Stack = createStackNavigator();
function MyStack() {
return (
<Stack.Navigator
initialRouteName="Buttons"
headerMode="screen"
screenOptions={{
headerTintColor: 'white',
headerStyle: { backgroundColor: 'tomato' },
}}
>
<Stack.Screen
name="ButtonsScreen"
component={Buttons}
options={{
title: 'Awesome app',
}}
/>
<Stack.Screen
name="Playlist"
component={ {screen: PlaylistScreen}}
options={{
title: 'My profile',
}}
/>
</Stack.Navigator>
);
}
export default createAppContainer(Stack);
However, I have encounterd problems, giving me those errors:
enter image description here
Please help me, I would be very grateful. :)
https://reactnavigation.org/docs/stack-navigator
import { createStackNavigator } from '#react-navigation/stack';
const Stack = createStackNavigator();
function MyStack() {
return (
<Stack.Navigator>
<Stack.Screen name="Home" component={Home} />
<Stack.Screen name="Notifications" component={Notifications} />
<Stack.Screen name="Profile" component={Profile} />
<Stack.Screen name="Settings" component={Settings} />
</Stack.Navigator>
);
}
I have reformatted your code by wrapping your stack navigator inside navigation container and exported MyStack component to be like this:
import {NavigationContainer} from '#react-navigation/native';
const Stack = createStackNavigator();
function MyStack() {
return (
<NavigationContainer>
<Stack.Navigator
initialRouteName="Buttons"
headerMode="screen"
screenOptions={{
headerTintColor: 'white',
headerStyle: { backgroundColor: 'tomato' },
}}
>
<Stack.Screen
name="ButtonsScreen"
component={Buttons}
options={{
title: 'Awesome app',
}}
/>
<Stack.Screen
name="Playlist"
component={ {screen: PlaylistScreen}}
options={{
title: 'My profile',
}}
/>
</Stack.Navigator>
</NavigationContainer>
);
}
export default MyStack;
Related
I'm trying to mix stack navigation and tab navigation i have 14 Screens:
Search,
Home,
CartTab,
SideBar,
Details,
PriceComparison,
ShopByCategory,
ShopByStore,
CategoryPage,
CategoryFilter,
Checkout,
Login,
Register,
ForgotPassword
I want to have Search, Home, CartTab, Sidebar as bottom navigation and the other pages as stack navigation, with SearchBy pages, Details, Price Comparison not displaying the bottom tab. I'm new to react native and i have been trying diffrent solutions however 1) i'm not able to remove the bottomtab from the wanted screens and 2) using navigation.navigate is returning me errores example using navigation.navigate('Category'); i get an error The action 'NAVIGATE' with payload {"name":"Category"} was not handled by any navigator. Do you have a screen named 'Category'?
This is my code :
StackNavigator.js:
import React from 'react'
import { createStackNavigator } from '#react-navigation/stack';
import { NavigationContainer } from '#react-navigation/native';
import {
CartTab,
Details,
Home,
Notification,
PriceComparison,
Search,
SplashScreen,
ShopByCategory,
ShopByStore,
CategoryPage,
Checkout,
CategoryFilter,
Login,
Register,
ForgotPassword
} from '../screens';
import { SideBar } from './../components';
export const MainStackNavigator = () => {
const Stack = createStackNavigator();
return (
<Stack.Navigator screenOptions={{headerShown: false}} initialRouteName={'Home'}>
{/*<Stack.Screen name="SplashScreen" component={SplashScreen} /> */}
<Stack.Screen name="Login" component={Login} options={{ tabBarVisible: false }} />
<Stack.Screen name="Register" component={Register} options={{ tabBarVisible: false }} />
<Stack.Screen name="Recovery" component={ForgotPassword} options={{ tabBarVisible: false }} />
<Stack.Screen name="Home" component={Home} options={{ tabBarVisible: false }} />
<Stack.Screen name="Notification" component={Notification} />
<Stack.Screen name="Comparison" component={PriceComparison} options={{ tabBarVisible: false }} />
<Stack.Screen name="ShopByCategory" component={ShopByCategory}/>
<Stack.Screen name="ShopByStore" component={ShopByStore}/>
{/*<Stack.Screen name="Category" component={CategoryPage}/>
<Stack.Screen name="CategoryFilter" component={CategoryFilter}/>*/}
</Stack.Navigator>
);
}
export const CartStackNavigator = () => {
const Stack = createStackNavigator();
return (
<Stack.Navigator screenOptions={{headerShown: false}}>
<Stack.Screen name="Cart" component={CartTab} />
<Stack.Screen name="Checkout" component={Checkout}/>
</Stack.Navigator>
);
}
export const SearchStackNavigator = () => {
const Stack = createStackNavigator();
return (
<Stack.Navigator screenOptions={{headerShown: false}}>
<Stack.Screen name="Search" component={Search} />
<Stack.Screen name="Details" component={Details}/>
</Stack.Navigator>
);
}
export const SidebarStackNavigator = () => {
const Stack = createStackNavigator();
return (
<Stack.Navigator screenOptions={{headerShown: false}}>
<Stack.Screen name="Sidebar" component={SideBar} />
<Stack.Screen name="ShopByCategory" component={ShopByCategory}/>
<Stack.Screen name="ShopByStore" component={ShopByStore}/>
<Stack.Screen name="Category" component={CategoryPage}/>
</Stack.Navigator>
);
}
TabNavigation.js:
import 'react-native-gesture-handler';
import React from 'react';
import {createBottomTabNavigator} from '#react-navigation/bottom-tabs';
import Ionicons from 'react-native-vector-icons/Ionicons';
import {COLORS} from '../constants';
import { CartStackNavigator, MainStackNavigator, SearchStackNavigator, SidebarStackNavigator }
from '../navigation/StackNavigator';
import { useStateContext } from '../context/StateContext';
const Tab = createBottomTabNavigator();
export const TabNavigation = ({navigation}) => {
return (
<Tab.Navigator
screenOptions={({ route }) => ({
headerShown: false,
tabBarIcon: ({ focused, color, size }) => {
let iconName;
if (route.name === 'Home') {
iconName = focused
? 'home'
: 'home-outline';
} else if (route.name === 'Cart') {
iconName = focused ? 'cart' : 'cart-outline';
} else if (route.name === 'Search') {
iconName = focused ? 'search' : 'search-outline';
} else if (route.name === 'SideBar') {
iconName = focused ? 'grid' : 'grid-outline';
}
// You can return any component that you like here!
return <Ionicons name={iconName} size={size} color={color} />;
},
tabBarActiveTintColor: COLORS.primary,
tabBarInactiveTintColor: 'gray',
})}
>
<Tab.Screen name="Home" component={MainStackNavigator} />
<Tab.Screen name="Search" component={SearchStackNavigator} />
<Tab.Screen name="Cart" component={CartStackNavigator} options={{ tabBarBadge: 3, tabBarBadgeStyle: { backgroundColor: COLORS.primary, marginTop: -5 } }}/>
<Tab.Screen name="SideBar" component={SidebarStackNavigator} />
</Tab.Navigator>
);
};
App.js:
import React from "react";
import { createStackNavigator } from '#react-navigation/stack';
import { NavigationContainer } from '#react-navigation/native';
import CustomDrawer from './navigation/CustomDrawer'
import {StateContext} from './context/StateContext'
import { Home, CartTab, Search, SideBar, SplashScreen, Notification, Login, Register,
ForgotPassword } from "./screens";
import { Header, TabNavigation } from "./components";
import { StripeProvider } from '#stripe/stripe-react-native';
const Stack = createStackNavigator();
const App = () => {
const [isLoading, setIsLoading] = React.useState(true);
React.useEffect(() => {
setTimeout(() => {
setIsLoading(false);
}, 3000);
}, []);
if (isLoading) {
return <SplashScreen />;
}
return (
<StateContext>
<NavigationContainer>
<TabNavigation/>
</NavigationContainer>
</StateContext>
);
}
export default App
Make two different Stacks file one is StackNavigation and other is BottomNavigation . Render your Stack Navigation and with calling the component of TabNavigation
I used the Dummy names of screens . Replace it according to your screen names
Stack navigation
import { createStackNavigator } from '#react-navigation/stack';
import { NavigationContainer } from '#react-navigation/native';
import {
CartTab,
Details,
Home,
} from '../screens';
import {TabNavigation } from '../navigation/StackNavigator';
export const StackNavigator = () => {
const Stack = createStackNavigator();
return (
<Stack.Navigator screenOptions={{headerShown: false}}
initialRouteName={'Home'}>
<Stack.Screen name="Home" component={TabNavigation}/>
<Stack.Screen name="ShopByCategory" component={ShopByCategory}/>
<Stack.Screen name="ShopByStore" component={ShopByStore}/>
<Stack.Screen name="CategoryFilter" component={CategoryFilter}/>
</Stack.Navigator>
);
}
Bottom Tab Navigation
import {createBottomTabNavigator} from '#react-navigation/bottom-tabs';
const Tab = createBottomTabNavigator();
export const TabNavigation = ({navigation}) => {
return (
<Tab.Navigator
screenOptions={({ route }) => ({
headerShown: false}
})}>
<Tab.Screen name="Example" component={Example} />
<Tab.Screen name="Search" component={Search} />
<Tab.Screen name="SideBar" component={SideBar} />
</Tab.Navigator>
);
};
I define my stacknavigation like this
/* eslint-disable prettier/prettier */
import React, {useState} from 'react';
import YourApp from './TabNavigation';
import {createStackNavigator} from '#react-navigation/stack';
import TopTabNavigation from './TopTabNavigation';
const Stack = createStackNavigator();
export default function MyStack() {
const [isShowNavbar, setIsShowNavbar] = useState(false);
const [modalVisible, setModalVisible] = useState(false);
return (
<Stack.Navigator>
<Stack.Screen
name="PilihPasar"
component={PilihPasar}
options={{
title: '',
headerTintColor: '#fff',
headerTitleStyle: {
fontFamily: 'sans-serif-medium',
fontSize: 20,
},
}}
/>
<Stack.Screen
name="Home"
component={Home}
options={{headerShown: false}}
/>
<Stack.Screen
name="All Navigation"
component={YourApp}
options={{headerShown: false}}
/>
in new screen i create this
`
<View>
<TouchableOpacity
style={styles.linearGradient}
onPress={() => {
console.log("Testing");
this.props.navigation.navigate('Home');
}}>
<LinearButton text="Masuk" />
</TouchableOpacity>
</View>
`
The tab navigation not showing because i make home screen in stack navigation, and i create a new screen before home screen. So, i must make home screen in stack navigation so that the two pages are connected to each other.
I can not speak English well.
I get an error when I add useFocusEffect function to app.js file.
Error : Couldn't find a navigation object. Is your component inside NavigationContainer?
App.js
import { useState, useCallback } from "react";
import { NavigationContainer, useFocusEffect, } from "#react-navigation/native";
const Stack = createStackNavigator();
function App() {
const [isLogin, setLogin] = useState("");
useFocusEffect(
useCallback(async() => {
//....
}, [isLogin])
);
return (
<NavigationContainer ref={navigationRef}><Stack.Navigator>
{isLogin == "" ? (
<Stack.Group>
<Stack.Screen
name="Home"
component={Home}
options={{ headerShown: false, title: "Anasayfa" }}
/>
</Stack.Group>
) : (
<Stack.Group screenOptions={{ headerShown: false }}>
<Stack.Screen
name="Conference"
component={Conference}
options={{ title: "", headerTintColor: "#000" }}
/>
</Stack.Group>
)}
</Stack.Navigator>
</NavigationContainer>
)
}
export default App;
I am trying to test my application and I cannot get the navigation to work.
When I test my navigation to go to bottomtabnavigator I have the error:
Error: Element type is invalid: expected a string (for built-in
components) or a class/function (for composite components) but got:
object.
Is it just a syntax error?
Thank you for any help.
App.js
import React, { useState, useEffect } from 'react';
import AppContext from './AppContext';
import {NavigationContainer} from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import Authentication from './Screens/Authentication';
import Login from './Screens/Login';
import Register from './Screens/Register';
const AuthenticationStack = createStackNavigator();
import Splash from './src/components/Splash';
import BottomTabNavigator from './Navigation/StackNavigator';
export default function App() {
const [user, setUser] = useState({ loggedIn: false });
const state = { user, setUser };
const [loading, setLoading] = useState(true);
useEffect(() => {
setTimeout(() => setLoading(false), 2000);
}, []);
if (loading) {
return <Splash />;
}
return (
<AppContext.Provider value={state}>
<NavigationContainer>
{user.loggedIn ? (
<AuthenticationStack.Navigator>
<AuthenticationStack.Screen name="Authentication" component={Authentication} />
<AuthenticationStack.Screen name="Login" component={Login} />
<AuthenticationStack.Screen name="Register" component={Register} />
</AuthenticationStack.Navigator>
) : (
<BottomTabNavigator />
)}
</NavigationContainer>
</AppContext.Provider>
);
}
StackNavigator:
import React from 'react';
import { createStackNavigator} from "#react-navigation/stack";
import { createBottomTabNavigator } from "#react-navigation/bottom-tabs";
import Authentication from '../Screens/Authentication';
import Activities from '../Screens/Activities';
import Login from '../Screens/Login';
import Register from '../Screens/Register';
import Tools from '../Screens/Tools';
import Dashboard from '../Screens/Dashboard';
import Orders from '../Screens/Orders';
import About from '../Screens/About';
import Terms from '../Screens/Terms';
import Completed from '../Screens/Orders/Completed';
import Current from '../Screens/Orders/Current';
import Settings from '../Screens/Settings';
import Contact from '../Screens/Contact';
import Scan from '../Screens/Tools/Scan';
import Products from '../Screens/Tools/Products';
import Tickets from '../Screens/Tools/Tickets';
import Welcome from '../Screens/Welcome';
import i18n from '../src/i18n';
const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();
const screenOptionStyle = {
headerStyle: {
backgroundColor: "#F78400",
},
headerTintColor: "white",
headerBackTitle: "Back",
backgroundColor:'#f7f6f6'
};
const MainStackNavigator = () => {
return (
<Stack.Navigator screenOptions={screenOptionStyle}>
<Stack.Screen name = 'Orders' component = {Orders} options={{ title: i18n.t("orders.title") }}/>
<Stack.Screen name = 'Authentication' component = {Authentication} options={{ title: i18n.t("authentication.title") }}/>
<Stack.Screen name = 'Activities' component = {Activities} options={{ title: i18n.t("activities.title") }}/>
<Stack.Screen name = 'Contact' component = {Contact} options={{ title: i18n.t("contact.title") }}/>
<Stack.Screen name = 'Login' component = {Login} options={{ title: i18n.t("login.title") }}/>
<Stack.Screen name = 'Register' component = {Register} options={{ title: i18n.t("register.title") }}/>
<Stack.Screen name = 'Tools' component = {Tools} options={{ title: i18n.t("tools.title") }}/>
<Stack.Screen name = 'Scan' component = {Scan} options={{ title: i18n.t("scan.title") }}/>
<Stack.Screen name = 'Current' component = {Current} options={{ title: i18n.t("current.title") }}/>
<Stack.Screen name = 'Completed' component = {Completed} options={{ title: i18n.t("completed.title") }}/>
<Stack.Screen name = 'Products' component = {Products} options={{ title: i18n.t("products.title") }}/>
<Stack.Screen name = 'Terms' component = {Terms} options={{ title: i18n.t("terms.title") }}/>
<Stack.Screen name = 'About' component = {About} options={{ title: i18n.t("about.title") }}/>
<Stack.Screen name = 'Tickets' component = {Tickets} options={{ title: i18n.t("tickets.title") }}/>
<Stack.Screen name = 'Dashboard' component = {Dashboard} options={{ title: i18n.t("dashboard.title") }}/>
<Stack.Screen name = 'Settings' component = {Settings} options={{ title: i18n.t("settings.title") }}/>
<Stack.Screen name = 'Welcome' component = {Welcome} options={{ title: i18n.t("welcome.title") }}/>
</Stack.Navigator>
);
}
const BottomTabNavigator = () => {
return (
<Tab.Navigator tabBarOptions={{activeTintColor: 'black',
labelStyle: {fontSize: 12, color: 'white'},
style: {backgroundColor: '#F78400'},
}}>
<Tab.Screen
name={i18n.t("orders.title")}
component={MainStackNavigator}
options={{
tabBarIcon: ({ focused, horizontal, tintColor }) => {
return (
<Image
source={require("../assets/images/orders.png")}
style={styles.icon}
/>
);
}
}}
/>
<Tab.Screen
name={i18n.t("dashboard.title")}
component={Dashboard}
options={{
tabBarIcon: ({ focused, horizontal, tintColor }) => {
return (
<Image
source={require("../assets/images/dashboard.png")}
style={styles.icon}
/>
);
}
}}
/>
<Tab.Screen
name={i18n.t("tools.title")}
component={Tools}
options={{
tabBarIcon: ({ focused, horizontal, tintColor }) => {
return (
<Image
source={require("../assets/images/tools.png")}
style={styles.icon}
/>
);
}
}}
/>
<Tab.Screen
name={i18n.t("settings.title")}
component={SettingsStackNavigator}
options={{
tabBarIcon: ({ focused, horizontal, tintColor }) => {
return (
<Image
source={require("../assets/images/settings.png")}
style={styles.icon}
/>
);
}
}}
/>
</Tab.Navigator>
);
};
export default { MainStackNavigator, BottomTabNavigator };
this error comes because i was using #react-navigation/native and #react-navigation/bottom-tabs of different version
You are exporting a single object, you can do like beloe
export const BottomTabNavigator = () => {
to
import {BottomTabNavigator} from './Navigation/StackNavigator';
Use the same way to export the MainStackNavigator as well
To build off of Raghuvansh's answer, if you run
npm list
You should see all of your current npm packages for the local project.
In my case, my #react-navigation/native package was version 5.8.10, and my #react-navigation/bottom-tabs package was 6.0.5.
I was able to easily fix this by running npm update, which put them both onto the same package version.
I was facing trouble using createDrawerNavigator. I was following there Docs and try to implement something like this:
import { createStackNavigator } from '#react-navigation/stack';
import { createDrawerNavigator } from '#react-navigation/drawer';
const MenuNavigator = createStackNavigator();
const HeaderOptions = {
headerStyle: {
backgroundColor: '#512DA8',
},
headerTintColor: '#fff',
headerTitleStyle: {
color: '#fff',
},
};
function MenuNavigatorScreen() {
return (
<MenuNavigator.Navigator
//initialRouteName
screenOptions={HeaderOptions}
>
//Screens
</MenuNavigator.Navigator>
);
}
const HomeNavigator = createStackNavigator();
function HomeNavigatorScreen() {
return (
<HomeNavigator.Navigator
//initialRouteName
screenOptions={HeaderOptions}
>
//Screen
</HomeNavigator.Navigator>
);
}
const MainNavigator = createDrawerNavigator();
function MainNavigatorDrawer() {
return (
<MainNavigator.Navigator
initialRouteName="Home"
drawerStyle={{
backgroundColor: '#D1C4E9',
}}
screenOptions={HeaderOptions} //Isn't it should be applied to all screen
>
<MainNavigator.Screen name="Home" component={HomeNavigatorScreen} />
<MainNavigator.Screen name="Menu" component={MenuNavigatorScreen} />
<MainNavigator.Screen name="About" component={component1} />
<MainNavigator.Screen name="Contact" component={component2} />
</MainNavigator.Navigator>
);
}
I got the header in the Home and Menu but in the About and Contact screen there is no header. I think screenOptions isn't working in the DrawerNavigator, then how to give them this options?
And one more thing, I realize that I repeat my code many times. Is there any better approach?
I heartily thank if anyone helps me to figure out this.
Ok, I solve the header issue by turning my component1 and component2 into a stackNavigator like:
const stack = createStackNavigator();
function AboutNavigatorScreen() {
return (
<stack.Navigator screenOptions={HeaderOptions}>
<stack.Screen name="About" component={component1} />
</stack.Navigator>
);
}
function ContactNavigatorScreen() {
return (
<stack.Navigator screenOptions={HeaderOptions}>
<stack.Screen name="Contact" component={component2} />
</stack.Navigator>
);
}
What I understand is "If I need to add any screenOptions in my component the turn it into a stacknagivator" which seem odd. Am I right or over-engineering my problem?
Good day, to implement the header on the site, you need to specify the screenOptions={{headerShown: true}}> in Driver.Navigator.
And then prescribe options
import React from 'react';
import {NavigationContainer} from '#react-navigation/native';
import {createDrawerNavigator} from '#react-navigation/drawer';
import {Home} from '../screens/Home'
import LeftBurgerMenu from "../components/LeftBurgerMenu";
const Drawer = createDrawerNavigator();
export const AppNavigation = () => {
return (
<NavigationContainer>
<Drawer.Navigator
initialRouteName="Home"
drawerContentOptions={{
activeTintColor: '#e91e63',
itemStyle: {marginVertical: 30}
}}
screenOptions={{
headerShown: true,
}}>
<Drawer.Screen name="Home" component={() => <Home/>}
options={{
headerTintColor: '#fffffd',
headerTitle: () => <Text>Title</Text>,
headerLeft: () => <BackArrow/>,
}}
/>
</Drawer.Navigator>
</NavigationContainer>
);
}