Given some [confusion around `react-native bundle`'s `--dev` flag][1],
this hopes to clear somet things up int he docs by…
- Removing mentions of the `__DEV__` environment variable
- I think it confuses the user on how to work with the command-line
flag, and frankly it seems like an internal implementation detail
from the perspective of react-native-cli. We should focus on what
the `--dev` flag does (e.g., toggles dev warnings, performance
optimizations).
- Adding a minimal note about native-land's build configurations and how
that should be checked for production builds
[1]: https://github.com/facebook/react-native/issues/4181
2.8 KiB
id, title, layout, category, permalink, next
| id | title | layout | category | permalink | next |
|---|---|---|---|---|---|
| running-on-device-ios | Running On Device | docs | Guides (iOS) | docs/running-on-device-ios.html | embedded-app-ios |
Note that running on device requires Apple Developer account and provisioning your iPhone. This guide covers only React Native specific topic.
Accessing development server from device
You can iterate quickly on device using development server. To do that, your laptop and your phone have to be on the same wifi network.
- Open
AwesomeApp/ios/AwesomeApp/AppDelegate.m - Change the IP in the URL from
localhostto your laptop's IP. On Mac, you can find the IP address in System Preferences / Network. - In Xcode select your phone as build target and press "Build and run"
Hint
Shake the device to open development menu (reload, debug, etc.)
Using offline bundle
You can also pack all the JavaScript code within the app itself. This way you can test it without development server running and submit the app to the AppStore.
- Open
AwesomeApp/ios/AwesomeApp/AppDelegate.m - Follow the instructions for "OPTION 2":
- Uncomment
jsCodeLocation = [[NSBundle mainBundle] ... - Run the
react-native bundlecommand in terminal from the root directory of your app
The bundle script supports a couple of flags:
--dev- a boolean with a default value oftrue. With the--dev trueflag, the bundled JavaScript code turns on useful development warnings and limits performance optimizations. For production it is recommended to pass--dev false. Also for production, be sure to have your native build configuration set toRelease(e.g., Xcode's Release configuration for iOS and gradle'sassembleReleasetask for Android) in order to disable things like the shake-to-show developer menu.--minify- pipe the JS code through UglifyJS.
Note that on 0.14 we'll change the API of react-native bundle. The major changes are:
- API is now
entry-file <path>based instead of url based. - Need to specify which platform you're bundling for
--platform <ios|android>. - Option
--outhas been renamed for--bundle-output. - Source maps are no longer automatically generated. Need to specify
--sourcemap-output <path>
Disabling in-app developer menu
When building your app for production, your app's scheme should be set to Release as detailed in the debugging documentation in order to disable the in-app developer menu.
Troubleshooting
If curl command fails make sure the packager is running. Also try adding --ipv4 flag to the end of it.
If you started your project a while ago, main.jsbundle might not be included into Xcode project. To add it, right click on your project directory and click "Add Files to ..." - choose the main.jsbundle file that you generated.