can the native portions of of a react-native package be run and developed standalone?

Question

Cross platform react-native packages have native android code, native iOS code, and javascript code that bridges them into the javascript world.

Presumably when working on the native portions of such a package you would import them into their respective IDEs (android-studio and Xcode) and do the UI development in the IDE.

When I look at react-native packages as a whole, or import the native portions into their respective IDEs, said native portions do no appear to be runnable standalone... at least not as a standalone android or ios application.

My question is how can you use the native IDEs to import/build/run/debug the native part of a react-native package? Would you typically still need the react-native server and rest javscript bridging code to be running?

The specific package I am looking at trying to modify native portion of is react-native-datetime. My hope is to be able to import the android portion into android-studio and figure out how to run and modify one of the pickers.

Answer 1

React Native projects have on their root folder two other directories: android and ios, which have the Android (you can open it with Android Studio as any other Android project) and the XCode iOS projects respectively.

I would say that the react packager needs to be open so the app can fetch the JS files. I just tried closing it and running the app on XCode alone, and it opened the packager before on a terminal window.

My suggestion is: create an empty project, import that react-native-datetime package, use it on the main screen and play with it natively with Android Studio or XCode, if that's an option.

Answer 2

If you create a static bundle of your js files for use in your app, you'll be able to run the app without having to keep the js server running. Then you should be able to work on the native code with the your editor/IDE using the android folder on your project directory (for android).

To create an offline bundle for android:

react-native bundle --platform android --dev false --entry-file index.android.js \ --bundle-output android/app/src/main/assets/index.android.bundle \ --assets-dest android/app/src/main/res/

This should create a static bundle index.android.bundle for your javascript code under android/app/src/main/assets/

A simpler way would be to do

curl "http://localhost:8081/index.android.bundle?platform=android" -o "android/app/src/main/assets/index.android.bundle"

from the build directory.