How to reduce apk or aab file size in react native using expo? - react-native

I have just started react native with expo. My first app has only one App.js file and one component of counter. When I have built it, surprisingly my apk size was 49MB :open_mouth: I wonder why its so and how to reduce it without ejecting???

Expo is purely for development purpose , and its only recommended for production if your app is very basic and doesnt have much of native functionalities. Even expo is slower and has much limitations. The larger size of expo is due to the expo wrapper which sits on top of react native , which has a lot of in built modules and thus making it larger.
Recommendation: If you want to lower the apk size , you should migrate to pure react native as expo doesnt give the power of actually decreasing the app size since its handled by expo.
You can even check this link expo -size which also had the same query .
Hope it helps.

Related

Huge size difference between app bundles build by pure react native & expo bare workflow

I have build two app bundles for same application by pure react native (version 0.66) and expo bare workflow (expo eject, expo version: 42.0.1, react-native version: 0.63.4 )
Build by
App bundle size (mb)
Pure react native
29
Expo bare (eject)
14
There is a huge size difference (15 mb) between two app bundles.
When I looked into app bundles for my device I found that config.arm64_v8a.apk has two different sizes.
Build by
config.arm64_v8a.apk(mb)
base.apk(mb)
Pure react native
18.2
12.2
Expo bare (eject)
11.5
12.7
I couldn't find out why config.arm64_v8a.apk has two file sizes in these two flows.
Why expo bare workflow app bundle is so small ? Is this because currently expo use react-native 0.63.4 or does expo has some additional app bundle size reducing method(s) ?
Thank you.
Expo has recently published a blog post about app bundling.
bundle sizes are also smaller by about 18% in “Hello World” apps. This is because many libraries are already shipped in an optimal format, and by needlessly transforming them with a random Babel cocktail, we increase the size, but only a little bit, and everywhere.
I think it's an interesting read (and good source!) for what you're looking for:
https://blog.expo.dev/drastically-faster-bundling-in-react-native-a54f268e0ed1
Put android:extractNativeLibs="true" into the AndroidManifest.xml under application tag

How to measure react native (Expo) app startup time?

I have an Expo hybrid app (Managed workflow), running on Expo SDK v37 (React Native v0.61).
I'm struggling to find the best way to measure the time it takes from the moment when the user starts the app until the splash screen disappears.
How would you approach this?
PS: I would use Firebase Performance Monitoring instead, if it was available for Expo Managed apps. But it isn't yet.
Basically I see two approaches:
For pure react-native projects you can use react-native-startup-time library.
However I'm not sure, whether you can just add this library and start to use it, since it's required linking.
But in any case you can eject your project and add this library.
If you don't want to eject expo project I can suggest you to update your project to SDK 38. It has support for RN 0.62.2 and flipper integration as well. So you can setup flipper-plugin-react-native-performance and check the performance.
I hope I helped a bit.

Should I use Expo for expo audio library or React-native-track-player?

I have my project which I initialised with 'react-native init' . I am thinking of using expo audio library because of it's robust functionalities . But , I have read Expo isn't the solution. It increases the app size. You've to eject it in the end. So can anyone suggest me which woulod be a better solution in this case?
Some of the shortcomings of Expo:
Does not play nicely with Hot reloading
Linking with third party library can be cumbersome sometimes.(Expo include the facebook sdk which is a overhead.)
Poor notification service.
I had a project first made with expo , then after few time , got to realize the limitations. I would surely say expo is only for learning react native. You should never use expo for production. Here are the few things ive observed which i would like to share :
Expo app size is huge and app becomes very laggy .
You cant use libraries where linking is required and thats a big no no.
You dont have hold over app size bundling , specially in android as you can use a few tweaks like hermes etc to make your app more faster.
And you can always use expo libraries in react native by using https://github.com/unimodules/react-native-unimodules
I would suggest you should use bare react native rather than expo.
Hope it helps . feel free for doubts

Use expo partially with RN with custom native-modules

I'd like to try expo for faster development.
It's said that you can't use native-module if you use expo.
But it seems it's possible to use native-module if you eject or use bare mode. (not sure if they are the same)
Or it seems it's even possible to start from RN-cli and add expo features.
Are they all the same in what we can do in the end?
How about apk size? Is there a way to cut down the 20-25M file size by starting from RN-cli and adding Expo on top of it or by ejecting ?
I don't think you can do that and achieve 25M File size.
But, I will give you a good solution if you want expo functionality as well as the Native capabilities.
You can try the bare minimum setup with expo.
What it will do is, It will create a react-native init project with unimodules.
Unimodules will have access to some basic expo features, for example permissions etc etc.
And in future if you want to add some other expo feature (which supports bare apps).
You can add them pretty easily.
In expo docs, you can check which features are available in bare apps and which are not.
The main concern for me is that bare apps don't support the background tasks of expo yet.
I always start my apps with this. But the downside would be that the app would be around 30-35mb,
You can still try to minimize it
https://medium.com/#aswinmohanme/how-i-reduced-the-size-of-my-react-native-app-by-86-27be72bba640
Expo has group of packages provided by expo.io. The app built with expo has bigger apk size because we are also bundling the packages which we are not even using. these are the packages comes with expo
https://github.com/expo/expo/tree/master/packages
Best solution to reduce apk size is start with building app without expo then add only required dependencies. If your project needs expo features you can use Expo kit
https://docs.expo.io/versions/latest/expokit/expokit/
Thank you

Use react-native created an application installation package big size

I used react-native, expo, native-base & typescript. I created a simple function inside my application. After installing I found size of the application was too large, I don't know why, what should I do to make it more concise or smaller?
Expo adds a lot of extra size to the apk. If you can eject from expo: https://github.com/react-community/create-react-native-app/blob/master/EJECTING.md