Trying to navigate to a webview on my mobile app - react-native

Question

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

Answer 1

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.