I am now using the Expo-cli for react-native developing
Since I am gonna set my first page as Homepage but now it is setted as login page
import * as React from 'react';
import {NavigationContainer} from '#react-navigation/native';
import {createStackNavigator} from '#react-navigation/stack';
import Splash from './pages/splash';
import AuthLogin from './pages/auth/Login';
import AuthRegister from './pages/auth/Register';
import AuthRecoverPassword from './pages/auth/RecoverPassword';
import Home from './pages/home/home'
import Profile from './pages/profile/profile'
const Stack = createStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator
screenOptions={{
headerShown: false,
}}>
<Stack.Screen name="Splash" component={Splash} />
<Stack.Screen name="Home" component={Home} />
<Stack.Screen name="AuthLogin" component={AuthLogin} />
<Stack.Screen name="AuthRegister" component={AuthRegister} />
<Stack.Screen
name="AuthRecoverPassword"
component={AuthRecoverPassword}
/>
<Stack.Screen name="Profile" component={Profile} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
Also hope you to let me know about the Stack.screen feature.
function App() {
return (
<NavigationContainer>
<Stack.Navigator
initialRouteName='Home' ///the name of the initial screen
screenOptions={{
headerShown: false,
}}>
<Stack.Screen name="Splash" component={Splash} />
<Stack.Screen name="Home" component={Home} />
<Stack.Screen name="AuthLogin" component={AuthLogin} />
<Stack.Screen name="AuthRegister" component={AuthRegister} />
<Stack.Screen
name="AuthRecoverPassword"
component={AuthRecoverPassword}
/>
<Stack.Screen name="Profile" component={Profile} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
Related
Good evening,
I successfully created a project inside react native now I would like to nest my tab navigator with my stack navigator. I'm getting errors when I put my tab navigator with the stack navigator. My tab navigation code is:
function MyTabs() {
return (
<Tab.Navigator>
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="Earnings" component={EarningsScreen} />
</Tab.Navigator>
);
}
function Root() {
return (
<NavigationContainer>
<MyTabs/>
</NavigationContainer>
);
My stack navigator code is:
function MyStack() {
return (
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Notifications" component={NotificationsScreen} />
<Stack.Screen name="Profile" component={ProfileScreen} />
<Stack.Screen name="Settings" component={SettingsScreen} />
</Stack.Navigator>
);
}
export default function App() {
return (
<NavigationContainer>
<MyStack />
</NavigationContainer>
);
}
It looks like you're using two separate NavigationContainers, and you're not nesting the navigators at all; the code for each is completely separate.
Given that your question is about needing the tabs within the stack, try this instead:
delete the Root component (you should only have one NavigationContainer in your app)
use the MyTabs component as one of your stack screens
Example:
function MyTabs() {
return (
<Tab.Navigator>
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="Earnings" component={EarningsScreen} />
</Tab.Navigator>
);
}
function MyStack() {
return (
<Stack.Navigator>
{/* Tabs are inserted here */}
<Stack.Screen name="Tabs" component={MyTabs} />
<Stack.Screen name="Notifications" component={NotificationsScreen} />
<Stack.Screen name="Profile" component={ProfileScreen} />
<Stack.Screen name="Settings" component={SettingsScreen} />
</Stack.Navigator>
);
}
export default function App() {
return (
<NavigationContainer>
<MyStack />
</NavigationContainer>
);
}
I have my App stack with Tab navigation and I want to add some more screens to my settings page below is my App.js page how can I do it
App.js
I need to add to make a SettingsStack for this below page
Settings.js
Create a function (for eg: 'TabNavigation') which returns tab navigator component then try putting tab navigator inside stack like below example
import Profile from '../screens/settings/Profile';
import ManageRooms from '../screens/settings/ManageRooms';
....
const TabNavigation = () => {
<Tab.Navigator
.....
</<Tab.Navigator>
}
....
<NavigationContainer>
{authState.isAuthenticated ? (
<Stack.Navigator
initialRouteName="Tabs"
screenOptions={{
headerShown: false,
}}>
<Stack.Screen name="Tabs" component={TabNavigation} />
<Stack.Screen
key={'Profile'}
name={'Profile'}
component={Profile}
/>
<Stack.Screen
key={'ManageRooms'}
name={'ManageRooms'}
component={ManageRooms}
/>
</Stack.Navigator>) : (
<Stack.Navigator
screenOptions={{
header: () => {},
}}>
<Stack.Screen name="SignIn" component={SignIn} />
<Stack.Screen name="SignUp" component={SignUp} />
</Stack.Navigator>
)}
</NavigationContainer>
....
In my App.tsx I'm using createNativeStackNavigator and I'm trying to dismiss the modal that is "Project_Creation" and navigate to Main
<NavigationContainer>
<Stack.Navigator>
<Stack.Group>
<Stack.Screen name="Main" component={DrawerNavigator} options={{ headerShown: false }} />
<Stack.Screen name="Details" component={ChannelDetails} />
<Stack.Screen name="Profile" component={Profile} />
</Stack.Group>
<Stack.Group screenOptions={{ stackPresentation: 'modal', headerShown: false }}>
<Stack.Screen
options={{ headerTitle: 'Create Project' }}
name="Project_Creation"
component={ProjectCreationNavigator}
/>
</Stack.Group>
</Stack.Navigator>
</NavigationContainer>
I'm not sure if it's because createNativeStackNavigator is not as customizable as createStackNavigator or if I can't navigate to another Stack Group from one of the screens in ProjectCreationNavigator but it keeps getting errors.
With navigation.dismiss() I get
navigation.dismiss() is not a function
with navigation.reset({index: 0, name: "Main"}) I get
undefined is not an object
I'd love to figure out how to navigate to "Main".
Update::
I realized the problem. In separate navigator component I had NavigationContainer wrapped. When I removed that it worked
I am new to react native and I am trying to create a menu, that would open on click and slide out, and on click outside the menu would slide back in.
It has been very hard for me to find any decent tutorial/explanation about how to have both stack and drawer navigation available for a page and functioning.
currently, my App.js looks like this:
import 'react-native-gesture-handler';
import React from 'react';
import Home from './app/screens/Home/Home';
import ArtistListing from './app/screens/ArtistListing/ArtistListing';
import ArtPeriods from './app/screens/ArtPeriods/ArtPeriods';
import Login from './app/screens/Login/Login';
import Quiz from './app/screens/Quiz/Quiz';
import GuessWhen from './app/screens/GuessWhen/GuessWhen';
import { NavigationContainer, useLinking } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import {Auth, Hub} from 'aws-amplify';
import {SetCurrentUser} from './src/model/User';
import LearnMore from './app/screens/LearnMore/LearnMore';
import {CreateAllArtistsWithDependencies} from './src/model/Artists';
import ExploreTimePeriod from './app/screens/ExploreTimePeriod/ExploreTimePeriod';
import ExploreArtist from './app/screens/ExploreArtist/ExploreArtist';
import PhotoGalleryScreen from './app/screens/PhotoGalleryScreen/PhotoGalleryScreen';
import ExploreTimePeriods from './app/screens/ExploreTimePeriods/ExploreTimePeriods';
import ExploreArtists from './app/screens/ExploreArtists/ExploreArtists';
import QuizSummary from './app/screens/QuizSummary/QuizSummary';
import ContactUs from './app/screens/ContactUs/ContactUs';
import Profile from './app/screens/Profile/Profile';
import Favorites from './app/screens/Favorites/Favorites';
const Stack = createStackNavigator();
const App = () => {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Login">
<Stack.Screen name="Home" component={Home} options={{headerShown:false}} />
<Stack.Screen name="Login" component={Login} options={{headerShown:false}} />
<Stack.Screen name="ArtistListing" component={ArtistListing} options={{headerShown:false}}/>
<Stack.Screen name="ArtPeriods" component={ArtPeriods} options={{headerShown:false}}/>
<Stack.Screen name="GuessWhen" component={GuessWhen} options={{headerShown:false}}/>
<Stack.Screen name="Quiz" component={Quiz} options={{headerShown:false}}/>
<Stack.Screen name="LearnMore" component={LearnMore} options={{headerShown:false}}/>
<Stack.Screen name="ExploreTimePeriod" component={ExploreTimePeriod} options={{headerShown:false}}/>
<Stack.Screen name="ExploreTimePeriods" component={ExploreTimePeriods} options={{headerShown:false}}/>
<Stack.Screen name="PhotoGalleryScreen" component={PhotoGalleryScreen} options={{headerShown:false}}/>
<Stack.Screen name="ExploreArtist" component={ExploreArtist} options={{headerShown:false}}/>
<Stack.Screen name="ExploreArtists" component={ExploreArtists} options={{headerShown:false}}/>
<Stack.Screen name="QuizSummary" component={QuizSummary} options={{headerShown:false}}/>
<Stack.Screen name="ContactUs" component={ContactUs} options={{headerShown:false}}/>
<Stack.Screen name="Profile" component={Profile} options={{headerShown:false}}/>
<Stack.Screen name="Favorites" component={Favorites} options={{headerShown:false}}/>
</Stack.Navigator>
</NavigationContainer>
);
};
export default App;
I would like to have a drawer navigator as well with the pages listed below. I know I might need a switch navigator, but everything is super hard to find for version 5. I bet I am not the only one searching for a clear answer on how to do this.
<Drawer.Screen name="ContactUs" component={ContactUs} options={{headerShown:false}}/>
<Drawer.Screen name="Profile" component={Profile} options={{headerShown:false}}/>
<Drawer.Screen name="Favorites" component={Favorites} options={{headerShown:false}}/>
If you have an idea about this, please give me a suggestion.
Let'say your stack after login like
const Stack = createStackNavigator();
const App = () => {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Home" component={Home} options={{headerShown:false}} />
<Stack.Screen name="ArtistListing" component={ArtistListing} options={{headerShown:false}}/>
</Stack.Navigator>
</NavigationContainer>
);
};
Let's say this is your drawer navigation.
const Drawer = createDrawerNavigator();
function drawers(){
<Drawer.Screen name="Home" component={App} options={{headerShown:false}}/>
<Drawer.Screen name="ContactUs" component={ContactUs} options={{headerShown:false}}/>
<Drawer.Screen name="Profile" component={Profile} options={{headerShown:false}}/>
}
Now Drawer will be everywhere by default. And HomeScreen will be your first screen by default.
Now the part of AuthFlow.
const AuthFlowStack = createStackNavigator();
function AuthFlow(){
<AuthFlow.Screen name='LogIn' component={LogIn} />
}
Main Stack Flow(which will act as SwitchNavigator)
const Main = createStackNavigator();
function MainFlow(){
{this.state.isLogin ? <Drawer/> :<AuthFlow/>}
}
export default {MainFlow};
And set the value of isLogin to true when you login and send as parameter and set it false when logout.
Need to Show Tabs For Home Module after Signup Module
using React-navigation
Working Code with Only Stack Screens
const Stack = createStackNavigator();
const Bottom = createBottomTabNavigator();
render() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Welcome" headerMode='none' >
<Stack.Screen name="Welcome" component={WelcomeScreen}
options={{
title: '',
headerBackTitleVisible: false,
headerBackTitle: '',
headerShown: true
}}
/>
<Stack.Screen name="Login" component={LoginScreen} />
<Stack.Screen name="Signup" component={SignupScreen} />
<Stack.Screen name="ResetPassword" component={ResetPasswordScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
Need to show Tab from SigninScreen Button
Tab 1: Dashboard:
Tab 2: Profile
Tried Code:
<Bottom.Navigator initialRouteName="Dashboard" >
<Bottom.Screen name="Dashboard" component={TabDashboard} />
<Bottom.Screen name="Profile" component={TabProfile} />
</Bottom.Navigator>
Now I need to combine these two block of codes so I can navigate to Tabs
Tab screen will have further navigations
The idea would be to wrap the tabs screen inside component and add it to the stack conditionally.
const HomeScreen = () =>{
return (
<Bottom.Navigator initialRouteName="Dashboard" >
<Bottom.Screen name="Dashboard" component={TabDashboard} />
<Bottom.Screen name="Profile" component={TabProfile} />
</Bottom.Navigator>
);
}
Your stack should change as below
render() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Welcome" headerMode='none' >
{
this.state.isSignedIn ? (
<>
<Stack.Screen name="Welcome" component={WelcomeScreen} />
<Stack.Screen name="Login" component={LoginScreen} />
<Stack.Screen name="Signup" component={SignupScreen} />
<Stack.Screen name="ResetPassword" component={ResetPasswordScreen} />
</>
) : (
<>
<Stack.Screen name="ResetPassword" component={HomeScreen} />
</>
)
}
</Stack.Navigator>
</NavigationContainer>
);
}
IsSignedIn can be the state variable or a variable that you store the logged in status
You can refer the authentication flows
https://reactnavigation.org/docs/auth-flow