4

I am currently trying to do it using clean react native project. I followed official android instant apps guides.

What I did to turn react-native into Android Instant Apps

  1. Renamed app module to base module

  2. Removed splits and applicationVariants in build.gradle

  3. Created installed module and instantApp module.

  4. Added import OutputFile, entryFile, and apply from react.gradle inside installed module

However, I am running into following problems.

  1. react-native run-android fails because it is still looking for app module.
  2. Running instantApp from Android Studio will run the app on my phone, but failing to download JS from my React metro bundler even after running it manually and executing adb reverse tcp:8081 tcp:8081
  3. Renaming base module back to app module and running react-native run-android still fails with error message Error: Activity class {com.instantapp/com.instantapp.MainActivity} does not exist.

I tried searching everywhere but couldn't find a solution.

Eric Kim
  • 10,617
  • 4
  • 29
  • 31

1 Answers1

1

After renaming the app module to 'base' you will need to create another app module in your project (google's guides suggest to name it 'installed', but I would use 'app' instead in order to avoid this problem with react-native). Make react-native look for your new app module. This should resolve your problem, but I really don't think you will be able to build a 4MB-or-less apk file using React Native, remember that this is the maximum size an Instant App apk can have.

henrique
  • 28
  • 3
  • Note, for the full experience, 4mb is required (for non-games), otherwise 10mb is ok for a Try Now experience, see https://developer.android.com/topic/google-play-instant/overview#reduce-size – TWL Dec 06 '18 at 18:08
  • Yeah, you're right. Also, according to this report it appears to be possible to build a RN apk with 3.5mb - https://medium.com/@aswinmohanme/how-i-reduced-the-size-of-my-react-native-app-by-86-27be72bba640 – henrique Dec 06 '18 at 18:24
  • @HenriqueCamposdeFreitas thank you for the answer. I followed the steps to rename to 'base' and creating another module named 'installed'. I also added 'instantapp' module as well. Can you be more specific what you mean by "Make react-native look for your new app module." ? I tried to dig into the react-native source code but still can't figure out why my app can't connect to my metro bundler (even after adb reverse tcp:8081 tcp:8081) – Eric Kim Dec 11 '18 at 05:20
  • @EricKim Have you found any way to do this ? (yes i'm digging a 3-years-old post :)) – John Smith Dec 17 '21 at 10:46
  • @JohnSmith No unfortunately not, I am looking into just using web apps with fullscreen mode – Eric Kim Dec 30 '21 at 06:36