CODEWITHSUNDEEP
reactjsreact-native
Brayden
Brayden

Reputation: 125

React Native On-Page Navigation

I currently have a basic user authentication navigation which is seen below. Once the user is logged in they see the homepage with a bottom navigation that navigates them through the main screens on the app. All of this works perfect.

///
App.js
///
import React, { useState, Component } from 'react';
import { createStackNavigator, createBottomTabNavigator, createSwitchNavigator, createAppContainer } from 'react-navigation';
import AuthLoadingScreen from "./screens/AuthLoadingScreen";
import SignInScreen from "./screens/SignInScreen";
import SignUpScreen from "./screens/SignUpScreen";
import OptionsScreen from "./screens/OptionsScreen";
import LinksScreen from "./screens/LinksScreen";
import WelcomeScreen from "./screens/WelcomeScreen";
import NewPostScreen from "./screens/NewPostScreen";

const AuthStack = createStackNavigator({ SignIn: SignInScreen, SignUp: SignUpScreen });

const AppStack = createBottomTabNavigator({ Home: WelcomeScreen, Options: OptionsScreen, Links: LinksScreen });

const SwitchRouteConfig = {
  AuthLoading: AuthLoadingScreen,
  Auth: AuthStack,
  App: AppStack,
}

const SwitchConfig = {
  initialRouteName: 'AuthLoading',
}

const Navigator = createAppContainer(createSwitchNavigator(SwitchRouteConfig, SwitchConfig));
export default function App(props) {
     return (
           <Navigator />
     );
}

The problem is this: I have a screen called NewPostScreen which is imported on app.js. I am trying to add a button on LinksScreen.js that would link the user to the post screen. I do not want the NewPostScreen to be a part of the main bottom navigation.

I believe I have to add this code somewhere in app.js

const PostNavigation = createStackNavigator({
NewPost: NewPostScreen
});

And this is my code for my button on LinksScreen.js

 <Button
        title="Create Post"
        onPress={() => { navigation.navigate("NewPost"));
        }}
      />

There are so many different ways and tutorials on routes / navigation and I can't seem to solve this problem while maintaining my basic user authentication system.

Upvotes: 0

Views: 32

Answers (1)

hong developer
hong developer

Reputation: 13926

You can add in StackNavigator

const AuthStack = createStackNavigator({
 SignIn: SignInScreen, 
SignUp: SignUpScree,
NewPost: NewPostScreen
});

OR

const SwitchRouteConfig = {
  AuthLoading: AuthLoadingScreen,
  Auth: AuthStack,
  App: AppStack,
  NewPost: NewPostScreen
}

Upvotes: 1

Related Questions