error: package androidx.core.content does not existimport androidx.core.content.FileProvider;

[luanbon]

Bug description:

New React Native Project.
"react-native-webview": "6.0.1"

Error when build (react-native run-android)

Task :react-native-webview:compileDebugJavaWithJavac
(omited)\node_modules\react-native-webview\android\src\main\java\com\reactnativecommunity\webview\RNCWebViewFileProvider.java:3: error: package androidx.core.content does not exist
import androidx.core.content.FileProvider;

To Reproduce:

1. New React Native Project With Cli
2. yarn add react-native-webview
3. react-native link react-native-webview

App.json

import React, {Component} from 'react'
import {StyleSheet} from 'react-native'
import { WebView } from 'react-native-webview'

type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <WebView source={{uri: 'https://www.google.com'}} />
    );
  }
}

Complete Error:

info Starting JS server...
info Building and installing the app on the device (cd android && gradlew.bat app:installDebug)...

Configure project :react-native-webview
:react-native-webview:reactNativeAndroidRoot C:\GIT\Ragnarok\ragnarok-app-webview\node_modules\react-native\android

Task :react-native-webview:compileDebugJavaWithJavac
C:\GIT\Ragnarok\ragnarok-app-webview\node_modules\react-native-webview\android\src\main\java\com\reactnativecommunity\webview\RNCWebViewFileProvider.java:3: error: package androidx.core.content does not exist
import androidx.core.content.FileProvider;
^
C:\GIT\Ragnarok\ragnarok-app-webview\node_modules\react-native-webview\android\src\main\java\com\reactnativecommunity\webview\RNCWebViewFileProvider.java:10: error: cannot find symbol
public class RNCWebViewFileProvider extends FileProvider {
^
symbol: class FileProvider
C:\GIT\Ragnarok\ragnarok-app-webview\node_modules\react-native-webview\android\src\main\java\com\reactnativecommunity\webview\RNCWebViewModule.java:14: error: cannot find symbol
import androidx.annotation.RequiresApi;
^
symbol: class RequiresApi
location: package androidx.annotation
C:\GIT\Ragnarok\ragnarok-app-webview\node_modules\react-native-webview\android\src\main\java\com\reactnativecommunity\webview\RNCWebViewModule.java:15: error: package androidx.core.content does not exist
import androidx.core.content.ContextCompat;
^
C:\GIT\Ragnarok\ragnarok-app-webview\node_modules\react-native-webview\android\src\main\java\com\reactnativecommunity\webview\RNCWebViewModule.java:16: error: package androidx.core.content does not exist
import androidx.core.content.FileProvider;
^
C:\GIT\Ragnarok\ragnarok-app-webview\node_modules\react-native-webview\android\src\main\java\com\reactnativecommunity\webview\RNCWebViewModule.java:178: error: cannot find symbol
@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
^
symbol: class RequiresApi
location: class RNCWebViewModule
C:\GIT\Ragnarok\ragnarok-app-webview\node_modules\react-native-webview\android\src\main\java\com\reactnativecommunity\webview\RNCWebViewModule.java:224: error: cannot find symbol
if (ContextCompat.checkSelfPermission(getCurrentActivity(), Manifest.permission.WRITE_EXTERNAL_STORAGE) != PackageManager.PERMISSION_GRANTED) {
^
symbol: variable ContextCompat
location: class RNCWebViewModule
C:\GIT\Ragnarok\ragnarok-app-webview\node_modules\react-native-webview\android\src\main\java\com\reactnativecommunity\webview\RNCWebViewModule.java:352: error: cannot find symbol
return FileProvider.getUriForFile(getReactApplicationContext(), packageName + ".fileprovider", capturedFile);
^
symbol: variable FileProvider
location: class RNCWebViewModule
Note: C:\GIT\Ragnarok\ragnarok-app-webview\node_modules\react-native-webview\android\src\main\java\com\reactnativecommunity\webview\RNCWebViewManager.java uses or overrides a deprecated API.
Note: Recompile with -Xlint:deprecation for details.
Note: C:\GIT\Ragnarok\ragnarok-app-webview\node_modules\react-native-webview\android\src\main\java\com\reactnativecommunity\webview\RNCWebViewManager.java uses unchecked or unsafe operations.
Note: Recompile with -Xlint:unchecked for details.
8 errors

Task :react-native-webview:compileDebugJavaWithJavac FAILED

FAILURE: Build failed with an exception.

• What went wrong:
  Execution failed for task ':react-native-webview:compileDebugJavaWithJavac'.

Compilation failed; see the compiler error output for details.

Environment:

• OS: Windows
• OS version: 10
• react-native version: 0.59.8
• react-native-webview version: 6.0.1

[ycai2]

I currently have the same problem, but I was able to find that you can add

android.useAndroidX=true
android.enableJetifier=true

to make your project compatible with AndroidX. However, I still get

/MyAwesomeProject/node_modules/react-native-webview/android/src/main/java/com/reactnativecommunity/webview/RNCWebViewManager.java:13: error: package android.support.annotation does not exist
import android.support.annotation.RequiresApi;
                                 ^
/MyAwesomeProject/node_modules/react-native-webview/android/src/main/java/com/reactnativecommunity/webview/RNCWebViewManager.java:687: error: cannot find symbol
    @RequiresApi(api = Build.VERSION_CODES.KITKAT)
     ^
  symbol:   class RequiresApi
  location: class RNCWebChromeClient
Note: /MyAwesomeProject/node_modules/react-native-webview/android/src/main/java/com/reactnativecommunity/webview/RNCWebViewManager.java uses or overrides a deprecated API.
Note: Recompile with -Xlint:deprecation for details.
Note: /MyAwesomeProject/node_modules/react-native-webview/android/src/main/java/com/reactnativecommunity/webview/RNCWebViewManager.java uses unchecked or unsafe operations.
Note: Recompile with -Xlint:unchecked for details.

This is very frustrating as even the fresh install of the app from scratch wouldn't work...

[luanbon]

I currently have the same problem, but I was able to find that you can add

android.useAndroidX=true
android.enableJetifier=true

to make your project compatible with AndroidX. However, I still get

/MyAwesomeProject/node_modules/react-native-webview/android/src/main/java/com/reactnativecommunity/webview/RNCWebViewManager.java:13: error: package android.support.annotation does not exist
import android.support.annotation.RequiresApi;
                                 ^
/MyAwesomeProject/node_modules/react-native-webview/android/src/main/java/com/reactnativecommunity/webview/RNCWebViewManager.java:687: error: cannot find symbol
    @RequiresApi(api = Build.VERSION_CODES.KITKAT)
     ^
  symbol:   class RequiresApi
  location: class RNCWebChromeClient
Note: /MyAwesomeProject/node_modules/react-native-webview/android/src/main/java/com/reactnativecommunity/webview/RNCWebViewManager.java uses or overrides a deprecated API.
Note: Recompile with -Xlint:deprecation for details.
Note: /MyAwesomeProject/node_modules/react-native-webview/android/src/main/java/com/reactnativecommunity/webview/RNCWebViewManager.java uses unchecked or unsafe operations.
Note: Recompile with -Xlint:unchecked for details.

This is very frustrating as even the fresh install of the app from scratch wouldn't work...

So frustrating ! I did a poc last week with version 5.8.1 and it worked fine, starting the new project today from scratch with new version not working anymore...

[muhamad-rizki]

#520 try using rn webview lower than v6.0.0 like v5.9.0

I'm using below version to make it work:
RN v59.8
RN Webview v5.8.0

[pranavpandey1998official]

lower versions shows #579

[muhamad-rizki]

lower versions shows #579

try v5.8.0 or 5.8.1

[pranavpandey1998official]

lower versions shows #579

try v5.8.0 or 5.8.1

same behaviour not working :(

[muhamad-rizki]

it's weird, try to remove it first with react-native uninstall react-native-webview, then install it again with react-native install [email protected] maybe your local still caching the last installed

[chrischenyc]

thanks to @muhamad-rizki, 5.8.0 works for me after several attempts.

remember to react-native unlink react-native-webview, install 5.8.0 version, and react-native link react-native-webview again.

I even used command watchman watch-del-all && rm package-lock.json && rm -rf node_modules && rm -rf $TMPDIR/metro-* && rm -rf $TMPDIR/haste-map-* && npm install to nuke anything cached.

were I to tell my native app dev peers that I spent one hour just to get the bloody system web view to work, they would roll on the floor laughing

this is typical working with React Native: most of the time you're flying, but what we say to platform native component bridging? NOT TODAY

[flyinghawker]

with total fresh project,
I did try
react-native uninstall react-native-webview
react-native install [email protected] or 5.8.0
still not work,
waiting for later lib fix or other solution.

[abhijithvijayan]

thanks to @muhamad-rizki, 5.8.0 works for me after several attempts.

remember to react-native unlink react-native-webview, install 5.8.0 version, and react-native link react-native-webview again.

I even used command watchman watch-del-all && rm package-lock.json && rm -rf node_modules && rm -rf $TMPDIR/metro-* && rm -rf $TMPDIR/haste-map-* && npm install to nuke anything cached.

were I to tell my native app dev peers that I spent one hour just to get the bloody system web view to work, they would roll on the floor laughing

this is typical working with React Native: most of the time you're flying, but what we say to platform native component bridging? NOT TODAY

I did as said and build was successful but this error pops up on the emulator.

Update:

Turns out In MainApplication.java

new RNCWebViewPackage() was duplicated automatically

[Titozzz]

Hello everyone, Android X was supposed to be completely invisible as a change. I'll check everything tomorrow and come back to you with a solution. Meanwhile please use 5.8.1 if 6.0.x is broken for you !

[react-native-community-bot]

🎉 This issue has been resolved in version 6.0.2 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[Titozzz]

Hello I fixed 6.0.2 and also released 5.9.1 if you don't want to upgrade!

[chrischenyc]

@Titozzz just upgraded to 6.0.2, did clean up node_modules, still can't get Android project to compile:

1. Android Studio would complain following files are missing

// com.reactnativecommunity.webview.RNCWebViewModule.java

import androidx.annotation.RequiresApi;
import androidx.core.content.ContextCompat;
import androidx.core.content.FileProvider;

2. Enabled AndroidX following this guide

3. error mentioned in step 1 is gone, but react-native-gesture-handler is failing because of using the support library v4, someone reported the issue there

since react-native-gesture-handler is being widely used (partially because react-navigation requires it), we might need to stay on 5.9.1 for a while

[Titozzz]

@chrischenyc
There is going to be a transition period from old libraries to AndroidX, I also use RNGH in my personal project.
I keep publishing on the 5.X branch, I'll add the incompatibilities to readme and discuss with other libraries maintainers.

[Titozzz]

I've changed the latest to be 5.9.1

[jamonholmgren]

FYI -- the relevant change is to add this to your ./android/gradle.properties file:

android.useAndroidX=true
android.enableJetifier=true

[rochapablo]

"react-native-webview": "^5.11.0", still getting the error. Now I'm going test with 5.9.1.

... and yes, I have add

android.useAndroidX=true
android.enableJetifier=true

[UPDATE]

5.9.1 still giving the error

> Task :react-native-webview:compileDebugJavaWithJavac FAILED
node_modules/react-native-webview/android/src/main/java/com/reactnativecommunity/webview/RNCWebViewModule.java:14: error: package android.support.annotation does not exist
import android.support.annotation.RequiresApi;
                                 ^
node_modules/react-native-webview/android/src/main/java/com/reactnativecommunity/webview/RNCWebViewModule.java:15: error: package android.support.v4.content does not exist
import android.support.v4.content.ContextCompat;
                                 ^
node_modules/react-native-webview/android/src/main/java/com/reactnativecommunity/webview/RNCWebViewModule.java:16: error: package android.support.v4.content does not exist
import android.support.v4.content.FileProvider;
                                 ^
node_modules/react-native-webview/android/src/main/java/com/reactnativecommunity/webview/RNCWebViewFileProvider.java:3: error: package android.support.v4.content does not exist
import android.support.v4.content.FileProvider;
                                 ^
node_modules/react-native-webview/android/src/main/java/com/reactnativecommunity/webview/RNCWebViewFileProvider.java:10: error: cannot find symbol
public class RNCWebViewFileProvider extends FileProvider {
                                            ^
  symbol: class FileProvider
node_modules/react-native-webview/android/src/main/java/com/reactnativecommunity/webview/RNCWebViewManager.java:13: error: package android.support.annotation does not exist
import android.support.annotation.RequiresApi;
                                 ^
node_modules/react-native-webview/android/src/main/java/com/reactnativecommunity/webview/RNCWebViewModule.java:178: error: cannot find symbol
  @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
   ^
  symbol:   class RequiresApi
  location: class RNCWebViewModule
node_modules/react-native-webview/android/src/main/java/com/reactnativecommunity/webview/RNCWebViewManager.java:692: error: cannot find symbol
    @RequiresApi(api = Build.VERSION_CODES.KITKAT)
     ^
  symbol:   class RequiresApi
  location: class RNCWebChromeClient
node_modules/react-native-webview/android/src/main/java/com/reactnativecommunity/webview/RNCWebViewModule.java:224: error: cannot find symbol
    if (ContextCompat.checkSelfPermission(getCurrentActivity(), Manifest.permission.WRITE_EXTERNAL_STORAGE) != PackageManager.PERMISSION_GRANTED) {
        ^
  symbol:   variable ContextCompat
  location: class RNCWebViewModule
node_modules/react-native-webview/android/src/main/java/com/reactnativecommunity/webview/RNCWebViewModule.java:352: error: cannot find symbol
    return FileProvider.getUriForFile(getReactApplicationContext(), packageName + ".fileprovider", capturedFile);
           ^
  symbol:   variable FileProvider
  location: class RNCWebViewModule
Note: node_modules/react-native-webview/android/src/main/java/com/reactnativecommunity/webview/RNCWebViewManager.java uses or overrides a deprecated API.
Note: Recompile with -Xlint:deprecation for details.
Note: node_modules/react-native-webview/android/src/main/java/com/reactnativecommunity/webview/RNCWebViewManager.java uses unchecked or unsafe operations.
Note: Recompile with -Xlint:unchecked for details.
10 errors

FAILURE: Build failed with an exception.

"react": "16.8.3",
"react-native": "0.59.9",

[johnnfujita]

i was running getting this issue when installing without specifying the package version today. when i setted it to:

• yarn add [email protected]
  it worked!! Everytime i'm starting new projects i got shivers on my spine, don't even talk about updates. Specially when working on backends that have a lot of external api calls besides the own dependencies.

[sorin21]

it's weird, try to remove it first with react-native uninstall react-native-webview, then install it again with react-native install [email protected] maybe your local still caching the last installed

Thank you, thank you. After I did what you said, I checked the app and I don't get any error anymore :)

[wenchao1020]

add jetifier will fixed it
npm install --save-dev jetifier
npx jetify
npx react-native run-android

[gustawdaniel]

@wenchao1020 why so many negative reactions under your comment?

In my case it was working solution.