I'm new to React Native, maybe it's a weird question,
I have a simple app with a BottomTabNavigator with 4 tabs in it: A, B, C, D.
on screen "A" I have a button that when you click on you will go to screen "E" that is not suppose to be visible on the bottom tabs.
I tried to add that navigation.navigate("E") but it seems to work only when I actually add that E to the bottomTabs. But I don't need that E screen visible on the bottom tabs, and E should be found only by going to A and pressing on that button.
Any idea how can I do that?
STACK
(App.js)
import React, { Component } from 'react'
import { createStackNavigator } from "#react-navigation/stack";
import { NavigationContainer } from "#react-navigation/native";
const Stack = createStackNavigator()
export default class App extends Component {
render() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName={"Main"}>
<Stack.Screen name="Main" component={MainScreen} style={{
headerShown: false}} />
<Stack.Screen name="screenE" component={screenE} />
</Stack.Navigator>
<NavigationContainer/>
)
}}
TAB
(Main Screen)
import React, { Component } from 'react'
import { createBottomTabNavigator } from "#react-navigation/bottom-tabs";
import { NavigationContainer } from "#react-navigation/native";
const Tab = createBottomTabNavigator()
export default class Main extends Component {
render() {
return (
<Tab.Navigator initialRouteName="screenA">
<Tab.Screen name="screenA" component={screenA} />
<Tab.Screen name="screenB" component={screenB} />
<Tab.Screen name="screenC" component={screenC} />
<Tab.Screen name="screenD" component={screenD} />
</Tab.Navigator>
)}}
If you have any questions please don't hesitate to ask. If there is anything wrong it please feel free to comment.
Related
I'm very new to react native.. very much still learning. I read the docs for react navigation but I can't get my bottom tab navigator to display. I run the project and it loads up just fine without any errors or warnings but my bottom tab navigation won't display. I'm not really sure where to start.. Below is a copy of what I wrote so far. This is written in a separate .js named tabnavigator.js
import {createBottomTabNavigator} from '#react-navigation/bottom-tabs';
import Dashboard from './src/screens/Dashboard';
import Agencyhome from './src/screens/Agencyhome';
const Tab = createBottomTabNavigator ();
const TabNavigator = () => {
return (
<Tab.Navigator>
<Tab.Screen name='Home' component={Dashboard} />
<Tab.Screen name="Agency" component={Agencyhome} />
</Tab.Navigator>
);
}
export default TabNavigator;
Here is what I have for my App.js
import React from 'react'
import { Provider } from 'react-native-paper'
import { NavigationContainer } from '#react-navigation/native'
import { createStackNavigator } from '#react-navigation/stack'
import firebase from 'firebase/app'
import 'firebase/auth'
import { theme } from './src/core/theme'
import {
AuthLoadingScreen,
StartScreen,
LoginScreen,
RegisterScreen,
ResetPasswordScreen,
Dashboard,
} from './src/screens'
import { FIREBASE_CONFIG } from './src/core/config'
const Stack = createStackNavigator()
if (!firebase.apps.length) {
firebase.initializeApp(FIREBASE_CONFIG)
}
export default function App() {
return (
<Provider theme={theme}>
<NavigationContainer>
<Stack.Navigator
initialRouteName="AuthLoadingScreen"
screenOptions={{
headerShown: false,
}}
>
<Stack.Screen
name="AuthLoadingScreen"
component={AuthLoadingScreen} />
<Stack.Screen name="StartScreen" component={StartScreen} />
<Stack.Screen name="LoginScreen" component={LoginScreen} />
<Stack.Screen name="RegisterScreen" component={RegisterScreen} />
<Stack.Screen name="Dashboard" component={Dashboard} />
<Stack.Screen name="ResetPasswordScreen" component={ResetPasswordScreen} />
</Stack.Navigator>
</NavigationContainer>
</Provider>
)
}
you must use Navigation Container
like this
import { NavigationContainer } from "#react-navigation/native";
import {createBottomTabNavigator} from '#react-navigation/bottom-tabs';
import Dashboard from './src/screens/Dashboard';
import Agencyhome from './src/screens/Agencyhome';
const Tab = createBottomTabNavigator ();
const TabNavigator = () => {
return (
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen name='Home' component={Dashboard} />
<Tab.Screen name="Agency" component={Agencyhome} />
</Tab.Navigator>
</NavigationContainer>
);
}
export default TabNavigator;
I was able to fix this by using the following component={TabNavigator} within stackscreen
I am working on a project that I want to switch between screens in one tab. for example I have 4 bottom tabs. and from the 1st tab, I want to move to another screen or component inside 1st tab
From this picture, I want to move to another screen or component by staying inside 1st tab.
Could anyone help me to get the possible way.
You need to nest navigators which is a basic feature of react-native-navigation.
This is described in the documentation here.
Navigating to a screen works as usual as it is described in the documentation here.
Here is a minimal working example for which I have made a working snack.
App.js
import React from 'react';
import {NavigationContainer} from '#react-navigation/native';
import Tabs from './Tabs'
export default function App() {
return (
<NavigationContainer>
<Tabs />
</NavigationContainer>
)
}
Tabs.js with 2 Tabs
import React from 'react';
import {createBottomTabNavigator} from '#react-navigation/bottom-tabs';
import Home from './Home.js'
import Profile from './Profile.js'
const Tab = createBottomTabNavigator();
function Tabs() {
return (
<Tab.Navigator>
<Tab.Screen name="Home" component={Home} />
<Tab.Screen name="Profile" component={Profile} />
</Tab.Navigator>
);
}
export default Tabs;
Home.js a StackNavigator
import React from 'react';
import {createNativeStackNavigator} from '#react-navigation/native-stack';
import ScreenA from './ScreenA.js'
import ScreenB from './ScreenB.js'
const Stack = createNativeStackNavigator()
function Home() {
return <Stack.Navigator>
<Stack.Screen name="" component={ScreenA} options={{headerShown: false}} />
<Stack.Screen name="ScreenB" component={ScreenB} />
</Stack.Navigator>
}
export default Home;
ScreenA.js
import React from 'react'
import { View, Button } from 'react-native'
function ScreenA(props) {
return <View>
<Button title="NavigateToScreenBInTabHone" onPress={() => props.navigation.navigate('ScreenB')}>
</Button>
</View>
}
export default ScreenA;
ScreenB.js
import React from 'react'
import { View } from 'react-native'
function ScreenB() {
return <View></View>
}
export default ScreenB;
Profile.js
import React from 'react'
import { View } from 'react-native'
function Profile() {
return <View></View>
}
export default Profile;
I am extremely new to React and React Native. I need some help regarding nesting a drawer navigator inside the current Stack Navigation.
I have the code on Snack, If someone can please help me i will really appreciate.
https://snack.expo.dev/#smith.james1982/github.com-callstack-react-native-paper-login-template
I want to put the Drawer navigation with Hamburger and Back Arrow using react-native-paper on the Home Screen.
Thanks very much in advance..
This is how i achieved the solution basically 2 navigations and using a state sharing library use-between. Hopefully it can be helpful to someone
import React, { memo, useState } from "react";
import { createStackNavigator } from "#react-navigation/stack";
import { createDrawerNavigator } from "#react-navigation/drawer";
import { NavigationContainer } from "#react-navigation/native";
import { HomeScreen, LoginScreen, RegisterScreen, ForgotPasswordScreen, Dashboard, Demo } from "./screens";
import { useLoginState } from "./core/state";
import { useBetween } from "use-between";
const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();
//Login navigation
const LoginNav = () => {
return (
<NavigationContainer>
<Stack.Navigator
screenOptions={{
headerShown: false,
}}
initialRouteName="HomeScreen"
>
<Stack.Screen name="HomeScreen" component={HomeScreen} />
<Stack.Screen name="LoginScreen" component={LoginScreen} />
<Stack.Screen name="RegisterScreen" component={RegisterScreen} />
<Stack.Screen name="ForgotPasswordScreen" component={ForgotPasswordScreen} />
<Stack.Screen name="Dashboard" component={Dashboard} />
</Stack.Navigator>
</NavigationContainer>
);
};
//Logged in Navigation
const LoggedInNav = () => {
return (
<NavigationContainer>
<Drawer.Navigator initialRouteName="Home">
<Drawer.Screen name="Home" component={Demo} />
</Drawer.Navigator>
</NavigationContainer>
);
};
export default function App() {
const { loggedIn, setIsLoggedIn } = useBetween(useLoginState);
return loggedIn ? <LoggedInNav /> : <LoginNav />;
}
I am using react native and react navigation. I am trying to create a nested navigator, i.e., I am trying to place a tab navigator within a stack navigator. When I run the app on iOS simulator, however, the main screen reloads infinitely. What might be wrong with the below code? New to react native...bear with me if this is a simple one!
Below is the part of the code where I am doing the nesting:
import React from 'react';
import Home from './routes/Home'
import Alert from './routes/Alert'
import Profile from './routes/Profile'
import Subs from './routes/Subs'
import Write from './routes/Write'
import OtherProfile from './routes/OtherProfile'
import Post from './routes/Post'
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import { SafeAreaView } from 'react-native-safe-area-context';
export default function App() {
const MainStack = createStackNavigator();
const Tab = createBottomTabNavigator();
function HomeTab() {
return (
<Tab.Navigator>
<Tab.Screen name="Home" component={Home}/>
<Tab.Screen name="Subs" component={Subs}/>
<Tab.Screen name="Write" component={Write} options={{ tabBarVisible: false }}/>
<Tab.Screen name="Alert" component={Alert}/>
<Tab.Screen name="Profile" component={Profile}/>
</Tab.Navigator>
)
}
function MainStackScreen() {
return (
<MainStack.Navigator>
<MainStack.Screen name="HomeTab" component={HomeTab} options = {{ headerShown: false }} />
<MainStack.Screen name="Post" component={Post} />
<MainStack.Screen name="OtherProfile" component={OtherProfile} />
</MainStack.Navigator>
)
}
return (
<NavigationContainer>
<SafeAreaView style={{flex:1}}>
<MainStackScreen/>
</SafeAreaView>
</NavigationContainer>
)
}
Found the answer right after posting this.
I declared the navigators and the navigation components outside of the App component and it works.
I am updating my code to use the react-navigation 5.x, but I don't know how to implement the stack navigation with a bottom tab navigator in this version. I use the bottom tab navigator only on the screens that appear after the user logs in. On the initial screen, there is only navigation with custom buttons. My problem is I don't know how to create the route to that necessity I have. I've been looking for a code example, but I only found codes that use the bottom tab navigator alone. Could you please give me an example of code I can use? I would appreciate it
I have this piece of code that is what I have working right now
import React from 'react'
import { createStackNavigator } from '#react-navigation/stack';
import { NavigationContainer } from '#react-navigation/native';
import Login from '../screens/Login'
import Register from '../screens/Register'
import Main from '../screens/Main'
import Ex1 from '../screens/Ex1'
import Ex2 from '../screens/Ex2'
const AuthStack = createStackNavigator();
const AuthStackScreen = () => (
<NavigationContainer>
<AuthStack.Navigator
initialRouteName="Login"
screenOptions={{
headerShown: false
}}>
<AuthStack.Screen
name="Login"
component={Login}
/>
<AuthStack.Screen
name="Register"
component={Register}
/>
</AuthStack.Navigator>
</NavigationContainer>
);
export default AuthStackScreen
you can do somethin like this:
export default function ComponentC() {
return(
<View>
<Text>It Works!</Text>
</View>
)
}
export default function ComponentB() {
return (
<Stack.Navigator initialRouteName={'Main'}>
<Stack.Screen name={'Main'} component={ComponentC} />
</Stack.Navigator>
);
}
export default function ComponentA () {
return (
<NavigationContainer>
<Tab.Navigator
initialRouteName={'ComponentB'}
>
<Tab.Screen name={'ComponentB'} component={ComponentB} options={{ tabBarIcon: ({color}) => (
<FontAwesome5 color={color} name={'check-square'} size={20}/>
)}} />
</Tab.Navigator>
</NavigationContainer>
);
}
The Component B going to be called in the Bottom Tab Navigator and the initial route is gonna be the Component C.