React-native: 0.62.0 Android API level 16 broken: Flipper

[SrMouraSilva]

Description

When I run a new react native v0.62.0 Android app, it broken

React Native version:

System:
    OS: Linux 5.0 Ubuntu 19.04 (Disco Dingo)
    CPU: (8) x64 Intel(R) Core(TM) i7-8565U CPU @ 1.80GHz
    Memory: 1.03 GB / 15.38 GB
    Shell: 5.0.3 - /bin/bash
  Binaries:
    Node: 12.14.0 - /tmp/yarn--1585763432742-0.5895315424087944/node
    Yarn: 1.21.1 - /tmp/yarn--1585763432742-0.5895315424087944/yarn
    npm: 6.13.4 - ~/.nvm/versions/node/v12.14.0/bin/npm
    Watchman: Not Found
  SDKs:
    Android SDK:
      API Levels: 16, 28, 29
      Build Tools: 28.0.3, 29.0.3
      System Images: android-16 | Google APIs Intel x86 Atom, android-28 | Google APIs Intel x86 Atom_64
      Android NDK: Not Found
  IDEs:
    Android Studio: Not Found
  Languages:
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.11.0 => 16.11.0 
    react-native: 0.62.0 => 0.62.0 
  npmGlobalPackages:
    *react-native*: Not Found

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

1. Use an API 16 Android emulator
2. npx react-native init AwesomeProject
3. yarn react-native run-android
4. Wait
5. App broken
6. Check logcat (adb logcat | grep 'AndroidRuntime')

E/AndroidRuntime( 5079): java.lang.RuntimeException: Unable to create application com.awesometsproject.MainApplication: java.lang.RuntimeException: Requested enabled DevSupportManager, but DevSupportManagerImpl class was not found or could not be created
E/AndroidRuntime( 5079):        at android.app.ActivityThread.handleBindApplication(ActivityThread.java:4154)
E/AndroidRuntime( 5079):        at android.app.ActivityThread.access$1300(ActivityThread.java:130)
E/AndroidRuntime( 5079):        at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1255)
E/AndroidRuntime( 5079):        at android.os.Handler.dispatchMessage(Handler.java:99)
E/AndroidRuntime( 5079):        at android.os.Looper.loop(Looper.java:137)
E/AndroidRuntime( 5079):        at android.app.ActivityThread.main(ActivityThread.java:4745)
E/AndroidRuntime( 5079):        at java.lang.reflect.Method.invokeNative(Native Method)
E/AndroidRuntime( 5079):        at java.lang.reflect.Method.invoke(Method.java:511)
E/AndroidRuntime( 5079):        at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:786)
E/AndroidRuntime( 5079):        at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:553)
E/AndroidRuntime( 5079):        at dalvik.system.NativeStart.main(Native Method)
E/AndroidRuntime( 5079): Caused by: java.lang.RuntimeException: Requested enabled DevSupportManager, but DevSupportManagerImpl class was not found or could not be created
E/AndroidRuntime( 5079):        at com.facebook.react.devsupport.DevSupportManagerFactory.create(DevSupportManagerFactory.java:90)
E/AndroidRuntime( 5079):        at com.facebook.react.ReactInstanceManager.<init>(ReactInstanceManager.java:238)
E/AndroidRuntime( 5079):        at com.facebook.react.ReactInstanceManagerBuilder.build(ReactInstanceManagerBuilder.java:281)
E/AndroidRuntime( 5079):        at com.facebook.react.ReactNativeHost.createReactInstanceManager(ReactNativeHost.java:87)
E/AndroidRuntime( 5079):        at com.facebook.react.ReactNativeHost.getReactInstanceManager(ReactNativeHost.java:39)
E/AndroidRuntime( 5079):        at com.awesometsproject.MainApplication.onCreate(MainApplication.java:47)
E/AndroidRuntime( 5079):        at android.app.Instrumentation.callApplicationOnCreate(Instrumentation.java:999)
E/AndroidRuntime( 5079):        at android.app.ActivityThread.handleBindApplication(ActivityThread.java:4151)
E/AndroidRuntime( 5079):        ... 10 more
E/AndroidRuntime( 5079): Caused by: java.lang.reflect.InvocationTargetException
E/AndroidRuntime( 5079):        at java.lang.reflect.Constructor.constructNative(Native Method)
E/AndroidRuntime( 5079):        at java.lang.reflect.Constructor.newInstance(Constructor.java:417)
E/AndroidRuntime( 5079):        at com.facebook.react.devsupport.DevSupportManagerFactory.create(DevSupportManagerFactory.java:80)
E/AndroidRuntime( 5079):        ... 17 more
E/AndroidRuntime( 5079): Caused by: java.lang.NoClassDefFoundError: java.util.Objects
E/AndroidRuntime( 5079):        at okhttp3.CertificatePinner.withCertificateChainCleaner(CertificatePinner.java:231)
E/AndroidRuntime( 5079):        at okhttp3.OkHttpClient.<init>(OkHttpClient.java:238)
E/AndroidRuntime( 5079):        at okhttp3.OkHttpClient$Builder.build(OkHttpClient.java:1015)
E/AndroidRuntime( 5079):        at com.facebook.react.devsupport.DevServerHelper.<init>(DevServerHelper.java:132)
E/AndroidRuntime( 5079):        at com.facebook.react.devsupport.DevSupportManagerImpl.<init>(DevSupportManagerImpl.java:183)
E/AndroidRuntime( 5079):        ... 20 more
W/ActivityManager( 1456):   Force finishing activity com.awesometsproject/.MainActivity

