CODEWITHSUNDEEP
androidreact-native
gitsensible
gitsensible

Reputation: 551

React Native - Is There a Simple Way to Build and Deploy Debug APK?

ALL the documentation seems to consider one is either in development mode and seeking to switch ports for a developer device or the are doing a production build! I just want to create an appDebug.apk that anyone can use to run the app without seeing errors about bridges, event emitters, or AppRegistry etc. I can't tell others who want to see the React Native app to switch ports etc, and I don't want to do a full release every time I share the app. Any suggestions?

UPDATE: I do not want to debug the app. I just want to release a test build that works on anyone's device so I can share the build for testing.

 UPDATE: HERE IS MY PROJECT STRUCTURE:under
   main-project
   -> index.android.js
   ->gridlew
   -> build.properties
   ->build.gradle
   ->package.json
   -> my-app  (App project folder)
       -> build->output->apk->release.apk 
       ->src->main->assets
       ->src->main->res 
       ->src->main->java

Upvotes: 6

Views: 5647

Answers (4)

gitsensible
gitsensible

Reputation: 551

Here are the steps needed to make this work taken from the build.grade generated from creating a react-native app:

This is your app build file:

import com.android.build.OutputFile
// These properties must be declared above the apply below!
project.ext.react = [
    // whether to bundle JS and assets in debug mode
    bundleInDebug: true,

    // whether to bundle JS and assets in release mode
    bundleInRelease: true,

    bundleIn$releaseDebug: true  // For custom release type

  ]


 apply from: "../node_modules/react-native/react.gradle"  // adjust depending on where your node_modules directory is located.

Also check that you have ext properties defined with app package name etc in the build.gradle a level up.

This works and the bundle is created successfully for all build types.

Upvotes: 4

Vaiden
Vaiden

Reputation: 16132

In my project I've achieved this by creating a build variant that bundles the generated RN code within the APK.

Generating the bundle.js

Using wget I grab the RN code from the Node.JS local server and save it as bundle.js:

wget "http://127.0.0.1:8081/index.android.bundle?platform=android&dev=false" -O bundle.js

Adding bundle.js to the project

I add the bundle.js file to assets/ dir.

Creating a build variant that points RN to the file

I don;t wanna manually change my code whenever I wanna switch between local (bundle.js) and live versions. So I've created a build variant for this case. There is an extensive tutorial on build variants here, so I'll just go over the cruicial details only.

In my build.gradle, under the android node, I've added:

productFlavors {
      bundled {
          buildConfigField 'boolean', 'BUNDLED', 'true'
          buildConfigField 'String', 'DEV_HOST', "null"
      }
}

This automatically generates BuildConfig.java (more about this here):

public final class BuildConfig {
  public static final boolean DEBUG = Boolean.parseBoolean("true");
  public static final String APPLICATION_ID = "....";
  public static final String BUILD_TYPE = "debug";
  public static final String FLAVOR = "bundled";
  public static final int VERSION_CODE = ...;
  public static final String VERSION_NAME = ...;
  // Fields from product flavor: bundled
  public static final boolean BUNDLED = true;
}

Pointing RN to bundle.js

So now I fire up RN based on my build variant:

boolean bundled = BuildConfig.BUNDLED;

mReactInstanceManager = ReactInstanceManager.builder()
        .setApplication(getApplication())
        .setBundleAssetName("bundle.js")
        .setJSMainModuleName("index.android")
        .setJSBundleFile(bundled ? "assets://bundle.js" : null)
        .addPackage(new MainReactPackage(false))
        .addPackage(mInnerItemReactPackage)
        .setUseDeveloperSupport(bundled ? false : ConfigSupplier.isDebuggable())
        .setInitialLifecycleState(LifecycleState.RESUMED)
        .build();

Generating the APK

I choose the correct build variant from the Build Variants screen: enter image description here

And then proceed as usual by clicking Build -> Build APK.

I might add a more detailed blog post later.

Upvotes: 2

Brunaine
Brunaine

Reputation: 1236

https://stackoverflow.com/a/36961021/6832877

For testing the Apps on devices I use this comment from another question

You need to manually create the bundle for a debug build.

Bundle debug build:

react-native bundle --dev false --platform android --entry-file index.android.js --bundle-output ./android/app/build/intermediates/assets/debug/index.android.bundle --assets-dest ./android/app/build/intermediates/res/merged/debug

Create debug build:

cd android
./gradlew assembleDebug

The .apk will be in:

"APP"/android/app/build/outputs/apk

P.S. Another approach might be to modify gradle scripts.

For bridge problems:

react-native run-android
react-native start --reset-cache

or:

cd myproject  
react-native start > /dev/null 2>&1 &  
curl "http://localhost:8081/index.android.bundle?platform=android" -o
> "android/app/src/main/assets/index.android.bundle

or:

adb reverse tcp:8081 tcp:8081

Upvotes: 4

Rick Liao
Rick Liao

Reputation: 1017

Maybe use Expo or create-react-native-app?

Install Expo app on their iOS or Android phone.

Run your project, you will get a link or QRCode. Then send this link or qrcode to share your app to anyone.

Upvotes: 2

Related Questions