• 25-Jan-2023
Lightrun Team
Author Lightrun Team
Share
This article is about fixing React Native App Crashes on Launch in Android (API 19) in Facebook React Native

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

Lightrun Team
Lightrun Team
25-Jan-2023

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

Problem: Memory Leaks

One of the most common problems developers face when working with React Native is memory leaks. These occur when the application is not properly releasing memory that is no longer needed, resulting in the app becoming slow and unresponsive. Memory leaks can be caused by a variety of factors, such as not properly managing state or not unmounting components when they are no longer needed.

Solution:

To solve this issue, developers can use tools such as Chrome’s Memory Profiler or Xcode’s Instruments to identify and track down the source of the leak. Once identified, the problem can be fixed by implementing proper state management and component unmounting practices.

Problem: Slow Initial Load Times

Another common problem with React Native is slow initial load times. This can be caused by a variety of factors, such as large bundle sizes or slow network connections.

Solution:

To solve this issue, developers can use techniques such as code splitting and lazy loading to break up the bundle into smaller, more manageable chunks that can be loaded on demand. Additionally, using tools such as the Hermes JavaScript engine can help to improve the performance of the app on low-end devices.

Problem: Debugging and Testing

React Native apps can be difficult to debug and test, as the codebase is split between JavaScript and native code. This can make it difficult to identify and fix issues, as well as to ensure that the app is functioning correctly.

Solution:

To solve this issue, developers can use tools such as the React Native Debugger or the Remote JS Debugger to debug the JavaScript code and the Chrome DevTools or Xcode’s Debug Navigator to debug the native code. Additionally, using automated testing tools such as Jest or Detox can help to ensure that the app is functioning correctly and to catch any issues early on in the development process.

A brief introduction to 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;
  1. 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;
  1. 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;
Share

It’s Really not that Complicated.

You can actually understand what’s going on inside your live applications. It’s a registration form away.

Get Lightrun

Lets Talk!

Looking for more information about Lightrun and debugging?
We’d love to hear from you!
Drop us a line and we’ll get back to you shortly.

By submitting this form, I agree to Lightrun’s Privacy Policy and Terms of Use.