Note: If I comment the source Flipper source, the error disappears when the specific dependency is commented

debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") {
    exclude group:'com.facebook.flipper'
}

Expected Results

App starts in Android API 16

Snack, code example, screenshot, or link to a repository:

Please provide a Snack (https://snack.expo.io/), a link to a repository on GitHub, or provide a minimal code example that reproduces the problem.
You may provide a screenshot of the application if you think it is relevant to your bug report.
Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve

[github-actions[bot]]

:warning:	Missing Reproducible Example
:information_source:	It looks like your issue is missing a reproducible example. Please provide a Snack or a repository that demonstrates the issue you are reporting in a minimal, complete, and reproducible manner.

[SrMouraSilva]

Hello, @hramos
The steps to simulate the behavior have been described, which are basically starting a new project. If you want, I can send you a github project.

I don't know if I can set the android version on Expo, so I didn't try to make a reproducible example on it.

[ahmad6242]

I am facing the same issue...

[couchcrew-thomas]

We experienced KitKat devices not being able to connect via HTTPS since April 1st 2020 without any app updates.
Our app does not use react native, but I think the issue is still similar. My guess is that the TLS Cipher cannot be created anymore. I don't know why and I have not found anything official to the cipher lifetimes, yet.
So maybe that's something y'all can also look into? Because it seems as if react native tries to create the Ciphers at app start.

[juanamd]

Same here. "Solved" by disabling Flipper (commenting out all related code)

[qadratic]

Same here. "Solved" by disabling Flipper (commenting out all related code)

Please elaborate how to do that. Newbie here :)

[juanamd]

Same here. "Solved" by disabling Flipper (commenting out all related code)

Please elaborate how to do that. Newbie here :)

On app/build.gradle comment out:
debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") { exclude group:'com.facebook.fbjni' } debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") { exclude group:'com.facebook.flipper' } debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}") { exclude group:'com.facebook.flipper' }

Delete or comment out all the code in android/app/src/debug/.../ReactNativeFlipper.java

In MainApplication.java comment out:
initializeFlipper(this, getReactNativeHost().getReactInstanceManager());

Idk if its overkill but it worked for me.

[qadratic]

Same here. "Solved" by disabling Flipper (commenting out all related code)

Please elaborate how to do that. Newbie here :)

On app/build.gradle comment out:
debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") { exclude group:'com.facebook.fbjni' } debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") { exclude group:'com.facebook.flipper' } debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}") { exclude group:'com.facebook.flipper' }

Delete or comment out all the code in android/app/src/debug/.../ReactNativeFlipper.java

In MainApplication.java comment out:
initializeFlipper(this, getReactNativeHost().getReactInstanceManager());

Idk if its overkill but it worked for me.

Thanks. Currently I have reverted back to 0.61.5 but will definitely try out your solution. :)

[qadratic]

If solution given by @juanamd works, I believe the only problem is with flipper. And we all know "adb reverse" does works only with Android version 5.0 and above maybe flipper has to do something with it. I believe flipper should automatically disable itself when working with android version below 5.0.

[mfakhrusy]

Just stumbled into this, and solution by @juanamd worked perfectly for me. Seems like flipper issue?

and maybe the implementation proposed by @qadratic seems like a good idea, disable flipper below android 5.0

[nadav2051]

Happens for me on Android 10 after integrating Flipper into my app (upgraded from RN 60.4)

[sunnylqm]

Maybe related https://github.com/facebook/react-native/issues/9043#issuecomment-298832659

[Shywim]

So, after messing around with gradle and looking at the dependencies of a bare React Native project, the culprit is Flipper with an explicit dependency on okhttp 3.14.1 which will not function on Android API < 21, the last working version being 3.12.1 which is the version React Native is dependent on.

I fixed it in our projects by excluding okhttp from the flipper-network-plugin dependency and now we can run the debug build on every Android version without removing flipper:

debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") {
    exclude group:'com.facebook.flipper'
    exclude group:'com.squareup.okhttp3', module:'okhttp'
}

