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

Question

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

USB debugging is the easiest way for you to debug on your own device. — Zoe, May 17 '17 at 09:09
A debug apk is faster and has more and different log information. It's common practice to share debug builds across development and QA. I don't want release keys etc for every build of the app. — gitsensible, May 17 '17 at 09:20
Also where is the release build for react-native documented? — gitsensible, May 17 '17 at 09:23
A debug APK can also be debugged by someone who isn't you which can be used to reverse engineer the app. And if oyu haven't specifically written code that doesn't print anythign unless it is in debug mode, there is **no difference what so ever between release and debug,** looking aside the fact that the person who has the app cannot debug it on his/her own. — Zoe, May 17 '17 at 09:23
I would take a guess that it is documented in the react native documentation. — Zoe, May 17 '17 at 09:23
But of course there is always debug comments that are quite different from production code and of course testers should be able to see this. — gitsensible, May 17 '17 at 11:54
see updates about my project structure. I have now tried both release build as suggested by LunarWatcher and debug build and both are leaving me with the bridge error. Only time i don't see it is when actively debugging the app in development — gitsensible, May 17 '17 at 12:37

score 4 · Answer 1 · edited May 23 '17 at 12:26

4

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

edited May 23 '17 at 12:26

Community

1
1

answered May 17 '17 at 09:59

Brunaine

1,178
2
16
24

I tried that but still got the bundle error. My app was integrated to have include RN so android path is not there and ./gridlew is a level up. – gitsensible May 17 '17 at 11:19
I think this should work but please see my explanation of my project structure. I think somehow it does not work with this structure and I am not sure how to fix it. – gitsensible May 17 '17 at 12:36
This is a link only answer. Please add the details into your answer to make sure there aren't problems if the link ever goes down. – Zoe May 17 '17 at 12:36
and the structure you have is kinda weird by default doing react-native init project it should be okay – Brunaine May 17 '17 at 16:35

score 4 · Accepted Answer · answered May 23 '17 at 03:44

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.

In which file exactly we have to make these changes . Native code or react-native code — Kartiikeya, Oct 06 '17 at 05:11

score 2 · Answer 3 · answered May 17 '17 at 09:30

2

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.

answered May 17 '17 at 09:30

Rick Liao

968
1
7
11

Actually it is good to look at the build.gradle file from create-react-native-app. By customising this build file for your own environment properly this can be achieved. – gitsensible May 23 '17 at 03:38

Vaiden · Answer 4 · 2017-05-18T11:38:02.677

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:

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

I might add a more detailed blog post later.

This looks very interesting. I will try this approach and see if it works for my file structure. — gitsensible, May 19 '17 at 03:04
at what folder level level do you place the assets in this example? Relative to say where index.android.js is residing? — gitsensible, May 19 '17 at 06:19
@gitsensible the location of bundle.js has nothing to do with the location of the assets. You do not need to move any of your assets. In case you were windering about the assets/ dir - it's where it has always been - src/main/assets — Vaiden, May 19 '17 at 13:45
@gitsensible this should not affect your file structure at all. No nee to move the assets around. — Vaiden, May 19 '17 at 13:46