I have a react-native app that I build a week ago, when I checked the app size in android it was initialiy 17MB, and that i supposed is okay, but now when i check my apk size its 638MB and the bundle size is 283.3MB. and the ios app size is 180MB
the asset size for the app is 3.6MB and overall src where the assets is also located size is 4.7MB which means my code size is 1.1MB
I haven't added any other libraries, all of the libraries are required for functionality.
my package.json file is here
{"name": "salushealth","version": "1.0.2","private": true,"scripts": {"android": "react-native run-android","ios": "react-native run-ios","lint": "eslint .","start": "react-native start","test": "jest","pregit": "git status","git": "git add . && git commit -m","postgit": "git push","i-15": "react-native run-ios --simulator='iPhone 15 Pro Max'","iPad": "react-native run-ios --simulator='iPad Pro (12.9-inch) (6th generation)'","run-all": "yarn iPad && yarn i-15 && yarn android" },"dependencies": {"@apollo/client": "^3.8.8","@preact/signals-react": "^2.0.0","@react-native-async-storage/async-storage": "^1.19.6","@react-native-community/netinfo": "^11.2.1","@react-native-community/slider": "^4.5.0","@react-native-masked-view/masked-view": "^0.3.0","@react-navigation/bottom-tabs": "^6.5.11","@react-navigation/native": "^6.1.9","@react-navigation/native-stack": "^6.9.17","@reduxjs/toolkit": "^2.0.1","@stripe/stripe-react-native": "0.19.0","add": "^2.0.6","axios": "^1.6.2","camelize": "^1.0.1","eslint-plugin-react-hooks": "^4.6.0","formik": "^2.4.5","graphql": "^16.8.1","jsrsasign": "^11.1.0","lottie-react-native": "^6.5.0","moment": "^2.29.4","prop-types": "^15.8.1","react": "18.2.0","react-native": "0.72.7","react-native-calendars": "^1.1303.0","react-native-circular-progress": "^1.3.9","react-native-device-info": "^10.11.0","react-native-dropdown-picker": "^5.4.6","react-native-gifted-charts": "^1.3.18","react-native-gifted-chat": "^2.4.0","react-native-image-crop-picker": "^0.40.2","react-native-linear-gradient": "^2.8.3","react-native-otp-entry": "^1.4.0","react-native-paper": "^5.11.1","react-native-pie-chart": "^3.0.1","react-native-pure-jwt": "^3.0.2","react-native-raw-bottom-sheet": "^2.2.0","react-native-responsive-fontsize": "^0.5.1","react-native-safe-area-context": "^4.7.4","react-native-screens": "^3.27.0","react-native-select-dropdown": "^3.4.0","react-native-skeleton-placeholder": "^5.2.4","react-native-splash-screen": "^3.3.0","react-native-storage": "^1.0.1","react-native-store-version": "^1.4.1","react-native-svg": "^14.1.0","react-native-toast-message": "^2.1.7","react-native-track-player": "^4.0.1","react-native-url-polyfill": "^2.0.0","react-native-vector-icons": "^10.0.2","react-native-zoom-us": "6.19.6","react-redux": "^9.0.4","redux-persist": "^6.0.0","styled-components": "^6.1.1","validator": "^13.11.0","yarn": "^1.22.21","yup": "^1.3.2","yup-password": "^0.2.2" },"devDependencies": {"@babel/core": "^7.20.0","@babel/preset-env": "^7.20.0","@babel/runtime": "^7.20.0","@react-native/eslint-config": "^0.72.2","@react-native/metro-config": "^0.72.11","@tsconfig/react-native": "^3.0.0","@types/react": "^18.0.24","@types/react-test-renderer": "^18.0.0","babel-jest": "^29.2.1","babel-plugin-inline-import": "^3.0.0","eslint": "^8.19.0","jest": "^29.2.1","metro-react-native-babel-preset": "0.76.8","prettier": "^2.4.1","react-native-svg-transformer": "^1.3.0","react-test-renderer": "18.2.0","typescript": "4.8.4" },"engines": {"node": ">=16" }}
here is my app.build.gradle file
apply plugin: "com.android.application"apply plugin: "com.facebook.react"/** * This is the configuration block to customize your React Native Android app. * By default you don't need to apply any configuration, just uncomment the lines you need. */react { /* Folders */ // The root of your project, i.e. where "package.json" lives. Default is '..' // root = file("../") // The folder where the react-native NPM package is. Default is ../node_modules/react-native // reactNativeDir = file("../node_modules/react-native") // The folder where the react-native Codegen package is. Default is ../node_modules/@react-native/codegen // codegenDir = file("../node_modules/@react-native/codegen") // The cli.js file which is the React Native CLI entrypoint. Default is ../node_modules/react-native/cli.js // cliFile = file("../node_modules/react-native/cli.js") /* Variants */ // The list of variants to that are debuggable. For those we're going to // skip the bundling of the JS bundle and the assets. By default is just 'debug'. // If you add flavors like lite, prod, etc. you'll have to list your debuggableVariants. // debuggableVariants = ["liteDebug", "prodDebug"] /* Bundling */ // A list containing the node command and its flags. Default is just 'node'. // nodeExecutableAndArgs = ["node"] // // The command to run when bundling. By default is 'bundle' // bundleCommand = "ram-bundle" // // The path to the CLI configuration file. Default is empty. // bundleConfig = file(../rn-cli.config.js) // // The name of the generated asset file containing your JS bundle // bundleAssetName = "MyApplication.android.bundle" // // The entry file for bundle generation. Default is 'index.android.js' or 'SessionCard.js' // entryFile = file("../js/MyApplication.android.js") // // A list of extra flags to pass to the 'bundle' commands. // See https://github.com/react-native-community/cli/blob/main/docs/commands.md#bundle // extraPackagerArgs = [] /* Hermes Commands */ // The hermes compiler command to run. By default it is 'hermesc' // hermesCommand = "$rootDir/my-custom-hermesc/bin/hermesc" // // The list of flags to pass to the Hermes compiler. By default is "-O", "-output-source-map" // hermesFlags = ["-O", "-output-source-map"]}/** * Set this to true to Run Proguard on Release builds to minify the Java bytecode. */def enableProguardInReleaseBuilds = false/** * The preferred build flavor of JavaScriptCore (JSC) * * For example, to use the international variant, you can use: * `def jscFlavor = 'org.webkit:android-jsc-intl:+'` * * The international variant includes ICU i18n library and necessary data * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that * give correct results when using with locales other than en-US. Note that * this variant is about 6MiB larger per architecture than default. */def jscFlavor = 'org.webkit:android-jsc:+'android { ndkVersion rootProject.ext.ndkVersion compileSdkVersion rootProject.ext.compileSdkVersion namespace "com.salus.health" defaultConfig { applicationId "com.salus.health" minSdkVersion rootProject.ext.minSdkVersion targetSdkVersion rootProject.ext.targetSdkVersion versionCode 4 versionName "1.0.2" } signingConfigs { release { if (project.hasProperty('MYAPP_UPLOAD_STORE_FILE')) { storeFile file(MYAPP_UPLOAD_STORE_FILE) storePassword MYAPP_UPLOAD_STORE_PASSWORD keyAlias MYAPP_UPLOAD_KEY_ALIAS keyPassword MYAPP_UPLOAD_KEY_PASSWORD } } debug { storeFile file('debug.keystore') storePassword 'android' keyAlias 'androiddebugkey' keyPassword 'android' } } buildTypes { debug { signingConfig signingConfigs.debug } release { // Caution! In production, you need to generate your own keystore file. // see https://reactnative.dev/docs/signed-apk-android. signingConfig signingConfigs.release minifyEnabled enableProguardInReleaseBuilds proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro" } }}dependencies { // The version of react-native is set by the React Native Gradle Plugin implementation("com.facebook.react:react-android") debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") { exclude group:'com.squareup.okhttp3', module:'okhttp' } debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}") if (hermesEnabled.toBoolean()) { implementation("com.facebook.react:hermes-android") } else { implementation jscFlavor }}apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)apply from: file("../../node_modules/react-native-vector-icons/fonts.gradle")
here is my Podfile
# Resolve react_native_pods.rb with node to allow for hoistingrequire Pod::Executable.execute_command('node', ['-p','require.resolve("react-native/scripts/react_native_pods.rb", {paths: [process.argv[1]]}, )', __dir__]).stripplatform :ios, min_ios_version_supportedprepare_react_native_project!# If you are using a `react-native-flipper` your iOS build will fail when `NO_FLIPPER=1` is set.# because `react-native-flipper` depends on (FlipperKit,...) that will be excluded## To fix this you can also exclude `react-native-flipper` using a `react-native.config.js`# ```js# module.exports = {# dependencies: {# ...(process.env.NO_FLIPPER ? { 'react-native-flipper': { platforms: { ios: null } } } : {}),# ```flipper_config = ENV['NO_FLIPPER'] == "1" ? FlipperConfiguration.disabled : FlipperConfiguration.enabledlinkage = ENV['USE_FRAMEWORKS']if linkage != nil Pod::UI.puts "Configuring Pod with #{linkage}ally linked Frameworks".green use_frameworks! :linkage => linkage.to_symendtarget 'SalusHealth' do config = use_native_modules! # Flags change depending on the env values. flags = get_default_flags() use_react_native!( :path => config[:reactNativePath], # Hermes is now enabled by default. Disable by setting this flag to false. :hermes_enabled => flags[:hermes_enabled], :fabric_enabled => flags[:fabric_enabled], # Enables Flipper. # # Note that if you have use_frameworks! enabled, Flipper will not work and # you should disable the next line. :flipper_configuration => flipper_config, # An absolute path to your application root. :app_path => "#{Pod::Config.instance.installation_root}/.." ) target 'SalusHealthTests' do inherit! :complete # Pods for testing end post_install do |installer| # https://github.com/facebook/react-native/blob/main/packages/react-native/scripts/react_native_pods.rb#L197-L202 react_native_post_install( installer, config[:reactNativePath], :mac_catalyst_enabled => false ) __apply_Xcode_12_5_M1_post_install_workaround(installer) endend
