react-native/docs/RunningOnDeviceIOS.md

---
id: running-on-device-ios
title: Running On Device
layout: docs
category: Guides (iOS)
permalink: docs/running-on-device-ios.html
next: running-on-simulator-ios
---

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.

## Accessing development server from device

You can iterate quickly on device using development server. Ensure that you are on the same WiFi network as your computer.

1. Open `AwesomeApp/ios/AwesomeApp/AppDelegate.m`
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.
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/

> Hint
>
> Shake the device to open development menu (reload, debug, etc.)

## Using offline bundle

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.

1. Open `AwesomeApp/ios/AwesomeApp/AppDelegate.m`
2. Uncomment `jsCodeLocation = [[NSBundle mainBundle] ...`
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`.

## 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](docs/debugging.html#debugging-react-native-apps) 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.

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.
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`
Add docs to show how to select specific simulator. Summary: Add a message to let people know they can use the `--simulator` flag to run their apps on different simulators instead of the default "iPhone 6" Closes https://github.com/facebook/react-native/pull/8078 Differential Revision: D3464912 Pulled By: JoelMarcey fbshipit-source-id: b59d5061d2b3501618602932fcc285bac99b7573 2016-06-21 19:53:07 +00:00			`next: running-on-simulator-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`

Cleanup troubleshooting and debugging docs. Summary: This is a followup to #8010. Troubleshooting has been updated to list only those issues that may affect a user that is setting up their environment. Any issues related to day to day use have been moved or merged into a more relevant doc. Closes https://github.com/facebook/react-native/pull/8254 Reviewed By: caabernathy Differential Revision: D3459018 Pulled By: JoelMarcey fbshipit-source-id: dd76097af34bd33dda376fab39fb0f71061ef3e4 2016-06-20 22:20:16 +00:00			`You can iterate quickly on device using development server. Ensure that you are on the same WiFi network as your computer.`
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 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.