App not working on release build

[sanjeevyadavIT]

Describe the bug App isn't working on release build.

Expected behavior App should have run in same way as run in debug build

Current Behavior Throws an error in MessageView component

Steps to Reproduce Please provide detailed steps for reproducing the issue.

1. Create signing keystroke file if not made : instructions
2. Configure app/build.gradle to read release.keystroke file
3. Run react-native run-android --variant=release
4. See error...

Screenshots

Smartphone (please complete the following information):

• Magento Version: [2.1.0]
• Device: [Emulator Nexus 5X]
• OS: [PIE]
• Version [28].

Other Context enabling debuggable true on release, makes app run normally but it is using npm start server to load bundle.js then

[sanjeevyadavIT]

Problem: In release log function in src/magento/index.js was being set null, hence throwing error :man_facepalming:

[sanjeevyadavIT]

SO: create release build

[dimaportenko]

@alexakasanjeev you probably missed this easy way to remove console.log from production build https://facebook.github.io/react-native/docs/performance

[sanjeevyadavIT]

thank you, will implement it in code :)

[hm-harshit]

still it's not working, I tried to make a build with using android:usesCleartextTraffic="true" in AndroidManifest.xml still getting the same error

[sanjeevyadavIT]

hi @harshitmahendra

Can you please make sure you have following things setup.

1. [ ] Make sure you have latest pull from develop branch and it has specific commit 8aabe42347b9752d80e266715d974761cb487fae
2. [ ] in src/magento/index.js their is used of console.log('...'); statement and not log('...'); //wrong statement

Also is this the release build or debug you are checking?

[hm-harshit]

hello @alexakasanjeev

1. I have the latest pull from develop branch which has console.log in src/magento/index.js file.

2. I Tried to make a release APK using the following steps : a. I copied my my-upload-key.keystore to android/app b. Then I go to android folder in gradle.properties and pasted this : MYAPP_UPLOAD_STORE_FILE=my-upload-key.keystore MYAPP_UPLOAD_KEY_ALIAS=my-key-alias MYAPP_UPLOAD_STORE_PASSWORD=123456 MYAPP_UPLOAD_KEY_PASSWORD=123456 c. Then I go to android/app in build.gradle file and pasted this code to my file : ... android { ... defaultConfig { ... } 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 } } } buildTypes { release { ... signingConfig signingConfigs.release } } } ... d. then I go to AndroidManifest.xml and pasted this android:usesCleartextTraffic="true" under application tag e. Then run the following command in a terminal: cd android/ && sudo ./gradlew assembleRelease

   f. Then I found BUILD SUCCESSFUL in my Terminal, Then I go to android/app/build/outputs/apk/release and FOUND app-release.apk in that folder. Then I send this via Whatsapp and then run this apk to my [Honor play] mobile. The above screenshot is from my phone

The app is running when i tried react-native run-android in my terminal, but it's not working in release APK..

[sanjeevyadavIT]

Hello @harshitmahendra thank you for your time, I started from scratch and ran into the same problem, for some reason android is using old cache of the code, so before you run react-native run-android --variant=release run one more command. Please notify if successful

TLDR:

1. Open terminal pointing to magento_react_native folder
2. Run command react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
3. Important: Delete these files manually if created after step no. 2

   android/app/src/main/res/drawable-hdpi/node_modules_reactnavigationstack_lib_module_views_assets_backicon.png
   android/app/src/main/res/drawable-mdpi/node_modules_reactnavigationstack_lib_module_views_assets_backicon.png
   android/app/src/main/res/drawable-mdpi/node_modules_reactnavigationstack_lib_module_views_assets_backiconmask.png
   android/app/src/main/res/drawable-xhdpi/node_modules_reactnavigationstack_lib_module_views_assets_backicon.png
   android/app/src/main/res/drawable-xxhdpi/node_modules_reactnavigationstack_lib_module_views_assets_backicon.png
   android/app/src/main/res/drawable-xxxhdpi/node_modules_reactnavigationstack_lib_module_views_assets_backicon.png

4. Cd into android folder cd android/
5. Generate the release APK by running command ./gradlew bundleRelease
6. To test the release build of your app run cd .. && react-native run-android --variant=release

After successful build, you will see that Appbar color is blue not white and there is only two icon on right side search and cart icon, that means you are running latest changes

---

Clone repo

1. clone repo git clone https://github.com/alexakasanjeev/magento_react_native.git
2. cd into the project and run npm install

Run debug build

1. In terminal run npm start
2. In separate terminal run react-native run-android

   If you get this error

   Task :react-native-gesture-handler:compileDebugJavaWithJavac
   magento_react_native/node_modules/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerStateChangeEvent.java:3: error: package androidx.core.util does not exist
   import androidx.core.util.Pools;

   do this 2.1 run this command npm uninstall react-native-gesture-handler 2.2 after that run npm install react-native-gesture-handler@1.1.0 then try again

Run release build

1. Open terminal pointing to magento_react_native folder
2. Go into android folder by running cd android/ in terminal
3. run keytool -genkeypair -v -keystore my-upload-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

   remember the keystore and key password

4. Place the my-upload-key.keystore file under the android/app directory in your project folder.
5. Edit the file ~/.gradle/gradle.properties or android/gradle.properties, and add the following (replace ***** with the correct keystore password, alias and key password),

   MYAPP_UPLOAD_STORE_FILE=my-upload-key.keystore
   MYAPP_UPLOAD_KEY_ALIAS=my-key-alias
   MYAPP_UPLOAD_STORE_PASSWORD=*****
   MYAPP_UPLOAD_KEY_PASSWORD=*****

6. Edit the file android/app/build.gradle in your project folder, and add the signing config

   ...
   android {
   ...
   defaultConfig { ... }
   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
           }
       }
   }
   buildTypes {
       release {
           ...
           signingConfig signingConfigs.release
       }
   }
   }
   ...

7. Move out of the android folder in terminal by running cd ..
8. Run command react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
9. Important: Delete these files manually if created after step no. 8

   android/app/src/main/res/drawable-hdpi/node_modules_reactnavigationstack_lib_module_views_assets_backicon.png
   android/app/src/main/res/drawable-mdpi/node_modules_reactnavigationstack_lib_module_views_assets_backicon.png
   android/app/src/main/res/drawable-mdpi/node_modules_reactnavigationstack_lib_module_views_assets_backiconmask.png
   android/app/src/main/res/drawable-xhdpi/node_modules_reactnavigationstack_lib_module_views_assets_backicon.png
   android/app/src/main/res/drawable-xxhdpi/node_modules_reactnavigationstack_lib_module_views_assets_backicon.png
   android/app/src/main/res/drawable-xxxhdpi/node_modules_reactnavigationstack_lib_module_views_assets_backicon.png

10. Cd into android folder cd android/
11. Generate the release APK by running command ./gradlew bundleRelease (make sure you are in android folder in terminal)
12. To test the release build of your app run cd .. && react-native run-android --variant=release