status-im
/
react-native
mirror of https://github.com/status-im/react-native.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity
react-native/docs/RunningOnDeviceIOS.md

45 lines
2.7 KiB
Markdown
Raw Normal View History

Add docs about running on device
2015-04-02 17:41:22 +00:00
---
[docs] Make it clear which Guides are platform-specific This is in preparation for open sourcing React Native for Android. Also add hyphens to URLs for consistency. This can break people's browser bookmarks but it's better to be consistent and we can redirect to docs: https://github.com/facebook/react-native/issues/2137 Test plan: Ran the website locally using `cd website; npm start` and checked all pages render correctly. http://i.imgur.com/RrPNgRr.png Will update "Getting Started", "Tutorial", "Debugging" and "Testing" separately.
2015-07-27 17:03:46 +00:00
id: running-on-device-ios
Split iOS and Android docs into different categories
2015-09-18 17:54:05 +00:00
title: Running On Device
Add docs about running on device
2015-04-02 17:41:22 +00:00
layout: docs
Split iOS and Android docs into different categories
2015-09-18 17:54:05 +00:00
category: Guides (iOS)
[docs] Make it clear which Guides are platform-specific This is in preparation for open sourcing React Native for Android. Also add hyphens to URLs for consistency. This can break people's browser bookmarks but it's better to be consistent and we can redirect to docs: https://github.com/facebook/react-native/issues/2137 Test plan: Ran the website locally using `cd website; npm start` and checked all pages render correctly. http://i.imgur.com/RrPNgRr.png Will update "Getting Started", "Tutorial", "Debugging" and "Testing" separately.
2015-07-27 17:03:46 +00:00
permalink: docs/running-on-device-ios.html
Create Existing App Integration Tutorial Summary: We currently have iOS and Android existing app integration guides. I have revamped these into a single tutorial, with three sections: Objective-C, Swift and Android. For Objective-C and and Swift, the tutorial is now based on a more real world app - integrating a React Native-based high score screen into a 2048 app. For expediency to get the iOS stuff out, for Android, *for now*, I have kept the existing documentation (with minor updates), but am planning to try to follow the same 2048 model for it as well. This uses the same toggler as Getting Started > I do note the copypasta of the toggler code. I am planning another separate pull request to make that more modular and reusable across all areas of the documentation on which it seems reasonable. <img width="1277" alt="screenshot 2016-05-25 15 34 27" src="https://cloud.githubusercontent.com/assets/3757713/15558448/13c0aa1a-228f-11e6-9f38-5117d5824b84.png"> <img width="1260" alt="screenshot 2016-05-25 15 40 50" src="https://cloud.githubusercont Closes https://github.com/facebook/react-native/pull/7764 Differential Revision: D3444455 Pulled By: JoelMarcey fbshipit-source-id: 73dcdadd912177bb83b29099ff857046bf495939
2016-06-16 15:24:07 +00:00
next: communication-ios
Add docs about running on device
2015-04-02 17:41:22 +00:00
---
Fix link to Apple Developer account registration.
2015-08-04 21:07:42 +00:00
Note that running on device requires [Apple Developer account](https://developer.apple.com/register) and provisioning your iPhone. This guide covers only React Native specific topic.
Add docs about running on device
2015-04-02 17:41:22 +00:00
## 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.
fix AppDelegate.m path
2015-09-19 20:56:21 +00:00
1. Open `AwesomeApp/ios/AwesomeApp/AppDelegate.m`
Update RunningOnDeviceIOS.md
2015-10-17 09:26:58 +00:00
2. Change the IP in the URL from `localhost` to your laptop's IP. On Mac, you can find the IP address in System Preferences / Network.
Enable ATS w/ localhost exception for generated iOS proj Summary: Building off of the work in https://github.com/facebook/react-native/pull/5290, this… - Remove the total disabling of ATS from the react-native generated iOS project in favor of a localhost exception Closes https://github.com/facebook/react-native/pull/5355 Differential Revision: D2837517 fbshipit-source-id: ba4b7bd2f6ba4359f5d45175944b990f9927db3b
2016-05-31 19:19:39 +00:00
3. Temporarily disable App Transport Security (ATS) by [adding the `NSAllowsArbitraryLoads` entry to your `Info.plist` file][gpl]. Since ATS does not allow insecure HTTP requests to IP addresses, you must completely disable it to run on a device. This is only a requirement for development on a device, and unless you can't workaround an issue you should leave ATS enabled for production builds. For more information, see [this post on configuring ATS][bats].
4. In Xcode select your phone as build target and press "Build and run"
[gpl]: https://gist.github.com/andrewsardone/91797ff9923b9ac6ea64
[bats]: http://ste.vn/2015/06/10/configuring-app-transport-security-ios-9-osx-10-11/
Add docs about running on device
2015-04-02 17:41:22 +00:00
> Hint
>
Update RunningOnDevice.md - Misspell correction
2015-04-03 14:38:47 +00:00
> Shake the device to open development menu (reload, debug, etc.)
Add docs about running on device
2015-04-02 17:41:22 +00:00
## Using offline bundle
Update instructions for running on device Summary: We no longer need to manually build JS bundle, everything should be integrated into Xcode. Closes https://github.com/facebook/react-native/pull/5521 Reviewed By: svcscm Differential Revision: D2860511 Pulled By: martinbigio fb-gh-sync-id: fdde6b39aabccd5a39c140d431acbbbe5af71ec4
2016-01-25 17:41:12 +00:00
When you run your app on device, we pack all the JavaScript code and the images used into the app's resources. This way you can test it without development server running and submit the app to the AppStore.
Add docs about running on device
2015-04-02 17:41:22 +00:00
fix AppDelegate.m path
2015-09-19 20:56:21 +00:00
1. Open `AwesomeApp/ios/AwesomeApp/AppDelegate.m`
Update instructions for running on device Summary: We no longer need to manually build JS bundle, everything should be integrated into Xcode. Closes https://github.com/facebook/react-native/pull/5521 Reviewed By: svcscm Differential Revision: D2860511 Pulled By: martinbigio fb-gh-sync-id: fdde6b39aabccd5a39c140d431acbbbe5af71ec4
2016-01-25 17:41:12 +00:00
2. Uncomment `jsCodeLocation = [[NSBundle mainBundle] ...`
Improve ios offline build instructions Summary: Closes https://github.com/facebook/react-native/pull/5626 Reviewed By: svcscm Differential Revision: D2881020 Pulled By: androidtrunkagent fb-gh-sync-id: 7f472d554a334f39c4b85ccfa4db81b7c3f41d38
2016-01-29 22:26:44 +00:00
3. The JS bundle will be built for dev or prod depending on your app's scheme (Debug = development build with warnings, Release = minified prod build with perf optimizations). To change the scheme navigate to `Product > Scheme > Edit Scheme...` in xcode and change `Build Configuration` between `Debug` and `Release`.
Update RunningOnDeviceIOS.md
2015-10-13 19:08:11 +00:00
[Docs] Clean up debugging docs
2015-04-29 23:59:50 +00:00
## Disabling in-app developer menu
CI now builds docs website and deploys it to /%version% path Summary: Copy of #5760 reverted merge. We need to preserve history of docs changes on the webserver. The goal is to allow users to browse outdated versions of docs. To make things simple all websites will be released to https://facebook.github.io/react-native/releases/version/XX folder when there is a branch cut. I switched from Travis CI to Cirle CI because it works faster and I am more familiar with it. How it works: 1. If code is pushed to `master` branch then CI will build a fresh version of docs and put it in https://github.com/facebook/react-native/tree/gh-pages/releases/next folder. Github will serve this website from https://facebook.github.io/react-native/releases/version/next URL. All relative URLs will work within that website 2. If code is pushed to `0.20-stable` branch then CI will build a fresh version of docs and put it in https://github.com/facebook/react-native/tree/gh-pages/releases/0.20 folder. Github will serve this website from https://facebook.github.io/react-native/releases/v Closes https://github.com/facebook/react-native/pull/5873 Reviewed By: svcscm Differential Revision: D2926901 Pulled By: androidtrunkagent fb-gh-sync-id: 16aea430bac815933d9c603f03921cc6353906f1 shipit-source-id: 16aea430bac815933d9c603f03921cc6353906f1
2016-02-11 14:16:34 +00:00
When building your app for production, your app's scheme should be set to `Release` as detailed in [the debugging documentation](docs/debugging.html#debugging-react-native-apps) in order to disable the in-app developer menu.
[Docs] Clean up debugging docs
2015-04-29 23:59:50 +00:00
Add docs about running on device
2015-04-02 17:41:22 +00:00
## Troubleshooting
If `curl` command fails make sure the packager is running. Also try adding `--ipv4` flag to the end of it.
Update instructions for running on device Summary: We no longer need to manually build JS bundle, everything should be integrated into Xcode. Closes https://github.com/facebook/react-native/pull/5521 Reviewed By: svcscm Differential Revision: D2860511 Pulled By: martinbigio fb-gh-sync-id: fdde6b39aabccd5a39c140d431acbbbe5af71ec4
2016-01-25 17:41:12 +00:00
Note that since [v0.14](https://github.com/facebook/react-native/releases/tag/0.14.0) JS and images are automatically packaged into the iOS app using `Bundle React Native code and images` Xcode build phase.