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.
Related
I am nesting a drawer navigation on top of a stack navigator. It works, but the problem is that it lags excessively while opening the drawer. What could be the issue here?
import React, { useEffect, useState } from "react";
import CartIcon from "../CartIcon";
import Home from "../../screens/Home";
import Orders from "../../screens/Orders";
import ProductsScreen from "../../screens/ProductsScreen";
import Cart from "../../screens/Cart";
import { createNativeStackNavigator } from "#react-navigation/native-stack";
import HomeHeader from "../HomeHeader";
import OrdersDetails from "../../screens/OrdersDetails";
import { createDrawerNavigator } from "#react-navigation/drawer";
const Drawer = createDrawerNavigator()
const Stack = createNativeStackNavigator();
My drawer navigator here
const HomeScreen=()=> {
return (
<Drawer.Navigator>
<Drawer.Screen name="Home" component={Home} options={() => ({
title: "BarPoint",
headerRight: () => <HomeHeader />,
})} />
</Drawer.Navigator>
);
}
stack navigator here
const AppStack = () => {
return (
<Stack.Navigator>
<Stack.Screen
name="HomeScreen"
component={HomeScreen}
options={{ headerShown: false }}
/>
<Stack.Screen
name="ProductsScreen"
component={ProductsScreen}
options={({ navigation }) => ({
title: "Products",
headerRight: () => <CartIcon navigation={navigation} />,
})}
/>
<Stack.Screen name="Cart" component={Cart} />
<Stack.Screen name="Orders" component={Orders} />
<Stack.Screen name="OrdersDetails" component={OrdersDetails} />
</Stack.Navigator>
);
};
export default AppStack;
Add useLegacyImplementation in Drawer.Navigator and compile.
const HomeScreen=()=> {
return (
<Drawer.Navigator
useLegacyImplementation //<- Add here
>
<Drawer.Screen name="Home" component={Home} options={() => ({
title: "BarPoint",
headerRight: () => <HomeHeader />,
})} />
</Drawer.Navigator>
);
}
It occurred an Error to me by adding useLegacyImplementation.
Here is my code.Also,I can't touch off my sidebar by navigation.openDrawer
my devices: xcode13 react-navigation6.x
import React ,{Component}from 'react';
import { Button, View ,Text,StyleSheet} from 'react-native';
import { createDrawerNavigator } from '#react-navigation/drawer';
const Drawer=createDrawerNavigator()
//two function
function HomeScreen(prop){
return(
<View style={styles.container}>
<Text style={styles.text}>Home Screen</Text>
<Button title={"Open Drawer"} onPress={()=>prop.navigation.openDrawer()}/>
<Button title={"Toggle Drawer"} onPress={()=>prop.navigation.toggleDrawer()}/>
</View>
)
}
function NewsScreen(prop){
return(
<View style={styles.container}>
<Text style={styles.text}>News Screen</Text>
<Button title={"jump to Home"} onPress={()=>prop.navigation.navigate('Home')}/>
</View>
)
}
export default class index extends Component{
render(){
return(
<Drawer.Navigator useLegacyImplementation={true} >
<Drawer.Screen name="Home" component={HomeScreen} />
<Drawer.Screen name="News" component={NewsScreen} />
</Drawer.Navigator>
)
}
}
const styles=StyleSheet.create({
container:{
flex:1,
justifyContent:'center',
alignItems: 'center',
},
text:{
fontSize:40
}
})
//Here is my App.js file
import React, {Suspense} from 'react';
import {
SafeAreaView,
Text,
View,
Button,
Image,
TouchableOpacity,
} from 'react-native';
import {
NavigationContainer,
getFocusedRouteNameFromRoute,
} from '#react-navigation/native';
import {createStackNavigator} from '#react-navigation/stack';
import {createDrawerNavigator} from '#react-navigation/drawer';
import DrawerNavigator from './navigation/DrawerNavigator';
const SinginScreens = React.lazy(() => import('./screens/Login/SinginScreens'));
const Billing = React.lazy(() => import('./screens/Home/Billing'));
const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();
const Loading = () => {
return <SafeAreaView>{/* <Text>Loading</Text> */}</SafeAreaView>;
};
const Routes = ({navigation}) => {
return (
<NavigationContainer>
<Stack.Navigator
initialRouteName={'Main'}>
<Stack.Screen
name={'Main'}
component={DrawerNavigator}
options={{
headerShown: false,
}}
/>
<Stack.Screen
name="Billing"
component={Billing}
options={{
headerLeft: null,
headerShown: false,
}}
/>
<Stack.Screen
name="SinginScreen"
component={SinginScreens}
options={{
headerShown: false,
gestureEnabled: false,
}}
/>
</Stack.Navigator>
</NavigationContainer>
);
};
class App extends React.PureComponent {
render() {
return (
<Suspense fallback={<Loading />}>
<Routes />
</Suspense>
);
}
}
export default App;
//Here is my stack navigator
import React from 'react';
import {createStackNavigator} from '#react-navigation/stack';
import {Button} from 'react-native';
import {NavigationContainer} from '#react-navigation/native';
const Dashboard = React.lazy(() => import('../screens/Home/Dashboard.js'));
const Splash = React.lazy(() => import('../screens/Login/Splash'));
import {AuthContext} from './context';
const Stack = createStackNavigator();
const StackNavigator = ({route, navigation}) => {
return (
// <NavigationContainer>
<Stack.Navigator initialRouteName="Splash">
<Stack.Screen
name="Splash"
component={Splash}
options={{headerShown: false, gestureEnabled: false}}
/>
<Stack.Screen
name="Dashboard"
component={Dashboard}
options={{headerShown: false,}}
/>
</Stack.Navigator>
);
};
export default StackNavigator;
//Here is my drawer navigator
import React, {useState,useEffect} from 'react';
import {
createDrawerNavigator,
DrawerContentScrollView,
DrawerItemList,
DrawerItem,
} from '#react-navigation/drawer';
import {
SafeAreaView,
Text,
View,
Button,
Image,
TouchableOpacity,
StyleSheet,
} from 'react-native';
import {DrawerActions} from '#react-navigation/native';
import StackNavigator from './StackNavigator';
import { useNavigation } from '#react-navigation/native';
const Drawer = createDrawerNavigator()
const CustomDrawer = props => {
return (
<View style={{flex: 1}}>
<DrawerContentScrollView {...props}>
<DrawerItemList {...props} />
<DrawerItem
{...props}
label="Contacts"
labelStyle={styles.itemStyle}
icon={(focused, size, color) => (
<Image
style={{width: 25, height: 25}}
source={require('../assets/images/ic_contacts1.png')}
resizeMode="contain"
/>
)}
onPress={() => {
props.navigation.closeDrawer();
}}
/>
<DrawerItem
{...props}
label="POS Catalog"
labelStyle={styles.itemStyle}
icon={(focused, size, color) => (
<Image
style={{width: 25, height: 25}}
source={require('../assets/images/catalog.png')}
resizeMode="contain"
/>
)}
onPress={() => {
props.navigation.closeDrawer();
}}
/>
</DrawerContentScrollView>
</View>
);
};
const DrawerNavigator = () => {
return (
<Drawer.Navigator
drawerContent={props => <CustomDrawer {...props} />}
screenOptions={{
drawerPosition: 'right',
// drawerType:"permanent",
headerTintColor: '#000000',
headerTitleStyle: {
fontWeight: 'bold', //Set Header text style
},
}}>
<Drawer.Screen
name="Home"
component={StackNavigator}
options={{
drawerIcon: ({focused, size}) => (
<Ionicons name="ios-home-outline" size={size} color={'#000'} />
),
headerStyle: {
backgroundColor: 'white',
},
headerShown: false,
headerTintColor: 'black',
}}/>
</Drawer.Navigator>
);
};
export default DrawerNavigator;
I have drawer and stack navigator in my react native application.I have Screens called Splash,SigninScreen,Billing and Dashboard.
Screens in navigator
Splash,Dashboard- Stack Navigator
SigninScreen,Billing-App.js file(mentioned these screens out of drawer navigator to remove drawer for these screens)
What i want to achieve is when app is opening splash screen comes first and from splashscreen i am navigating to signinscreen using navigation.replace('SinginScreen') to avaoid back navigating to splash screen again when user clicks back button in 'SigninScreen'.
Similarly i am using navigation.replace('Billing') when navigating from SigninScreen to Billing to avoid back navigating to SigninScreen again when user clicks back button in Billing.
Now Inside Billing i am using navigation.navigate('Dashboard') to navigate from Billing to Dashboard page.Here i am facing error like The action 'NAVIGATE' with payload {"name":"Dashboard"} was not handled by any navigator.
Do you have a screen named 'Dashboard'?
Note:
I want to navigate to Dashboard page from Billing and also i don't want the user to go back again billing from Dashboard.
So I'm new to react native and react navigation.
I'm building an app that will have 7 main screens:
HomeScreen, ProfileScreen, CocktailDetailScreen and PublishRecipeScreen (which I want to be able to access through a drawer navigator).
LandingScreen, LoginScreen and RegisterScreen (which I don't want to show in the drawer navigator. I just want to show the LandingScreen when the user isn't logged in, and either of the other if the user want's to log in or register).
I've been able to put up a stack navigator that works fine, but I don't understand how to combine this with the drawer navigator I want. I've tried different approaches but I get errors like:
The action 'OPEN_DRAWER' was not handled by any navigator.
Is your screen inside a Drawer navigator?
or
Uncaught Error: Looks like you have nested a 'NavigationContainer' inside another. Normally you need only one container at the root of the app, so this was probably an error. If this was intentional, pass 'independent={true}' explicitly. Note that this will make the child navigators disconnected from the parent and you won't be able to navigate between them.
This is my code so far.
App.tsx
import { SafeAreaProvider } from 'react-native-safe-area-context'
import useCachedResources from './hooks/useCachedResources'
import Navigation from './navigation'
export default function App() {
const isLoadingComplete = useCachedResources()
if (!isLoadingComplete) {
return null
} else {
return (
<SafeAreaProvider>
<Navigation />
</SafeAreaProvider>
)
}
}
(navigation) index.tsx
import { NavigationContainer } from '#react-navigation/native'
import { createNativeStackNavigator } from '#react-navigation/native-stack'
import * as React from 'react'
import LandingScreen from '../screens/LandingScreen'
import LoginScreen from '../screens/LoginScreen'
import RegisterScreen from '../screens/RegisterScreen'
import HomeScreen from '../screens/HomeScreen'
import ProfileScreen from '../screens/ProfileScreen'
import CocktailDetailScreen from '../screens/CocktailDetailScreen'
import PublishRecipeScreen from '../screens/PublishRecipeScreen'
import Header from '../components/Header'
import DrawerNavigator from '../components/DrawerNavigator'
import { RootStackParamList } from '../types'
export default function Navigation() {
const Stack = createNativeStackNavigator<RootStackParamList>()
return (
<NavigationContainer>
<Stack.Navigator >
<Stack.Screen name='LandingScreen' component={LandingScreen} options={{headerShown: false}} />
<Stack.Screen name='LoginScreen' component={LoginScreen} options={{headerShown: false}} />
<Stack.Screen name='RegisterScreen' component={RegisterScreen} options={{headerShown: false}} />
<Stack.Screen name='HomeScreen' component={HomeScreen} options={{ header: () => <Header/> }} />
<Stack.Screen name='ProfileScreen' component={ProfileScreen} options={{ header: () => <Header/> }} />
<Stack.Screen name='CocktailDetailScreen' component={CocktailDetailScreen} options={{ header: () => <Header/> }} />
<Stack.Screen name='PublishRecipeScreen' component={PublishRecipeScreen} options={{ header: () => <Header/> }} />
</Stack.Navigator>
</NavigationContainer>
)
}
header.tsx
import React from 'react'
import { useNavigation } from '#react-navigation/native'
import { useDrawerStatus } from '#react-navigation/drawer'
import { DrawerActions } from '#react-navigation/native'
import { StyleSheet, Text, View } from 'react-native'
import { AntDesign } from '#expo/vector-icons'
const Header = () => {
const navigation = useNavigation()
return (
<View style={styles.container}>
<Text style={styles.title} onPress={() => navigation.navigate('RegisterScreen')}>Mixr</Text>
<View style={styles.iconContainer} >
<AntDesign name='user' style={styles.icon} size={30} color='white' onPress={() => navigation.dispatch(DrawerActions.openDrawer())} />
</View>
</View>
)
}
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
backgroundColor: '#E51C27',
alignSelf: 'stretch'
},
title: {
fontSize: 40,
fontWeight: 'bold',
marginTop: 6,
marginBottom: 6,
marginLeft: 10
},
iconContainer: {
backgroundColor: 'black',
borderBottomLeftRadius: 50,
borderBottomRightRadius: 50,
borderTopLeftRadius: 50,
borderTopRightRadius: 50,
marginRight: 10
},
icon: {
padding: 5
}
})
export default Header
DrawerNavigator.tsx
import React from 'react'
import { createDrawerNavigator, useDrawerStatus } from '#react-navigation/drawer'
import { NavigationContainer } from '#react-navigation/native'
import HomeScreen from '../screens/HomeScreen'
import ProfileScreen from '../screens/ProfileScreen'
import CocktailDetailScreen from '../screens/CocktailDetailScreen'
import PublishRecipeScreen from '../screens/PublishRecipeScreen'
const DrawerNavigator = () => {
const Drawer = createDrawerNavigator()
return (
<NavigationContainer>
<Drawer.Navigator>
<Drawer.Screen name='HomeScreen' component={HomeScreen} />
<Drawer.Screen name='ProfileScreen' component={ProfileScreen} />
<Drawer.Screen name='CocktailDetailScreen' component={CocktailDetailScreen} />
<Drawer.Screen name='PublishRecipeScreen' component={PublishRecipeScreen} />
</Drawer.Navigator>
</NavigationContainer>
)
}
export default DrawerNavigator
I want to show a header in all of this pages (HomeScreen, ProfileScreen, CocktailDetailScreen and PublishRecipeScreen) and from that header be able to open/close the drawer. I don't quite understand how to link the stack navigator with the drawer.
From a more theoretical point of view, I don't really understand the difference between the stack navigator, the drawer, and other options like tab or bottom navigators.
I mean, besides that the drawer navigator shows in a drawer and the bottom one shows at the bottom. Is there a conceptual difference between them?
Full code can be found here: https://github.com/coccagerman/mixr
I think I figured it out.
What I did is nest the drawer navigator within the stack navigator.
To do so, I passed the Drawer navigator as the component of each of the screens I wanted it to be in.
Like so:
(navigation) index.tsx
import { NavigationContainer } from '#react-navigation/native'
import { createNativeStackNavigator } from '#react-navigation/native-stack'
import * as React from 'react'
import LandingScreen from '../screens/LandingScreen'
import LoginScreen from '../screens/LoginScreen'
import RegisterScreen from '../screens/RegisterScreen'
import Header from '../components/Header'
import DrawerNavigator from '../components/DrawerNavigator'
import { RootStackParamList } from '../types'
export default function Navigation() {
const Stack = createNativeStackNavigator<RootStackParamList>()
return (
<NavigationContainer>
<Stack.Navigator >
<Stack.Screen name='LandingScreen' component={LandingScreen} options={{headerShown: false}} />
<Stack.Screen name='LoginScreen' component={LoginScreen} options={{headerShown: false}} />
<Stack.Screen name='RegisterScreen' component={RegisterScreen} options={{headerShown: false}} />
<Stack.Screen name='HomeScreen' component={DrawerNavigator} options={{ header: () => <Header/> }} />
<Stack.Screen name='ProfileScreen' component={DrawerNavigator} options={{ header: () => <Header/> }} />
<Stack.Screen name='CocktailDetailScreen' component={DrawerNavigator} options={{ header: () => <Header/> }} />
<Stack.Screen name='PublishRecipeScreen' component={DrawerNavigator} options={{ header: () => <Header/> }} />
</Stack.Navigator>
</NavigationContainer>
)
}
And in the drawer navigator I assign the corresponding screen component to each screen:
DrawerNavigator.tsx
import React from 'react'
import { createDrawerNavigator } from '#react-navigation/drawer'
import HomeScreen from '../screens/HomeScreen'
import ProfileScreen from '../screens/ProfileScreen'
import CocktailDetailScreen from '../screens/CocktailDetailScreen'
import PublishRecipeScreen from '../screens/PublishRecipeScreen'
const DrawerNavigator = () => {
const Drawer = createDrawerNavigator()
return (
<Drawer.Navigator>
<Drawer.Screen name='Home' component={HomeScreen} options={{headerShown: false}} />
<Drawer.Screen name='Profile' component={ProfileScreen} options={{headerShown: false}} />
<Drawer.Screen name='CocktailDetail' component={CocktailDetailScreen} options={{headerShown: false}} />
<Drawer.Screen name='PublishRecipe' component={PublishRecipeScreen} options={{headerShown: false}} />
</Drawer.Navigator>
)
}
export default DrawerNavigator
I still find this a bit confusing though, and I guess there's probably a simpler way to write this.
Useful resources I've found on this topic:
https://reactnavigation.org/docs/nesting-navigators/
https://blog.waldo.io/combining-navigators-in-react-navigation/
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;
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>
);
}