Hey I'm using react native to build an app for android, ios and web, I'm using https://reactnative.dev/docs/navigation for navigation, it works fine on android and IOs but on web I've stumbled open 2 problems.
First is the next screen always open in the same page, I want it to go to a new page.
Second, Let's assume I'm on the third screen in the stack and if I hit refresh in the browser It goes to the first screen(in my case the first screen is the login screen).
What can I do to solve this problem? is there any other navigation framework that I should use for web, android and ios, or do you have completely different thing to suggest?
import 'react-native-gesture-handler';
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import {
StyleSheet,
Text,
View,
} from 'react-native';
import { NavigationContainer, StackActions } from "#react-navigation/native";
import { createStackNavigator } from "#react-navigation/stack";
import LoginScreen from './screen/LoginScreen';
import HomeScreen from './screen/HomeScreen';
import AboutUsScreen from './screen/AboutUsScreen';
import ProgramsScreen from './screen/ProgramsScreen';
import ResourcesScreen from './screen/ResourcesScreen';
import NewsScreen from './screen/NewsScreen';
const Stack = createStackNavigator();
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator
screenOptions={{ headerShown: true }}
>
<Stack.Screen name="LoginScreen" component={LoginScreen} />
<Stack.Screen name="HomeScreen" component={HomeScreen}/>
<Stack.Screen name="AboutUsScreen" component={AboutUsScreen}/>
<Stack.Screen name="ProgramsScreen" component={ProgramsScreen}/>
<Stack.Screen name="ResourcesScreen" component={ResourcesScreen}/>
<Stack.Screen name="NewsScreen" component={NewsScreen}/>
</Stack.Navigator>
</NavigationContainer>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
For anyone looking for an answer, I solved it, I created 2 App.js files, App.js for web and App.android.js for android, In App.android.js I used react navigation for navigating and for the web I used routes, Using routes removed the problem which was on refreshing the page the app would jump to the login screen.
Related
That's my code. I am working with expo. This just shows a blank white background but the URL doesn't load up
On expo documentation page. it seems pretty easy but I have no idea if it is cause I am navigating to the webview that's why I am facing this issue. P.S no error or warning is shown
1.) create Expo Project
expo init rnwebviewnav
2.) install expo react navigation from react navigation
npx expo install react-native-screens react-native-safe-area-context
3.) install webview with expo
expo install react-native-webview
4.) Create a folder called src (for source) and add your files. For me, I added 2 files there Like this
5.) make sure your package.json looks like this (or has this components as dependencies)
6.) Make sure your App.js Looks like this
import React from "react";
import { NavigationContainer } from "#react-navigation/native";
import { createStackNavigator } from "#react-navigation/stack";
import WebViewPage from "./src/WebViewPage";
import ButtonPage from "./src/ButtonPage";
const Stack = createStackNavigator();
const App = () => {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="ButtonPage"
component={ButtonPage}
options={{ headerShown: false }}
/>
<Stack.Screen
name="WebViewPage"
component={WebViewPage}
options={{ title: "Webview Page" }}
/>
</Stack.Navigator>
</NavigationContainer>
);
};
export default App;
7.) Make sure the page that navigates to the Webview Looks like this
Button Page
import { Button, StyleSheet, Text, View } from 'react-native'
import React from 'react'
import { useNavigation } from '#react-navigation/native';
const ButtonPage = () => {
const navigation = useNavigation();
const navigateToWebView = () =>{
navigation.navigate('WebViewPage');
}
return (
<View style={{flex:1, justifyContent:'center'}}>
<Text>ButtonPage</Text>
<Button onPress={navigateToWebView} title="Click to Navigate" color="#841584" />
</View>
)
}
export default ButtonPage
const styles = StyleSheet.create({})
8.) Make sure your Webview Page looks thus
Web View Page
import { SafeAreaView, StyleSheet, Text, View } from 'react-native'
import React from 'react'
import WebView from 'react-native-webview'
const WebViewPage = () => {
return (
<SafeAreaView style={{ flex: 1 }}>
<WebView
source={{ uri: 'https://reactnative.dev/' }}
/>
</SafeAreaView>
)
}
export default WebViewPage
const styles = StyleSheet.create({})
9.) run npm start on your terminal to see what you have done so far!
button page
webview page
I believe I have answered your question :) If yes , pls upvote my answer if it has helped you.
I am currently developing an application using React Native. I wanted to add Bottom Navigation and Tab Navigation. However, came across this bug.
As seen in the screenshot the top section is the Tab Navigation and the bottom section is the bottom navigation. Some how they got separated.
import { NavigationContainer } from '#react-navigation/native';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import React from 'react';
import AroundYou from './Screens/AroundYou';
import HighlyRated from './Screens/HighlyRated';
import { createMaterialTopTabNavigator } from '#react-navigation/material-top-tabs'
const Tab = createBottomTabNavigator();
const TopNavigation = createMaterialTopTabNavigator();
function Tabs() {
return (
<Tab.Navigator screenOptions={{
headerShown: false, tabBarAllowFontScaling: false, tabBarStyle: {
backgroundColor: "#181A20"
}
}} >
<Tab.Screen name="Home" component={AroundYou}/>
</Tab.Navigator>
)
}
const App = () => {
return (
<>
<NavigationContainer>
<TopNavigation.Navigator>
<TopNavigation.Screen name="AroundYou" component={AroundYou} />
<TopNavigation.Screen name="HighlyRated" component={HighlyRated} />
</TopNavigation.Navigator>
</NavigationContainer>
<NavigationContainer>
<Tabs />
</NavigationContainer>
</>
)
}
export default App;
this is the code for the Top Tab Navigation as well as the bottom navigation. I am kind of know what it causing this bug but not sure on how to get around it.
Thank you
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 starting to learn react native and I'm trying to change the header color but when I run the app only the text color changed to white. And the terminal shows some warning. Are both of them related? Here are some screenshots of it.
import 'react-native-gesture-handler';
import { setStatusBarBackgroundColor, StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet} from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createNativeStackNavigator } from '#react-navigation/native-stack';
import LoginScreen from './screens/LoginScreen';
const globalScreenOptions ={
headerStyle: { BackgroundColor:"dodgerblue" },
headerTitleStyle: {color: "white"},
headerTinColor:"white",
};
const Stack = createNativeStackNavigator();
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator screenOptions={globalScreenOptions} >
<Stack.Screen name='Login' component={LoginScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
enter image description here
enter image description here
Try This its working you must provide style on Stack.Screen
<Stack.Screen options={{headerStyle:{backgroundColor:'dodgerblue'}}}name="Settings" component={SettingsScreen} />
I'm trying to understand the basics of deep linking when in the development stage, by following this guide (https://reactnavigation.org/docs/deep-linking/). When I try to run the command suggested by the guide, the simulator hits me with a "there was a problem loading the requested app" then shows the address that I was trying to access. When I check the expo client, the cli isn't running, im not sure if this is a side-effect of the failure or the reason why it's failing as if npx uri-scheme open exp://127.0.0.1:19000/login --ios doesn't start expo.
I really wouldn't doubt it if the issue is in the way I tried and set it up. Heres the code.
import * as React from 'react';
import { View, Text, Button } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import Login from "./screens/login";
import * as Linking from 'expo-linking';
function HomeScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
<Button title="login" onPress={() => navigation.navigate('Login')} />
</View>
);
}
const Stack = createStackNavigator();
const prefix = Linking.makeUrl('/');
function App() {
const linking = {
prefixes: [prefix],
config: {
screens: {
Login: "/login"
}
},
};
return (
<NavigationContainer linking={linking} fallback={<Text>Loading content...</Text>}>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen hide name="Home" component={HomeScreen} />
<Stack.Screen hide name="Login" component={Login} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
note that the login page is another file, just containing text for test purposes.
I'm pretty positive this is incorrect is probably many ways. How I understood this is that when the /login follows the host path, it would link the user to the login page. What am I missing? Thanks!