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;
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>
);
};
This is my first stack
<NavigationContainer>
<Stack.Navigator
initialRouteName="Home"
screenOptions={{
headerShown: false,
}}
>
<Stack.Screen name="Home" component={MainScreen} />
<Stack.Screen name="Schools" component={SchoolsScreen} />
<Stack.Screen name="Setting" component={SettingScreen} />
<Stack.Screen name="Profile" component={ProfileScreen} />
<Stack.Screen name="Saved" component={SavedData} />
<Stack.Screen name="Profile2" component={Profile2} />
<Stack.Screen name="SchoolDetails" component={SchoolDetailsScreen} />
<Stack.Screen name="Bottom" component={BottomTab} />
</Stack.Navigator>
</NavigationContainer>
This is my second stack
<NavigationContainer>
<Stack.Navigator
initialRouteName="Login"
screenOptions={{
headerShown: false,
}}
>
<Stack.Screen name="Login" component={AuthLogin} />
<Stack.Screen name="Register" component={AuthRegister} />
<Stack.Screen name="Forget" component={ForgetPassword} />
</Stack.Navigator>
</NavigationContainer>
THis is my app.js file
const [auth, setAuth] = useState(false);
useEffect(() => {
(async () => {
const value = await AsyncStorage.getItem("isLoggedin");
console.log(value);
setAuth(value);
})();
}, []);
return (
<SafeAreaView style={{ flex: 1 }}>
<NativeBaseProvider config={config}>
{auth == "true" ? <InsideStack /> : <OutsideStack />}
</NativeBaseProvider>
</SafeAreaView>
);
}
I want to navigate to home screen from login screen , after function call
// navigation.push("Home");
const storeData = async (value) => {
try {
await AsyncStorage.setItem("isLoggedin", JSON.stringify(true));
} catch (e) {
// saving error
}
};
storeData();
navigation.push("Home");
}}
But i got error:
Do you have a screen named 'Home'?
this is the simple code for this. you have to use redux or context api for gloal state management. here is a min example ;
import {NavigationContainer} from '#react-navigation/native';
import React from 'react';
import {useDispatch, useSelector} from 'react-redux';
import {GetUserContacts} from '../logic/getcontact';
import {setContacts} from '../store/actions/ContactActions';
import AuthNavigation from './AuthNavigation';
import RootNavigation from './RootNavigation';
const AppContainer = () => {
const {is_logged_in} = useSelector(state => state.persistedReducer);
const dispatch = useDispatch();
if (is_logged_in) {
GetUserContacts('PK').then(data => {
dispatch(setContacts(data));
});
}
return (
<NavigationContainer>
{is_logged_in ? <RootNavigation /> : <AuthNavigation />}
</NavigationContainer>
);
};
export default AppContainer;
after user logged in you have to make that is_logged_in true. so the navigator changes itself. you will have to persist this so when application restart the user dont need to login again
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 don't know how to get the navigation property to switch to child screens.
I thought my code was good but a priori it doesn't work ... When I put navigation container encompassing my tab.navigator, the tab navigator screens accepted navigation, but not the others, now I changed and I have included the screens of the stack.navigator in my NavigationContainer but it does not work either ... I have the error:
Couldn't register the navigator. Have you wrapped your app with
'NavigationContainer'?
I'm lost, Can somebody help me ?
Thanks a lot...
import React from 'react';
import { Image } from 'react-native';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import { createStackNavigator} from "#react-navigation/stack";
import { NavigationContainer } from '#react-navigation/native';
import Authentication from '../../Screens/Authentication';
import Activities from '../../Screens/Activities';
import Login from '../../Screens/Authentication/Login';
import Register from '../../Screens/Authentication/Register';
import Tools from '../../Screens/Tools';
import Dashboard from '../../Screens/Dashboard';
import Orders from '../../Screens/Orders';
import Completed from '../../Screens/Orders/Completed';
import Current from '../../Screens/Orders/Current';
import Details from '../../Screens/Orders/Details';
import Settings from '../../Screens/Settings';
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';
import styles from '../../assets/styles';
const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();
export default function ScreenNavigator() {
return(
<NavigationContainer>
<Stack.Navigator>
<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 = '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 = 'Details' component = {Details} options={{ title: i18n.t("details.title") }}/>
<Stack.Screen name = 'Products' component = {Products} options={{ title: i18n.t("products.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>
</NavigationContainer>
)
}
export function AppNavigation() {
return (
<Tab.Navigator tabBarOptions={{activeTintColor: 'black',
labelStyle: {fontSize: 12, color: 'white'},
style: {backgroundColor: '#F78400'},
}}>
<Tab.Screen
name={i18n.t("orders.title")}
component={ScreenNavigator}
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={Settings}
options={{
tabBarIcon: ({ focused, horizontal, tintColor }) => {
return (
<Image
source={require("../../assets/images/settings.png")}
style={styles.icon}
/>
);
}
}}
/>
</Tab.Navigator>
)
}
App.js:
import React from "react";
import {
View,
Text,
StatusBar,
Image,
ActivityIndicator,
} from "react-native";
import {
retrieveAppLang,
userSessionActive
} from "./src/common/Preferences";
import i18n from "./src/i18n";
import styles from './assets/styles';
import Authentication from './Screens/Authentication'
import { ScreenNavigator, AppNavigation } from './src/Navigation';
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
isFirstConnection: true,
status: 0,
};
}
async UNSAFE_componentWillMount() {
let lang = await retrieveAppLang();
let isConnected = await userSessionActive();
if (lang.length == 2) {
i18n.changeLanguage(lang);
}
if (isConnected === true && this.props && this.props.navigation) {
this.props.navigation.navigate("ScreenNavigator");
}
}
async componentDidMount() {
const data = await this.performTimeConsumingTask();
if (data !== null) {
this.setState({
isFirstConnection: false,
status: 1,
});
}
}
async performTimeConsumingTask() {
return new Promise((resolve) =>
setTimeout(() => {
resolve("result");
}, 750)
);
};
render() {
if (this.state.status == 1) {
if (this.state.isFirstConnection ) {
return <Authentication />;
} else {
return <AppNavigation />
}
}
return (
<View style={styles.container}>
<StatusBar hidden={true} />
<View style={styles.subContainer}>
<Image
style={styles.logo}
source={require("./assets/images/logo.png")}
/>
<ActivityIndicator size="large" color="#F78400" />
<Text>{i18n.t("app.loading") + "..."}</Text>
</View>
</View>
);
}
}
Let's say I have one button and when user input their name and that name is valid then button will enabled and on press it will navigate to other screen.
But when I try to test on press button, it will return error.
TypeError: Cannot read property 'navigate' of undefined
This is my component
import React, { useState } from 'react'
import { ScrollView, StatusBar, Text, View } from 'react-native'
import HeaderAuth from '../../../__global__/headerAuth/headerAuth'
import color from '../../../__global__/styles/themes/colorThemes'
import ButtonFull from '../../../__global__/button/buttonFull'
import Field from '../../../__global__/fieldAuthScreen/Field'
import styles from './styles/StyleFullName'
import regex from '../../../constant/regex'
const FullNameScreen = ({ navigation }) => {
const [fullName, setFullName] = useState('')
const regexName = regex.name
const submitFullName = () => {
navigation.navigate('LinkEmail')
}
return (
<ScrollView>
<StatusBar
translucent
backgroundColor="transparent"
barStyle="light-content"
/>
<HeaderAuth />
<Field
testID={'inputFullName'}
icon={'account'}
value={fullName}
placeholder={'Type your full name'}
onChangeText={(value) => {
handleChange('fullName')
setFullName(value)
setFieldTouched('fullName', true)
setFieldValue('fullName', value)
}}
onBlur={() => setFieldTouched('fullName', true)}
keyboardType={'default'}
/>
<ButtonFull
testID={'submitFullName'}
isDisabled={!isValid}
buttonColor={isValid ? color.thema : color.disabledButton}
onPress={() => submitFullName()}
title={'Next'}
/>
</ScrollView>
)
}
export default FullNameScreen
This is my test file
import React from 'react'
import { configure, shallow, mount } from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'
import FullNameScreen from '../index'
import renderer from 'react-test-renderer'
import { fireEvent, render, waitFor } from 'react-native-testing-library'
import '#testing-library/jest-native/extend-expect'
jest.mock('#react-navigation/native', () => ({
useNavigation: component => component,
}))
describe('Login', () => {
configure({ adapter: new Adapter() })
const wrapper = shallow(<FullNameScreen />)
const instaceOf = wrapper.instance()
const rendered = renderer.create(<FullNameScreen />)
it('renders correctly', () => {
expect(rendered.toJSON()).toBeTruthy()
})
it('should call submit fullname one time', async () => {
const onPressMock = jest.fn()
const phoneNumber = 'Ganda Rain Panjaitan'
const { getByTestId } = render(<FullNameScreen />)
const input = getByTestId('inputFullName')
fireEvent.changeText(input, phoneNumber)
expect(getByTestId('inputFullName').props.value).toEqual(phoneNumber)
await waitFor(() => {
expect(getByTestId('submitFullName')).toBeEnabled()
})
fireEvent.press(getByTestId('submitFullName'))
expect(onPressMock.mock.calls.length)
})
})
This is my navigator
import * as React from 'react'
import { NavigationContainer } from '#react-navigation/native'
import { createStackNavigator } from '#react-navigation/stack'
import HomeScreen from '../views/homeScreen'
import SplashScreen from '../views/splashScreen'
import WelcomeScreen from '../views/welcomeScreen'
import ProfileScreen from '../views/profileScreen'
import ChangeNumberScreen from '../views/changeNumberScreen'
import LoginScreen from '../views/authScreen/loginScreen'
import PinScreen from '../views/authScreen/pinScreen/index'
import SetPinScren from '../views/authScreen/setPinScreen'
import OtpVerificationScreen from '../views/authScreen/otpVerificationScreen'
import PhoneNumberScreen from '../views/authScreen/phoneNumberScreen'
import FullNameScreen from '../views/authScreen/fullNameScreen'
import LinkEmailScreen from '../views/authScreen/linkEmailScreen'
const Stack = createStackNavigator()
import ChangeNameScreen from '../views/changeNameScreen'
import MainTab from '../views/mainTab'
function Routes() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Splash" component={SplashScreen} options={{ headerShown: false }} />
<Stack.Screen name="Welcome" component={WelcomeScreen} options={{ headerShown: false }} />
<Stack.Screen name="Home" component={HomeScreen} options={{ headerShown: false }} />
<Stack.Screen name="Profile" component={ProfileScreen} options={{ headerShown: false }} />
<Stack.Screen name="ChangeNumber" component={ChangeNumberScreen} options={{ headerShown: false }} />
<Stack.Screen name="Login" component={LoginScreen} options={{ headerShown: false }} />
<Stack.Screen name="Pin" component={PinScreen} options={{ headerShown: false }} />
<Stack.Screen name="SetPin" component={SetPinScren} options={{ headerShown: false }} />
<Stack.Screen name="OtpVerification" component={OtpVerificationScreen} options={{ headerShown: false }} />
<Stack.Screen name="PhoneNumber" component={PhoneNumberScreen} options={{ headerShown: false }} />
<Stack.Screen name="ChangeName" component={ChangeNameScreen} options={{ headerShown: false }} />
<Stack.Screen name="MainTab" component={MainTab} options={{ headerShown: false }} />
<Stack.Screen name="FullName" component={FullNameScreen} options={{ headerShown: false }} />
<Stack.Screen name="LinkEmail" component={LinkEmailScreen} options={{ headerShown: false }} />
</Stack.Navigator>
</NavigationContainer>
)
}
export default Routes
Set it like this:
const FullNameScreen = ({ navigation: { navigate } }) => {
yourFunction() {
navigate('LinkEmail')
}
}
Or alternately you can pass full props like this:
const FullNameScreen = (props) => {
yourFunction() {
props.navigation.navigate('LinkEmail')
}
}