Looking at facebook/flipper#1037, it looks like it's not something the Flipper team will change, so if the React Native team is willing to continue supporting older version of android (minSdkVersion is still 16 while writing this) maybe it should be integrated in the template.

[mikehardy]

@Shywim just ran into this and as a mostly-android-native developer your solution looks right. This looks like a group policy problem between the flipper and react-native teams where they have different minimum APIs to support. That's fine as far as it goes but not if the default init template from react-native crashes on devices that are supposed to be supported. You should propose the PR to the react-native template for consideration with a comment in the change indicating when it can be removed (minSdkVersion >= 21) - if you don't I will but the internet points are there for the taking :-)

(I will note that okhttp 3.12.12 works fine on android API16 and above - I use it another app that still has tens of thousands of users on those old devices. It's the 3.12.x branch that is important, not 3.12.1 specifically in my experience)

[faslurrajah]

I fixed same problem by excluding okhttp in build file. It stop crashing.

import React from 'react';
import * as RNFS from 'react-native-fs';
import { BackHandler,Alert} from 'react-native';
import {

  StyleSheet,
  View,
  Text,
  ScrollView,
  PixelRatio,
  Platform,
  Button,
  Dimensions,
} from 'react-native';
import YouTube, { YouTubeStandaloneIOS, YouTubeStandaloneAndroid } from 'react-native-youtube';

export default class App extends React.Component {


  _youTubeRef = React.createRef();

  render() {
    return (
      <ScrollView>
        <Text 'Video Player'</Text>

        <YouTube
          ref={this._youTubeRef}
          apiKey="AIzaSyB0kszUSlWNkdDqT4vGhxWOkAubD5Qos0Y"
          videoId='fr1VmcGmL5Y'
          play={true}
          loop={false}
          fullscreen={false}
          controls={2}
        />

          <View >
            <Button
              title="Set Fullscreen"
              onPress={() => {
              //do something
              }}
            />
          </View>
      </ScrollView>
    );
  }
}

But I'm getting this error (Mentioned in photo).
I can add a Text or Youtube component. This error shows up when I add a Button. Why I'm unable to add a button.I'm a newbie and I'm not sure whether this error caused by Flipper or not.

also when I run react-native run-android, I'm getting this adb error also

BUILD SUCCESSFUL in 17s
65 actionable tasks: 16 executed, 49 up-to-date
info Connecting to the development server...
adb: error: closed
warn Failed to connect to development server using "adb reverse": Command failed: /Users/faslurajan/Library/Android/sdk/platform-tools/adb -s emulator-5554 reverse tcp:8081 tcp:8081
info Starting the app on "emulator-5554"...
Starting: Intent { cmp=com.flipperfixproj/.MainActivity }
✨  Done in 22.71s.

Here is my environment.

info Fetching system and libraries information...
System:
    OS: macOS 10.15.5
    CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
    Memory: 75.28 MB / 8.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 12.18.2 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.5 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.9.3 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 13.5, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
    Android SDK:
      API Levels: 19, 28, 29, 30
      Build Tools: 28.0.3, 29.0.2, 30.0.1
      System Images: android-18 | Google APIs Intel x86 Atom, android-19 | ARM EABI v7a, android-19 | Intel x86 Atom, android-19 | Google APIs ARM EABI v7a, android-19 | Google APIs Intel x86 Atom, android-28 | Google Play Intel x86 Atom, android-28 | Google Play Intel x86 Atom_64
      Android NDK: Not Found
  IDEs:
    Android Studio: 4.0 AI-193.6911.18.40.6514223
    Xcode: 11.5/11E608c - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_252 - /usr/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.13.1 => 16.13.1 
    react-native: 0.63.1 => 0.63.1 
  npmGlobalPackages:
    *react-native*: Not Found

[Monte9]

@Shywim you are right! 💯 Excluding okhttp3 from the flipper-network-plugin get's rid of this error.

Also thanks for submitting the PR! Looks like it got merged in here https://github.com/facebook/react-native/commit/a642c3f264e31f3c2a80a70c1fb7baa2325f4e5e and will be available in the next release! 👍

[mykelaballe]

So, after messing around with gradle and looking at the dependencies of a bare React Native project, the culprit is Flipper with an explicit dependency on okhttp 3.14.1 which will not function on Android API < 21, the last working version being 3.12.1 which is the version React Native is dependent on.

I fixed it in our projects by excluding okhttp from the flipper-network-plugin dependency and now we can run the debug build on every Android version without removing flipper:

debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") {
    exclude group:'com.facebook.flipper'
    exclude group:'com.squareup.okhttp3', module:'okhttp'
}

Looking at facebook/flipper#1037, it looks like it's not something the Flipper team will change, so if the React Native team is willing to continue supporting older version of android (minSdkVersion is still 16 while writing this) maybe it should be integrated in the template.

which file to edit?