I wanted to create a burger icon to open drawer but has been unable to do so. I have included the icon button on the right of my header. Whenever I click it to open the drawer, it shows the error of undefined function. I have mentioned the error below.
TypeError: navigation.openDrawer is not a function. (In 'navigation.openDrawer()', 'navigation.openDrawer' is undefined)
This is App.js, in this I have mentioned the code for drawer using createDrawerNavigator()
App.js
import React from 'react';
import { NavigationContainer } from '#react-navigation/native';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import PassengerScreen from './Passenger';
import Lovedones from './Lovedones';
import NewTab from './FirstScreen';
import { createDrawerNavigator } from '#react-navigation/drawer';
const Drawer = createDrawerNavigator();
export default App=() => (
<NavigationContainer>
<Drawer.Navigator initialRouteName="Passenger" drawerPosition="right" >
<Drawer.Screen name="Passenger" component={PassengerScreen} options= {{ title:'Passenger'}} />
<Drawer.Screen name="Lovedones" component={Lovedones} options= {{ title:'loved ones!!'}} />
<Drawer.Screen name="New Screen" component={NewTab} />
</Drawer.Navigator>
</NavigationContainer>
);
This is AccountScreen.js, in this code, I have created the icon button to open the drawer using navigation.openDrawer()
AccountScreen.js
import * as React from 'react';
import { View, Text, StyleSheet, Button } from 'react-native';
import { createStackNavigator } from '#react-navigation/stack';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import Ionicons from 'react-native-vector-icons/Ionicons';
import { createDrawerNavigator } from '#react-navigation/drawer';
const Stack= createStackNavigator();
Account = () => {
return <View style={styles.container}>
<Text>Hello!!</Text>
</View>
};
export default AccountStack =(navigation)=>(
<Stack.Navigator >
<Stack.Screen name="Account" component= {Account} options={{headerRight: () => (<Ionicons.Button name="reorder-three" color={"#FF0000"} size={40} backgroundColor= {"none"} onPress={() => navigation.openDrawer()}/> ) }} />
</Stack.Navigator>
);
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
});
Kindly help me in identifying the error.
The problem is in this line
export default AccountStack =(navigation)=>.
Here your navigation variable points to the props instead of props.navigation.
To fix this you should destructure your navigation object from the props and change this line to
export default AccountStack =({navigation})=>
Related
I am very new to react native and I had one question to ask. I have two screens in the same directory
screens:
Pro.js
Register.js
in Pro.js , there is one button to navigate to Register.js
<Button
textStyle={{ fontFamily: 'montserrat-regular', fontSize: 12 }}
style={styles.button}
onPress={() => navigation.navigate("Register")}>
GET STARTED
</Button>
When I run above, I get below error:
The action 'NAVIGATE' with payload {"name":"Register"} was not handled by any navigator.
Do you have a screen named 'Register'?
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.
This is a development-only warning and won't be shown in production.
Can anyone help me to navigate to that page?
Check below code:
App.js
import React from 'react';
import { createStackNavigator } from '#react-navigation/stack';
import { NavigationContainer } from '#react-navigation/native';
import RegisterScreen from './RegisterScreen';
import HomeScreen from './HomeScreen';
const Stack = createStackNavigator();
const App = () => {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Register" component={RegisterScreen} />
</Stack.Navigator>
</NavigationContainer>
);
};
export default App;
HomeScreen.js
import React from 'react';
import { View, Text, Button } from 'react-native';
const HomeScreen = ({ navigation }) => {
return (
<View>
<Text>This is the Home screen</Text>
<Button
title="Go to Register"
onPress={() => navigation.navigate('Register')}
/>
</View>
);
};
export default HomeScreen
RegisterScreen.js
import React from 'react';
import { View, Text, Button } from 'react-native';
const RegisterScreen = () => {
return (
<View>
<Text>This is the Register screen</Text>
</View>
);
};
export default RegisterScreen
Here is my drawerNavigator
import React from 'react';
import {createDrawerNavigator} from '#react-navigation/drawer';
import {
SafeAreaView,
Text,
View,
Button,
Image,
TouchableOpacity,
} from 'react-native';
import {DrawerActions} from '#react-navigation/native';
const Dashboard = React.lazy(() => import('../screens/Dashboard.js'));
const POSCatalog = React.lazy(() => import('../screens/POSCatalog'));
const Drawer = createDrawerNavigator();
const DrawerNavigator = () => {
return (
<Drawer.Navigator
screenOptions={{
drawerPosition: 'right',
// drawerType:"permanent",
headerTintColor: '#000000',
headerTitleStyle: {
fontWeight: 'bold', //Set Header text style
},
}}>
<Drawer.Screen
name="Home"
component={Dashboard}
options={{
headerStyle: {
backgroundColor: 'white',
},
headerShown: false,
headerTintColor: 'black',
headerLeft: false,
}}
/>
<Drawer.Screen name="POSCatalog" component={POSCatalog} />
</Drawer.Navigator>
);
};
export default DrawerNavigator;
Here is my App.js file
import 'react-native-gesture-handler';
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 Dashboard = React.lazy(() => import('./screens/Dashboard.js'));
const CustomerDashboard = React.lazy(() =>import('./screens/CustomerDashboard'),);
const Splash = React.lazy(() => import('./screens/Splash'));
const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();
const Loading = () => {
return <SafeAreaView>{/* <Text>Loading</Text> */}</SafeAreaView>;
};
const Routes = ({navigation}) => {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Splash">
<Stack.Screen
name="Splash"
component={Splash}
options={{headerShown: false, gestureEnabled: false}}
/>
<Stack.Screen
name="Dashboard"
component={DrawerNavigator}
options={{headerShown: false, gestureEnabled: false}}
/>
<Stack.Screen
name="CustomerDashboard"
component={CustomerDashboard}
options={{headerShown: false}}
/>
</Stack.Navigator>
</NavigationContainer>
);
};
class App extends React.PureComponent {
render() {
return (
<Suspense fallback={<Loading />}>
<Routes />
</Suspense>
);
}
}
export default App;
Here is my Dashboard code where I am passing navigation to Banking file
import React, {useState, useEffect} from 'react';
import {
StyleSheet,
SafeAreaView,
View,
TouchableOpacity,
} from 'react-native';
import Banking from '../screens/Banking';
const Dashboard = ({navigation}) => {
return (
<SafeAreaView style={{flex: 1}}>
<View style={styles.container}>
<Banking navigation={navigation} />
</View>
</SafeAreaView>
);
};
export default Dashboard;
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
},
});
I am implementing navigation drawer inside my react native application and I want to access drawer wherever in my application. Let's say drawer is available in dashboard page. Inside the dashboard I have another component called banking. Inside banking I have a button to open another component called customerDashboard. In customerDashboard I have a drawer icon in toolbar. If I click drawer icon in customerDashboard I want to open the drawer.
Notes:
Drawer is available in component A
In Component A calling another component called B
Inside Component B navigating to Component C
Inside Component C need to open drawer when icon is clicked in toolbar.
I'm started with React Native and try to use the navigation between screns. To do so I creat a component Navigation but when I want to use it this error show up :
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined
It appear to be the component AppNavigator that is the issue
I tried :
checked all my exports and import and for me their is no problems
change my const component in a function component but nothing do the trick.
Can you help me ?
App.js :
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import AppNavigator from './components/navigation';
function App() {
return (
<View>
<AppNavigator />
</View>
);
}
/*const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
justifyContent: 'center',
},
});*/
export default App;
Navigation.js
import React from 'react';
import { createStackNavigator } from '#react-navigation/stack';
import { NavigatorContainer } from '#react-navigation/native';
import Localisation from './localisation';
import Home from './home';
const { Navigator, Screen } = createStackNavigator()
const AppNavigator = () => (
<NavigatorContainer>
<Navigator initialRouteName="Home">
<Screen options={{headerShown: false}} name="Home" component={Home} />
</Navigator>
</NavigatorContainer>
)
export default AppNavigator;
There is no component named NavigatorContainer in react-navigation/native. The component is called NavigationContainer.
Hence, the following should fix the issue.
import React from 'react';
import { createStackNavigator } from '#react-navigation/stack';
import { NavigationContainer } from '#react-navigation/native';
import Localisation from './localisation';
import Home from './home';
const { Navigator, Screen } = createStackNavigator()
const AppNavigator = () => (
<NavigationContainer>
<Navigator initialRouteName="Home">
<Screen options={{headerShown: false}} name="Home" component={Home} />
</Navigator>
</NavigationContainer>
)
export default AppNavigator;
here I am trying to add navigation to my react-native project, the button register should navigate to the success page component but only issue is the button register exists out of the navigation container
here I am trying to access "navigation" outside of navigation container
here's the navigation container:
import * as React from 'react';
import { Text, View, StyleSheet,Image,TouchableHighlight,TextInput,
Button, } from 'react-native';
import Constants from 'expo-constants';
import logo from './assets/logo4.png'
import logo2 from './assets/CFA_approved_prep_provider_RGB.png'
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import { enableScreens } from 'react-native-screens';
import { Component } from 'react';
import * as Font from 'expo-font';
import { useRef } from "react";
import logo3 from './assets/logo3.png'
enableScreens();
const Stack = createStackNavigator();
// You can import from local files
import AssetExample from './components/AssetExample';
// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';
export default function App() {
const navigationRef = useRef(null)
return (
<View style={{flex: 1,
justifyContent: 'center',
backgroundColor:'white',}}>
<NavigationContainer ref={navigationRef}>
<Stack.Navigator initialRouteName="SplashScreen">
<Stack.Screen name="SplashScreen" component={SplashScreen} />
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Details" component={Details} />
<Stack.Screen name="SuccessPage" component={SuccessPage} />
</Stack.Navigator>
</NavigationContainer>
</View>
here I am trying to access it like that:
<View style={[{ width: "90%", margin: 10 }]}>
<Button
onPress={() => navigationRef.current.navigate("SuccessPage")}
title="Register"
/>
</View>
that's the error:
screenshot here
any idea what else can be done?
I am Trying to create a simple navigation in React Native. but I keep getting this error that I think is linked to the react Native navigation library.
Here is my App.js code :
import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
import HomeScreen from "./src/screens/HomeScreen";
import { createMaterialBottomTabNavigator } from "#react-navigation/material-bottom-tabs";
const Tab = createMaterialBottomTabNavigator();
function MyTabs() {
return (
<Tab.Navigator>
<Tab.Screen name="Home" component={HomeScreen} />
</Tab.Navigator>
);
}
export default createAppContainer(MyTabs);
This is the error its generating :
You are mixing two versions of Navigators here, the createAppContainer is used with Navigation version and the createMaterialBottomTabNavigator is used with navigation version 5. If you want to use createMaterialBottomTabNavigator the code should look like below.
import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createMaterialBottomTabNavigator } from '#react-navigation/material-bottom-tabs';
function HomeScreen() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Home!</Text>
</View>
);
}
const Tab = createMaterialBottomTabNavigator();
export default function MyTabs() {
return (
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen name="Home" component={HomeScreen} />
</Tab.Navigator>
</NavigationContainer>
);
}