I want to create a splashscreen without the whitescreen issue using the react-native splash screen and after that I want to check the navigation. Suppose I got 3 screen Splash, Login and Home. If the user is logged in I want to navigate to the Home screen from the Splash screen otherwise I want to navigate it to the Login page from the Splash screen. How do I achieve this using react-native-splash-screen and react-navigation.
App.js
import React from 'react';
import {ActivityIndicator} from 'react-native';
import {Provider} from 'react-redux';
import {SafeAreaProvider} from 'react-native-safe-area-context';
import {PersistGate} from 'redux-persist/es/integration/react';
import Navigator from './app/navigation/NavigationStack';
import configureStore from './app/store/configureStore';
const {persistor, store} = configureStore();
export default function App() {
return (
<SafeAreaProvider>
<Provider store={store}>
<PersistGate loading={<ActivityIndicator />} persistor={persistor}>
<Navigator></Navigator>
</PersistGate>
</Provider>
</SafeAreaProvider>
);
}
NavigationStack.js
function MyStack() {
return (
<NavigationContainer ref={navigationRef}>
<Stack.Navigator
screenOptions={{
headerShown: false,
}}>
<Stack.Screen
name={Strings.string_SignInScreen}
component={SignInScreen}
/>
<Stack.Screen name={Strings.string_HomeScreen} component={Home} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default MyStack;
You can do something like this,in its componentDidMount cehck fro user exits via asyncstorage etc, and then navigate accordingly
import SplashScreen from 'react-native-splash-screen'
export default class WelcomePage extends Component {
componentDidMount() {
// do stuff while splash screen is shown
// After having done stuff (such as async tasks) hide the splash screen
if(userExists){
SplashScreen.hide();
this.props.navigation.navigate('Homescreen');
} else {
this.props.navigation.navigate('LoginScreen');
}
}
}
Hope it helps. feel free for doubts
Related
I would like to hide drawer navigation from the list component and it still be shown in the UserHomeScreen which is the stack navigation. It works if I just use the useState, hideHeader/setHideHeader, from App.js but it is not efficient way to do this. I tried my best to look for a solution but I really can't find. I am new to react native and have a limited knowledge.
Can anyone help me how am I going do it? Please help.
BTW here is the version of my drawer: ^6.0.1, if that helps.
Thank you so much!
App.js
import React from 'react'
// components
import UserHomeScreen from './src/components/user/pages/UserHomeScreen';
import Cart from './src/components/user/pages/Cart';
import Receipt from './src/components/user/pages/Receipt';
//redux
import store from './src/redux/store'
// libraries
import { NavigationContainer } from '#react-navigation/native';
import { createDrawerNavigator } from '#react-navigation/drawer';
import { Provider } from 'react-redux';
const Drawer = createDrawerNavigator();
const App = () => {
const [hideHeader, setHideHeader] = React.useState(false);
return (
<Provider store={store}>
<NavigationContainer>
{/* this hide drawer */}
{/* options={{headerShown: false}} */}
<Drawer.Navigator >
<Drawer.Screen name="Home" >
{() => <UserHomeScreen setHideHeader={setHideHeader} />}
</Drawer.Screen>
<Drawer.Screen name="Cart" component={Cart} />
<Drawer.Screen name="Receipt" component={Receipt} />
</Drawer.Navigator>
</NavigationContainer>
</Provider>
)
}
export default App;
UserHomeScreen.js
import React from 'react'
import List from '../components/User Home Screen/List';
import { createStackNavigator } from '#react-navigation/stack';
import ItemDetails from '../components/User Home Screen/ItemDetails';
import { useNavigation } from '#react-navigation/native';
import { Button } from 'react-native';
const Stack = createStackNavigator();
const UserHomeScreen = () => {
function backHandler(){
navigation.navigate('List')
}
// this hide the drawer header but I want it inside the list
// but if I do, the stack header that hides not the drawer header.
// React.useEffect(() => {
// navigation.setOptions({
// headerShown: false
// });
// })
const navigation = useNavigation();
return (
<Stack.Navigator>
<Stack.Screen name='List' component={List}>
</Stack.Screen>
<Stack.Screen name='Item Details' component={ItemDetails}
options={{
headerLeft: () => <Button title='Back' onPress={backHandler}/>
}}
/>
</Stack.Navigator>
)
}
export default UserHomeScreen;
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'm trying to change screens and I can't, it doesn't report any errors, the button just doesn't work, I click and it doesn't change screens.
SignIn.tsx
import { useNavigation } from "#react-navigation/native";
export function SignIn(){
const navigation = useNavigation();
function handleSignIn() {
navigation.navigate('Home')
}
return(
<View style={styles.container}>
<ButtonIcon
title="Next"
activeOpacity={0.7}
onPress={handleSignIn}
/>
</View>
)
}
Routes.tsx
import React from 'react';
import { createStackNavigator } from '#react-navigation/stack';
import { Home } from '../screens/Home';
import { SignIn } from '../screens/SignIn';
const { Navigator, Screen } = createStackNavigator();
export function AuthRoutes() {
return(
<Navigator screenOptions={{headerShown: false}}>
<Screen name="SignIn" component={SignIn}/>
<Screen name="Home" component={Home}/>
</Navigator>
)
}
As I said, there is no error in the code, at least according to the IDE there is no error, I can run the application, but when I click the button it has no effect, nothing happens. I've already modified a lot, added and removed, but I couldn't make it work, I don't know what I'm doing wrong.
How can I access the label of the drawer inside the page where I am actually implementing the component? example:
DrawerNavigator.js
import { createDrawerNavigator } from "#react-navigation/drawer";
import Home from '../screens/Home'
import Contact from '../screens/Contact'
const Drawer = createDrawerNavigator();
const DrawerNavigation= (props) => {
return (
<Drawer.Navigator
<Drawer.Screen
key='home'
name= "home page"
component={Home}
/>
<Drawer.Screen
key='contact'
name="contact us"
component={Contact}
/>
</Drawer.Navigator>
);
}
export default DrawerNavigation;
Now I want to access the drawer label in my Home.js file which is the following:
import { View, StyleSheet, Text } from "react-native"
const Home = (props) =>{
return (<View>
<Text>Hello world</Text>
</View>)
}
export default Home
You can pass it as initialParams to you navigation screen.
Kindly follow this for details/example
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.