React Natrive WebView is Deprecated

Expo Development Tools
1

React Native WebView is Deprecated. is any replacement of this webview in expo cli?

2
3

Hi @satyam.ypo

To clarify, there is still a package called react-native-webview, but now it lives somewhere else and you import it differently.

Old:

import { WebView } from 'react-native';

New:

import { WebView } from 'react-native-webview';

And you should install it with expo install react-native-webview to ensure that you get a version that is compatible with the version of the Expo SDK that you are using.

6

But when we start using draw navigation.WebView is not working. it just shows a blank screen. in expo. can plz help on that

7

But when we start using draw navigation.WebView is not working. it just shows a blank screen. in expo. can plz help with that

8

Post some code. I don’t know what you mean by “start using draw navigation.WebView”

9

App.tsx


import React from 'react';
import { Button, View, Text } from "react-native";
//import Tabnav from './nav/Tabnav';
import MenuOpt from './nav/MenuOpt';

export default class App extends React.Component {
  render() {
    return (<View>
      <MenuOpt></MenuOpt>
    </View>);
  }
}

MenuOpt.js

import React from 'react';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';

import Home from './../Home';
import About from './../About';
import Service from './../Service';


const Drawer = createDrawerNavigator();
function MenuOpt() {
return (
<NavigationContainer>
    <Drawer.Navigator initialRouteName="Home">
        <Drawer.Screen name="Home" component={Home} />
        <Drawer.Screen name="About" component={About} />
        <Drawer.Screen name="Service" component={Service} />
    </Drawer.Navigator>
</NavigationContainer>
);
}

export default MenuOpt;

LoadURL.js

import { WebView } from 'react-native-webview';
import React from "react";

export default function LoadURL(prop) {

    //cosnt get_urls;
    

    return (<WebView
        source={{ uri: prop.eturl }}
        style={{ marginTop: 20 }}
        />
        
    );
  }

Home.js

import React from "react";
import { Button, View, Text } from "react-native";
import { WebView } from 'react-native-webview';
import LoadURL from'./LoadURL';

export default class Homescreen  extends React.Component{
 
render(){
return(
    <LoadURL name="test home page" eturl="https://google.com"/>
)
}
 
}

About.js

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import { WebView } from 'react-native-webview';
import LoadURL from'./LoadURL';
 
export default class Aboutscreen extends Component {
render() {
    return (<LoadURL name="test about page" eturl="https://yahoo.com"/>)
}
}

Service.js

import React, { Component } from 'react';
import { SafeAreaView, Text } from 'react-native';
import { WebView } from 'react-native-webview';
import LoadURL from'./LoadURL';
//<LoadURL name="test services page" eturl="https://www.rediff.com"/>
 
export default class Services extends Component {
render() {
    return (<SafeAreaView style={{ flex: 1 }}>
            <Text>Header</Text>
            
            <WebView
source={{ uri: 'https://www.google.com/' }}
style={{ marginTop: 20 }}
/>
            <Text>FOOTHER</Text>
            </SafeAreaView>)
}
}

package.json

{
  "name": "react-native-webview-example",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "@react-native-community/masked-view": "^0.1.11",
    "@react-navigation/bottom-tabs": "^6.3.1",
    "@react-navigation/drawer": "^6.4.2",
    "@react-navigation/native": "^6.0.10",
    "expo": "~45.0.5",
    "expo-status-bar": "~1.3.0",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-native": "0.68.2",
    "react-native-gesture-handler": "~2.2.1",
    "react-native-paper": "^3.12.0",
    "react-native-reanimated": "~2.8.0",
    "react-native-safe-area-context": "4.2.4",
    "react-native-screens": "~3.11.1",
    "react-native-vector-icons": "^9.2.0",
    "react-native-web": "0.17.7",
    "react-native-webview": "11.18.1",
    "react-navigation": "^4.4.4",
    "react-navigation-material-bottom-tabs": "^2.3.5"
  },
  "devDependencies": {
    "@babel/core": "^7.18.5",
    "@types/react": "~17.0.21",
    "@types/react-native": "~0.67.9",
    "typescript": "~4.7.4"
  },
  "private": true
}
10

Where are you testing this? WebView is not supported in React Native Web, but it works for me on Android and iOS:

11

Yes i am not testing in browser (react native web)i am testing it in android.

12

Does the snack work for you?

13

yes sanck is working for me

14

OK, so I think you should be able to figure out what’s wrong by altering your code to look more like my snack, or altering the snack to look more like your code. At some point you’ll find something that breaks the snack or fixes your code :slight_smile:

1 Like