React Native App Crashes on Launch in Android (API 19) in Facebook React Native

Explanation of the problem

When attempting to launch a React Native app on devices with Android API level less than 21, the app crashes on launch. The minSdk version in the android gradle file is specified as 16, and the crash is identified as occurring due to the use of OkHttp3, which is not an explicit dependency in the app. This occurs when using the command “react-native run-android” on a project created using react-native-cli, and React Native version 6.14.4.

Steps to Reproduce:

1. Create a project using react-native-cli, not Expo CLI
2. Navigate to the project folder
3. Connect a device or emulator with an API level less than 21
4. Run the command “react-native run-android” to launch the app on the connected device.

Expected Results: The app should launch without crashing.

Android Logs:

E/AndroidRuntime( 3745): java.lang.RuntimeException: Unable to create application com.infifive.MainApplication: java.lang.RuntimeException: Requested enabled DevSupportManager, but DevSupportManagerImpl class was not found or could not be created
E/AndroidRuntime( 3745): 	at android.app.ActivityThread.handleBindApplication(ActivityThread.java:4347)
E/AndroidRuntime( 3745): 	at android.app.ActivityThread.access$1500(ActivityThread.java:135)
E/AndroidRuntime( 3745): 	at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1256)
E/AndroidRuntime( 3745): 	at android.os.Handler.dispatchMessage(Handler.java:102)
E/AndroidRuntime( 3745): 	at android.os.Looper.loop(Looper.java:136)
E/AndroidRuntime( 3745): 	at android.app.ActivityThread.main(ActivityThread.java:5017)
E/AndroidRuntime( 3745): 	at java.lang.reflect.Method.invokeNative(Native Method)
E/AndroidRuntime( 3745): 	at java.lang.reflect.Method.invoke(Method.java:515)
E/AndroidRuntime( 3745): 	at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:779)
E/AndroidRuntime( 3745): 	at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:595)
E/AndroidRuntime( 3745): 	at dalvik.system.NativeStart.main(Native Method)
E/AndroidRuntime( 3745): Caused by: java.lang.RuntimeException: Requested enabled DevSupportManager, but DevSupportManagerImpl class was not found or could not be created
E/AndroidRuntime( 3745): 	at com.facebook.react.devsupport.DevSupportManagerFactory.create(DevSupportManagerFactory.java:90)
E/AndroidRuntime( 3745): 	at com.facebook.react.ReactInstanceManager.<init>(ReactInstanceManager.java:238)
E/AndroidRuntime( 3745): 	at com.facebook.react.ReactInstanceManagerBuilder.build(ReactInstanceManagerBuilder.java:281)
E/AndroidRuntime( 3745): 	at com.facebook.react.ReactNativeHost.createReactInstanceManager

Troubleshooting with the Lightrun Developer Observability Platform

Getting a sense of what’s actually happening inside a live application is a frustrating experience, one that relies mostly on querying and observing whatever logs were written during development.
Lightrun is a Developer Observability Platform, allowing developers to add telemetry to live applications in real-time, on-demand, and right from the IDE.

• Instantly add logs to, set metrics in, and take snapshots of live applications
• Insights delivered straight to your IDE or CLI
• Works where you do: dev, QA, staging, CI/CD, and production

Start for free today

Problem solution for React Native App Crashes on Launch in Android (API 19) in Facebook React Native

The problem appears to be related to the use of OkHttp3, which is not an explicit dependency in the app but is used internally somewhere. As the app is crashing on devices with Android API level less than 21, one possible solution would be to upgrade to a version of OkHttp3 that is compatible with those API levels. Another solution would be to check if there is any library or dependencies that are using OkHttp3 internally and check the compatibility of it with the target API level. If the library or dependencies are not compatible with the target API level, try updating to a version that is compatible or replace it with a different library. It’s also worth checking if there are any updates available for React Native and ensure that the app is running on the latest version. It’s also important to check your app’s MainApplication.java and ensure that the “DevSupportManager” is properly enabled, if not the app will crash.

It is recommended to check the official documentation of React Native and OkHttp3 for more information and other potential solutions.

Other popular problems with Facebook React Native

Facebook React Native is a framework for building mobile apps that allows developers to use the same codebase for both iOS and Android platforms. It is based on React, Facebook’s JavaScript library for building user interfaces, and allows developers to use the same declarative component-based approach to building mobile apps as they would use for building web apps. React Native uses a bridge to communicate between the JavaScript code and the native code, allowing the app to access the device’s native APIs and functionality while still using the same familiar React syntax.

React Native allows developers to build high-performance, cross-platform mobile apps that can run on both iOS and Android. By using the same codebase, developers can save time and effort as they don’t have to maintain separate codebases for each platform. Additionally, React Native’s ability to communicate with the device’s native APIs allows for seamless integration with platform-specific features and functionality. This enables developers to build apps that feel and perform like native apps, while still leveraging the power and flexibility of JavaScript.

Most popular use cases for Facebook React Native

1. Building cross-platform mobile apps: React Native can be used to build mobile apps that can run on both iOS and Android platforms using the same codebase. This allows developers to save time and effort by not having to maintain separate codebases for each platform. The following code block is an example of a React Native component that renders a simple button:

import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';

const MyButton = ({ onPress }) => {
  return (
    <TouchableOpacity onPress={onPress}>
      <View>
        <Text>Press Me</Text>
      </View>
    </TouchableOpacity>
  );
};

export default MyButton;

2. Accessing native APIs: React Native allows developers to access the device’s native APIs, such as the camera or geolocation, and use them in their app. This enables developers to build apps that feel and perform like native apps, while still leveraging the power and flexibility of JavaScript. The following code block is an example of how to access the device’s geolocation in a React Native app:

import React, { useState, useEffect } from 'react';
import { View, Text } from 'react-native';
import Geolocation from '@react-native-community/geolocation';

const MyLocation = () => {
  const [location, setLocation] = useState(null);

  useEffect(() => {
    Geolocation.getCurrentPosition(
      position => setLocation(position),
      error => console.log(error)
    );
  }, []);

  return (
    <View>
      <Text>Latitude: {location?.coords.latitude}</Text>
      <Text>Longitude: {location?.coords.longitude}</Text>
    </View>
  );
};

export default MyLocation;

3. Building interactive and dynamic user interfaces: React Native allows developers to build dynamic and interactive user interfaces using the same declarative component-based approach as React. This allows for easy and efficient management of the app’s state and user interactions. The following code block is an example of how to handle user input in a React Native app:

import React, { useState } from 'react';
import { View, TextInput, Text } from 'react-native';

const MyForm = () => {
  const [inputValue, setInputValue] = useState('');

  return (
    <View>
      <TextInput
        value={inputValue}
        onChangeText={text => setInputValue(text)}
      />
      <Text>You entered: {inputValue}</Text>
    </View>
  );
};

export default MyForm;