reducing Apk size in react native android

Question

Currently my app size is 17 MB. But only 2 main screens. Each screen contains 3 child screens. So totally 6 screens.

My package.json :
  "dependencies": {
    "@react-native-community/async-storage": "^1.11.0",
    "@react-native-firebase/app": "^7.2.0",
    "@react-native-firebase/auth": "^8.0.4",
    "@react-native-firebase/firestore": "^7.1.5",
    "@react-navigation/native": "^5.5.0",
    "@react-navigation/stack": "^5.4.1",
    "firebase": "^7.15.0",
    "react": "16.11.0",
    "react-native": "0.62.2",
    "react-native-animatable": "^1.3.3",
    "react-native-asyncstorage": "^1.0.0",
    "react-native-dropdown-picker": "^3.0.0",
    "react-native-floating-action": "^1.20.0",
    "react-native-keyboard-done-button": "^1.0.0",
    "react-native-linear-gradient": "^2.5.6",
    "react-native-loading-spinner-overlay": "^1.1.0",
    "react-native-numeric-input": "^1.8.3",
    "react-native-safe-area-context": "^3.0.2",
    "react-native-screens": "^2.8.0",
    "react-native-scrollable-tab-view": "^1.0.0",
    "react-native-tag-input": "0.0.21",
    "react-native-vector-icons": "^6.6.0",
    "react-navigation": "^4.3.9",
    "react-navigation-stack": "^2.7.0"
  }

My react native version : "version": "0.62.2"

I set these two to true :

def enableSeparateBuildPerCPUArchitecture = true
def enableProguardInReleaseBuilds = true

When i was checking the app analyzer using android studio. i got this : Here

I am not sure what is libjsc.so, libflipper.sp and why its consuming this much memory. I am new to this and this is my first application. Any help would be great.

Also i am wondering because of react-native-scrollable-tab-view (top tab view), react-native-vector-icons, react-native-tag-input (just some tag input lib) my app size got increased ?

Thanks

score 4 · Answer 1 · answered Jun 16 '20 at 20:14

I highly recommend looking into Android App Bundles. They are probably the most effective way to reduce the size of your APK.

The way it works is that you compile and upload your bundle to the play store, and then Google's servers will use your production keystore to create a different APK for each possible device variant of your app. So when someone with an xhdpi screen, the APK they download doesn't have hdpi, xxhdpi, or xxxhdpi assets, they only get xhdpi. Another large size savings is that you aren't forced to download all of the compiled code for your native CPU architectures. If someone has an armv7 device, they only download the armv7 native compilations.

My team has been able to realize SIGNIFICANT savings from this approach, going from a 25 MB APK file to our users only needing to download a 10-12 MB APK.

The setup for app bundles is a hassle, and can be complicated for existing applications, but you only have to do it once, and it's worth it.

doubleA · Answer 2 · 2020-06-16T19:59:17.650

libjsc.so is the javascript engine that runs React Native on device. I think Hermes is the new replacement for this.

libflipper.sp is probably relating to the flipper debugging app. It is added in by default in new react native apps. https://fbflipper.com/

Here is a good resource about inner workings of android and React Native. https://medium.com/@yushulx/react-native-for-android-basic-knowledge-before-coding-83f5d15d7d65

React Native usually increases app size quite a bit. Best I can tell it is necessary to include a RN running javascript on top of a Java/Kotlin backbone. You might be able to remove the flipper part of your app. But it is actually a really nice tool.

Also enableSeparateBuildPerCPUArchitechture should produce multiple apk files. If you are not getting multiple apk files there then you are not actually splitting the architecture libraries up.

Any time you add a library you are increasing the apk size.

Pro Tip: do not use ^ on dependencies. Especially React Native ones. React native is a fast moving beast and breaks often. If you use ^ you are potentially accepting breaking changes any time a library upgrades. These changes can be difficult to track down when you have a lot of dependencies in React Native.

reducing Apk size in react native android

2 Answers2