Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Docs] Consolidate Running on Device (Android|iOS) Guides into one #10726

Closed
wants to merge 3 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions Examples/Movies/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ Mac OS and Xcode are required.
- Open `Examples/Movies/Movies.xcodeproj` in Xcode
- Hit the Run button

See [Running on device](https://facebook.github.io/react-native/docs/running-on-device-ios.html) if you want to use a physical device.
See [Running on device](https://facebook.github.io/react-native/docs/running-on-device.html) if you want to use a physical device.

### Running on Android

Expand All @@ -33,7 +33,7 @@ _Note: Building for the first time can take a while._

Open the Movies app in your emulator.

See [Running on Device](https://facebook.github.io/react-native/docs/running-on-device-android.html) in case you want to use a physical device.
See [Running on Device](https://facebook.github.io/react-native/docs/running-on-device.html) in case you want to use a physical device.

### Running with Buck

Expand Down
4 changes: 2 additions & 2 deletions Examples/UIExplorer/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ Mac OS and Xcode are required.
- Open `Examples/UIExplorer/UIExplorer.xcodeproj` in Xcode
- Hit the Run button

See [Running on device](https://facebook.github.io/react-native/docs/running-on-device-ios.html) if you want to use a physical device.
See [Running on device](https://facebook.github.io/react-native/docs/running-on-device.html) if you want to use a physical device.

### Running on Android

Expand All @@ -33,7 +33,7 @@ _Note: Building for the first time can take a while._

Open the UIExplorer app in your emulator.

See [Running on Device](https://facebook.github.io/react-native/docs/running-on-device-android.html) in case you want to use a physical device.
See [Running on Device](https://facebook.github.io/react-native/docs/running-on-device.html) in case you want to use a physical device.

### Running with Buck

Expand Down
95 changes: 56 additions & 39 deletions docs/GettingStarted.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,40 +17,40 @@ want to develop for both iOS and Android, that's fine - you just have to pick
one to start with, since the setup is a bit different.

<div class="toggler">
<style>
.toggler a {
display: inline-block;
padding: 10px 5px;
margin: 2px;
border: 1px solid #05A5D1;
border-radius: 3px;
text-decoration: none !important;
}
.display-os-mac .toggler .button-mac,
.display-os-linux .toggler .button-linux,
.display-os-windows .toggler .button-windows,
.display-platform-ios .toggler .button-ios,
.display-platform-android .toggler .button-android {
background-color: #05A5D1;
color: white;
}
block { display: none; }
.display-platform-ios.display-os-mac .ios.mac,
.display-platform-ios.display-os-linux .ios.linux,
.display-platform-ios.display-os-windows .ios.windows,
.display-platform-android.display-os-mac .android.mac,
.display-platform-android.display-os-linux .android.linux,
.display-platform-android.display-os-windows .android.windows {
display: block;
}
</style>
<span>Mobile OS:</span>
<a href="javascript:void(0);" class="button-ios" onclick="display('platform', 'ios')">iOS</a>
<a href="javascript:void(0);" class="button-android" onclick="display('platform', 'android')">Android</a>
<span>Development OS:</span>
<a href="javascript:void(0);" class="button-mac" onclick="display('os', 'mac')">macOS</a>
<a href="javascript:void(0);" class="button-linux" onclick="display('os', 'linux')">Linux</a>
<a href="javascript:void(0);" class="button-windows" onclick="display('os', 'windows')">Windows</a>
<style>
.toggler a {
display: inline-block;
padding: 10px 5px;
margin: 2px;
border: 1px solid #05A5D1;
border-radius: 3px;
text-decoration: none !important;
}
.display-os-mac .toggler .button-mac,
.display-os-linux .toggler .button-linux,
.display-os-windows .toggler .button-windows,
.display-platform-ios .toggler .button-ios,
.display-platform-android .toggler .button-android {
background-color: #05A5D1;
color: white;
}
block { display: none; }
.display-platform-ios.display-os-mac .ios.mac,
.display-platform-ios.display-os-linux .ios.linux,
.display-platform-ios.display-os-windows .ios.windows,
.display-platform-android.display-os-mac .android.mac,
.display-platform-android.display-os-linux .android.linux,
.display-platform-android.display-os-windows .android.windows {
display: block;
}
</style>
<span>Mobile OS:</span>
<a href="javascript:void(0);" class="button-ios" onclick="display('platform', 'ios')">iOS</a>
<a href="javascript:void(0);" class="button-android" onclick="display('platform', 'android')">Android</a>
<span>Development OS:</span>
<a href="javascript:void(0);" class="button-mac" onclick="display('os', 'mac')">macOS</a>
<a href="javascript:void(0);" class="button-linux" onclick="display('os', 'linux')">Linux</a>
<a href="javascript:void(0);" class="button-windows" onclick="display('os', 'windows')">Windows</a>
</div>

<block class="linux windows ios" />
Expand Down Expand Up @@ -326,7 +326,25 @@ Congratulations! You've successfully run and modified your first React Native ap

<center><img src="img/react-native-congratulations.png" width="150"></img></center>

<block class="windows linux android" />
<block class="windows android" />

## Testing your React Native Installation

Use the React Native command line interface to generate a new React Native project called "AwesomeProject", then run `react-native start` inside the newly created folder to start the packager.

```
react-native init AwesomeProject
cd AwesomeProject
react-native start
```

Open a new command prompt and run `react-native run-android` inside the same folder to launch the app on your AVD.

```
react-native run-android
```

<block class="linux android" />

## Testing your React Native Installation

Expand All @@ -338,14 +356,13 @@ cd AwesomeProject
react-native run-android
```

If everything is set up correctly, you should see your new app running in your Android emulator shortly.
<block class="windows linux android" />

> A common issue is that the packager is not started automatically when you run
`react-native run-android`. You can start it manually using `react-native start`.
If everything is set up correctly, you should see your new app running in your Android emulator shortly.

<block class="windows android" />

> If you hit a `ERROR Watcher took too long to load` on Windows, try increasing the timeout in [this file](https://github.com/facebook/react-native/blob/5fa33f3d07f8595a188f6fe04d6168a6ede1e721/packager/react-packager/src/DependencyResolver/FileWatcher/index.js#L16) (under your `node_modules/react-native/`).
> If you hit a `ERROR Watcher took too long to load`, try increasing the timeout in [this file](https://github.com/facebook/react-native/blob/5fa33f3d07f8595a188f6fe04d6168a6ede1e721/packager/react-packager/src/DependencyResolver/FileWatcher/index.js#L16) (under your `node_modules/react-native/`).

<block class="windows linux android" />

Expand Down
2 changes: 1 addition & 1 deletion docs/HeadlessJSAndroid.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ title: Headless JS
layout: docs
category: Guides (Android)
permalink: docs/headless-js-android.html
next: running-on-device-android
next: signed-apk-android
previous: native-components-android
---

Expand Down
6 changes: 3 additions & 3 deletions docs/IntegrationWithExistingApps.md
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ The keys to integrating React Native components into your iOS application are to
5. Start the React Native server and run your native application.
6. Optionally add more React Native components.
7. [Debug](/react-native/releases/next/docs/debugging.html).
8. Prepare for [deployment](/react-native/docs/running-on-device-ios.html) (e.g., via the `react-native-xcode.sh` script).
8. Prepare for [deployment](/react-native/docs/running-on-device.html) (e.g., via the `react-native-xcode.sh` script).
9. Deploy and Profit!

<block class="android" />
Expand All @@ -72,7 +72,7 @@ The keys to integrating React Native components into your Android application ar
5. Start the React Native server and run your native application.
6. Optionally add more React Native components.
7. [Debug](/react-native/releases/next/docs/debugging.html).
8. [Prepare](/react-native/releases/next/docs/signed-apk-android.html) for [deployment](/react-native/docs/running-on-device-android.html).
8. [Prepare](/react-native/releases/next/docs/signed-apk-android.html) for [deployment](/react-native/docs/running-on-device.html).
9. Deploy and Profit!

<block class="objc swift android" />
Expand Down Expand Up @@ -612,7 +612,7 @@ Next, make sure you have the Internet permission in your `AndroidManifest.xml`:
If you need to access to the `DevSettingsActivity` add to your `AndroidManifest.xml`:

<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />

This is only really used in dev mode when reloading JavaScript from the development server, so you can strip this in release builds if you need to.

## Add native code
Expand Down
2 changes: 1 addition & 1 deletion docs/LinkingLibraries.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ title: Linking Libraries
layout: docs
category: Guides (iOS)
permalink: docs/linking-libraries-ios.html
next: running-on-device-ios
next: running-on-simulator-ios
previous: native-components-ios
---

Expand Down
Loading