Fixes #8252: Document how to connect to a non-default packager port o…

Summary: Added some documentation to the `RunningOnDeviceAndroid.md` with screenshots to set custom port Closes #8355 Differential Revision: D3475846 Pulled By: mkonicek fbshipit-source-id: 73675b19e2bb93c859bda239f228da0883f0e305
facebook · Jun 23, 2016 · fe55dd1 · fe55dd1
1 parent 1cc7ef0
commit fe55dd1
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 0 deletions.
diff --git a/docs/RunningOnDeviceAndroid.md b/docs/RunningOnDeviceAndroid.md
@@ -93,6 +93,22 @@ Have your device connected via USB with debugging enabled (see paragraph above o
 1. Run `adb reverse tcp:8081 tcp:8081`
 2. You can use `Reload JS` and other development options with no extra configuration
 
+
+### Running packager on a non-standard port
+
+Launch the packager manually with `react-native start --port [PORT]`
+
+For Android: Use the developer menu by clicking the menu button or shake. Select 'Debug server host & port for device' to set a different port.
+<center>
+  <img src="img/AndroidDeveloperMenu.png" width="162" />
+  <img src="img/AndroidDevSettings.png" width="150" />
+  <img src="img/AndroidDevServerDialog.png" width="150" />
+</center>
+
+For IOS: Edit the AppDelegate.m and change the line below to match the port number you're running:
+
+```jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];```
+
 ### Configure your app to connect to the local dev server via Wi-Fi
 
 1. Make sure your laptop and your phone are on the **same Wi-Fi network**.

diff --git a/website/src/react-native/img/AndroidDevServerDialog.png b/website/src/react-native/img/AndroidDevServerDialog.png
diff --git a/website/src/react-native/img/AndroidDevSettings.png b/website/src/react-native/img/AndroidDevSettings.png
diff --git a/website/src/react-native/img/AndroidDeveloperMenu.png b/website/src/react-native/img/AndroidDeveloperMenu.png