Navigating Between Screens
Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.
This guide covers the various navigation components available in React Native. If you are just getting started with navigation, you will probably want to use React Navigation. React Navigation provides an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android.
If you're only targeting iOS, you may want to also check out NavigatorIOS as a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native UINavigationController class. This component will not work on Android, however.
If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms:react-native-navigation.
+If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: react-native-navigation.
React Navigation
The community solution to navigation is a standalone library that allows developers to set up the screens of an app with just a few lines of code.
The first step is to install in your project:
diff --git a/docs/0.10/navigation/index.html b/docs/0.10/navigation/index.html index b9e76f7d1aa..18cf72af1f4 100644 --- a/docs/0.10/navigation/index.html +++ b/docs/0.10/navigation/index.html @@ -36,7 +36,7 @@Navigating Between Screens
Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.
This guide covers the various navigation components available in React Native. If you are just getting started with navigation, you will probably want to use React Navigation. React Navigation provides an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android.
If you're only targeting iOS, you may want to also check out NavigatorIOS as a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native UINavigationController class. This component will not work on Android, however.
If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms:react-native-navigation.
+If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: react-native-navigation.
React Navigation
The community solution to navigation is a standalone library that allows developers to set up the screens of an app with just a few lines of code.
The first step is to install in your project:
diff --git a/docs/0.10/running-on-device.html b/docs/0.10/running-on-device.html index d2b3561df74..0c65c3a8c3d 100644 --- a/docs/0.10/running-on-device.html +++ b/docs/0.10/running-on-device.html @@ -102,7 +102,7 @@ }It's always a good idea to test your app on an actual device before releasing it to your users. This document will guide you through the necessary steps to run your React Native app on a device and to get it ready for production.
-If you used Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
+If you used Expo CLI or Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
- @@ -125,7 +125,7 @@ Windows
A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Create React Native App, which will allow you to run your app using the Expo client app.
+A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app.
1. Plug in your device via USB
Connect your iOS device to your Mac using a USB to Lightning cable. Navigate to the ios folder in your project, then open the .xcodeproj file, or if you are using CocoaPods open .xcworkspace, within it using Xcode.
It's always a good idea to test your app on an actual device before releasing it to your users. This document will guide you through the necessary steps to run your React Native app on a device and to get it ready for production.
-If you used Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
+If you used Expo CLI or Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
- @@ -125,7 +125,7 @@ Windows
A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Create React Native App, which will allow you to run your app using the Expo client app.
+A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app.
1. Plug in your device via USB
Connect your iOS device to your Mac using a USB to Lightning cable. Navigate to the ios folder in your project, then open the .xcodeproj file, or if you are using CocoaPods open .xcworkspace, within it using Xcode.
-Note: Make sure gradle.properties does not include org.gradle.configureondemand=true as that will make the release build skip bundling JS and assets into the APK.
The generated APK can be found under android/app/build/outputs/apk/app-release.apk, and is ready to be distributed.
The generated APK can be found under android/app/build/outputs/apk/release/app-release.apk, and is ready to be distributed.
Testing the release build of your app
Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using:
$ react-native run-android --variant=release
diff --git a/docs/0.10/signed-apk-android/index.html b/docs/0.10/signed-apk-android/index.html
index 5135a8539c3..48fbdfcb94a 100644
--- a/docs/0.10/signed-apk-android/index.html
+++ b/docs/0.10/signed-apk-android/index.html
@@ -102,7 +102,7 @@ $ ./gradlew assembleRelease
Note: Make sure gradle.properties does not include org.gradle.configureondemand=true as that will make the release build skip bundling JS and assets into the APK.
-The generated APK can be found under android/app/build/outputs/apk/app-release.apk, and is ready to be distributed.
+The generated APK can be found under android/app/build/outputs/apk/release/app-release.apk, and is ready to be distributed.
Testing the release build of your app
Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using:
$ react-native run-android --variant=release
diff --git a/docs/0.10/understanding-cli.html b/docs/0.10/understanding-cli.html
index bc476fbcf44..b92469ba0ac 100644
--- a/docs/0.10/understanding-cli.html
+++ b/docs/0.10/understanding-cli.html
@@ -76,7 +76,7 @@
CLI Configs
When using react-native start, its platform derivatives, and react-native bundle you can use a file to define the CLI options used by React Native by default. If you create a file rn-cli.config.js in the root of your project, it will be evaluated and options for the commands will come from there.
You can see the options for the CLI config file inside the source code for Metro here, and here is a common rn-cli.config.js used for supporting TypeScript in React Native projects:
You can see the options for the CLI config on the metro website. Here's a common rn-cli.config.js used for supporting TypeScript in React Native projects:
module.exports = {
getTransformModulePath() {
return require.resolve('react-native-typescript-transformer');
diff --git a/docs/0.10/understanding-cli/index.html b/docs/0.10/understanding-cli/index.html
index bc476fbcf44..b92469ba0ac 100644
--- a/docs/0.10/understanding-cli/index.html
+++ b/docs/0.10/understanding-cli/index.html
@@ -76,7 +76,7 @@
CLI Configs
When using react-native start, its platform derivatives, and react-native bundle you can use a file to define the CLI options used by React Native by default. If you create a file rn-cli.config.js in the root of your project, it will be evaluated and options for the commands will come from there.
You can see the options for the CLI config file inside the source code for Metro here, and here is a common rn-cli.config.js used for supporting TypeScript in React Native projects:
You can see the options for the CLI config on the metro website. Here's a common rn-cli.config.js used for supporting TypeScript in React Native projects:
module.exports = {
getTransformModulePath() {
return require.resolve('react-native-typescript-transformer');
diff --git a/docs/0.11/debugging.html b/docs/0.11/debugging.html
index 4bc83077a46..7e1d4192834 100644
--- a/docs/0.11/debugging.html
+++ b/docs/0.11/debugging.html
@@ -113,7 +113,7 @@ YellowBox.ignoreWarnings(['Warning: ...']);
Projects with Native Code Only
The remainder of this guide only applies to projects made with react-native init
- or to those made with Create React Native App which have since ejected. For
+ or to those made with expo init or Create React Native App which have since ejected. For
more information about ejecting, please see
the guide on
the Create React Native App repository.
@@ -126,11 +126,11 @@ YellowBox.ignoreWarnings(['Warning: ...']);
You may also access these through Debug → Open System Log... in the iOS Simulator or by running adb logcat *:S ReactNative:V ReactNativeJS:V in a terminal while an Android app is running on a device or emulator.
-If you're using Create React Native App, console logs already appear in the same terminal output as the packager.
+If you're using Create React Native App or Expo CLI, console logs already appear in the same terminal output as the packager.
Debugging on a device with Chrome Developer Tools
-If you're using Create React Native App, this is configured for you already.
+If you're using Create React Native App or Expo CLI, this is configured for you already.
On iOS devices, open the file RCTWebSocketExecutor.m and change "localhost" to the IP address of your computer, then select "Debug JS Remotely" from the Developer Menu.
On Android 5.0+ devices connected via USB, you can use the adb command line tool to setup port forwarding from the device to your computer:
Projects with Native Code Only
The remainder of this guide only applies to projects made with react-native init
- or to those made with Create React Native App which have since ejected. For
+ or to those made with expo init or Create React Native App which have since ejected. For
more information about ejecting, please see
the guide on
the Create React Native App repository.
@@ -126,11 +126,11 @@ YellowBox.ignoreWarnings(['Warning: ...']);
You may also access these through Debug → Open System Log... in the iOS Simulator or by running adb logcat *:S ReactNative:V ReactNativeJS:V in a terminal while an Android app is running on a device or emulator.
-If you're using Create React Native App, console logs already appear in the same terminal output as the packager.
+If you're using Create React Native App or Expo CLI, console logs already appear in the same terminal output as the packager.
Debugging on a device with Chrome Developer Tools
-If you're using Create React Native App, this is configured for you already.
+If you're using Create React Native App or Expo CLI, this is configured for you already.
On iOS devices, open the file RCTWebSocketExecutor.m and change "localhost" to the IP address of your computer, then select "Debug JS Remotely" from the Developer Menu.
On Android 5.0+ devices connected via USB, you can use the adb command line tool to setup port forwarding from the device to your computer:
Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.
2. Install the Android SDK
-Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.0 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.1 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".
-The SDK Manager can also be found within the Android Studio "Preferences" dialog, under Appearance & Behavior → System Settings → Android SDK.
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.0 (Oreo) entry, then make sure the following items are all checked:
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.1 (Oreo) entry, then make sure the following items are all checked:
-
-
Android SDK Platform 26
+Android SDK Platform 27Google APIs Intel x86 Atom_64 System Image
Add the following lines to your $HOME/.bash_profile config file:
export ANDROID_HOME=$HOME/Library/Android/sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
export ANDROID_HOME=$HOME/Android/Sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
diff --git a/docs/0.11/getting-started/index.html b/docs/0.11/getting-started/index.html index 3a29431d724..8ba5ca3edcc 100644 --- a/docs/0.11/getting-started/index.html +++ b/docs/0.11/getting-started/index.html @@ -260,7 +260,7 @@ npm start
Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.
2. Install the Android SDK
-Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.0 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.1 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".
-The SDK Manager can also be found within the Android Studio "Preferences" dialog, under Appearance & Behavior → System Settings → Android SDK.
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.0 (Oreo) entry, then make sure the following items are all checked:
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.1 (Oreo) entry, then make sure the following items are all checked:
-
-
Android SDK Platform 26
+Android SDK Platform 27Google APIs Intel x86 Atom_64 System Image
Add the following lines to your $HOME/.bash_profile config file:
export ANDROID_HOME=$HOME/Library/Android/sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
export ANDROID_HOME=$HOME/Android/Sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
diff --git a/docs/0.11/images.html b/docs/0.11/images.html index 176ad086fd9..112a783e170 100644 --- a/docs/0.11/images.html +++ b/docs/0.11/images.html @@ -77,7 +77,7 @@ var icon = this.props.activeNote that image sources required this way include size (width, height) info for the Image. If you need to scale the image dynamically (i.e. via flex), you may need to manually set
{ width: undefined, height: undefined }on the style attribute.Static Non-Image Resources
The
-requiresyntax described above can be used to statically include audio, video or document files in your project as well. Most common file types are supported including.mp3,.wav,.mp4,.mov,.htmlandYou can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
+You can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
A caveat is that videos must use absolute positioning instead of
flexGrow, since size info is not currently passed for non-image assets. This limitation doesn't occur for videos that are linked directly into Xcode or the Assets folder for Android.Images From Hybrid App's Resources
If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app.
diff --git a/docs/0.11/images/index.html b/docs/0.11/images/index.html index 176ad086fd9..112a783e170 100644 --- a/docs/0.11/images/index.html +++ b/docs/0.11/images/index.html @@ -77,7 +77,7 @@ var icon = this.props.activeNote that image sources required this way include size (width, height) info for the Image. If you need to scale the image dynamically (i.e. via flex), you may need to manually set
{ width: undefined, height: undefined }on the style attribute.Static Non-Image Resources
The
-requiresyntax described above can be used to statically include audio, video or document files in your project as well. Most common file types are supported including.mp3,.wav,.mp4,.mov,.htmlandYou can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
+You can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
A caveat is that videos must use absolute positioning instead of
flexGrow, since size info is not currently passed for non-image assets. This limitation doesn't occur for videos that are linked directly into Xcode or the Assets folder for Android.Images From Hybrid App's Resources
If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app.
diff --git a/docs/0.11/navigation.html b/docs/0.11/navigation.html index 4a5b8bea5ba..e155ff2dfc2 100644 --- a/docs/0.11/navigation.html +++ b/docs/0.11/navigation.html @@ -36,7 +36,7 @@
Navigating Between Screens
Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.
This guide covers the various navigation components available in React Native. If you are just getting started with navigation, you will probably want to use React Navigation. React Navigation provides an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android.
If you're only targeting iOS, you may want to also check out NavigatorIOS as a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native UINavigationController class. This component will not work on Android, however.
If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms:react-native-navigation.
+If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: react-native-navigation.
React Navigation
The community solution to navigation is a standalone library that allows developers to set up the screens of an app with just a few lines of code.
The first step is to install in your project:
diff --git a/docs/0.11/navigation/index.html b/docs/0.11/navigation/index.html index 4a5b8bea5ba..e155ff2dfc2 100644 --- a/docs/0.11/navigation/index.html +++ b/docs/0.11/navigation/index.html @@ -36,7 +36,7 @@Navigating Between Screens
Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.
This guide covers the various navigation components available in React Native. If you are just getting started with navigation, you will probably want to use React Navigation. React Navigation provides an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android.
If you're only targeting iOS, you may want to also check out NavigatorIOS as a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native UINavigationController class. This component will not work on Android, however.
If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms:react-native-navigation.
+If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: react-native-navigation.
React Navigation
The community solution to navigation is a standalone library that allows developers to set up the screens of an app with just a few lines of code.
The first step is to install in your project:
diff --git a/docs/0.11/running-on-device.html b/docs/0.11/running-on-device.html index 4b58006c633..21f908ceea8 100644 --- a/docs/0.11/running-on-device.html +++ b/docs/0.11/running-on-device.html @@ -102,7 +102,7 @@ }It's always a good idea to test your app on an actual device before releasing it to your users. This document will guide you through the necessary steps to run your React Native app on a device and to get it ready for production.
-If you used Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
+If you used Expo CLI or Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
- @@ -125,7 +125,7 @@ Windows
A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Create React Native App, which will allow you to run your app using the Expo client app.
+A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app.
1. Plug in your device via USB
Connect your iOS device to your Mac using a USB to Lightning cable. Navigate to the ios folder in your project, then open the .xcodeproj file, or if you are using CocoaPods open .xcworkspace, within it using Xcode.
It's always a good idea to test your app on an actual device before releasing it to your users. This document will guide you through the necessary steps to run your React Native app on a device and to get it ready for production.
-If you used Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
+If you used Expo CLI or Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
- @@ -125,7 +125,7 @@ Windows
A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Create React Native App, which will allow you to run your app using the Expo client app.
+A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app.
1. Plug in your device via USB
Connect your iOS device to your Mac using a USB to Lightning cable. Navigate to the ios folder in your project, then open the .xcodeproj file, or if you are using CocoaPods open .xcworkspace, within it using Xcode.
-Note: Make sure gradle.properties does not include org.gradle.configureondemand=true as that will make the release build skip bundling JS and assets into the APK.
The generated APK can be found under android/app/build/outputs/apk/app-release.apk, and is ready to be distributed.
The generated APK can be found under android/app/build/outputs/apk/release/app-release.apk, and is ready to be distributed.
Testing the release build of your app
Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using:
$ react-native run-android --variant=release
diff --git a/docs/0.11/signed-apk-android/index.html b/docs/0.11/signed-apk-android/index.html
index 61ada7e0149..d1e97383b6d 100644
--- a/docs/0.11/signed-apk-android/index.html
+++ b/docs/0.11/signed-apk-android/index.html
@@ -102,7 +102,7 @@ $ ./gradlew assembleRelease
Note: Make sure gradle.properties does not include org.gradle.configureondemand=true as that will make the release build skip bundling JS and assets into the APK.
-The generated APK can be found under android/app/build/outputs/apk/app-release.apk, and is ready to be distributed.
+The generated APK can be found under android/app/build/outputs/apk/release/app-release.apk, and is ready to be distributed.
Testing the release build of your app
Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using:
$ react-native run-android --variant=release
diff --git a/docs/0.11/understanding-cli.html b/docs/0.11/understanding-cli.html
index 5cd3827488a..15e8324f1a1 100644
--- a/docs/0.11/understanding-cli.html
+++ b/docs/0.11/understanding-cli.html
@@ -76,7 +76,7 @@
CLI Configs
When using react-native start, its platform derivatives, and react-native bundle you can use a file to define the CLI options used by React Native by default. If you create a file rn-cli.config.js in the root of your project, it will be evaluated and options for the commands will come from there.
You can see the options for the CLI config file inside the source code for Metro here, and here is a common rn-cli.config.js used for supporting TypeScript in React Native projects:
You can see the options for the CLI config on the metro website. Here's a common rn-cli.config.js used for supporting TypeScript in React Native projects:
module.exports = {
getTransformModulePath() {
return require.resolve('react-native-typescript-transformer');
diff --git a/docs/0.11/understanding-cli/index.html b/docs/0.11/understanding-cli/index.html
index 5cd3827488a..15e8324f1a1 100644
--- a/docs/0.11/understanding-cli/index.html
+++ b/docs/0.11/understanding-cli/index.html
@@ -76,7 +76,7 @@
CLI Configs
When using react-native start, its platform derivatives, and react-native bundle you can use a file to define the CLI options used by React Native by default. If you create a file rn-cli.config.js in the root of your project, it will be evaluated and options for the commands will come from there.
You can see the options for the CLI config file inside the source code for Metro here, and here is a common rn-cli.config.js used for supporting TypeScript in React Native projects:
You can see the options for the CLI config on the metro website. Here's a common rn-cli.config.js used for supporting TypeScript in React Native projects:
module.exports = {
getTransformModulePath() {
return require.resolve('react-native-typescript-transformer');
diff --git a/docs/0.12/debugging.html b/docs/0.12/debugging.html
index 704503d9c84..3e72061aced 100644
--- a/docs/0.12/debugging.html
+++ b/docs/0.12/debugging.html
@@ -113,7 +113,7 @@ YellowBox.ignoreWarnings(['Warning: ...']);
Projects with Native Code Only
The remainder of this guide only applies to projects made with react-native init
- or to those made with Create React Native App which have since ejected. For
+ or to those made with expo init or Create React Native App which have since ejected. For
more information about ejecting, please see
the guide on
the Create React Native App repository.
@@ -126,11 +126,11 @@ YellowBox.ignoreWarnings(['Warning: ...']);
You may also access these through Debug → Open System Log... in the iOS Simulator or by running adb logcat *:S ReactNative:V ReactNativeJS:V in a terminal while an Android app is running on a device or emulator.
-If you're using Create React Native App, console logs already appear in the same terminal output as the packager.
+If you're using Create React Native App or Expo CLI, console logs already appear in the same terminal output as the packager.
Debugging on a device with Chrome Developer Tools
-If you're using Create React Native App, this is configured for you already.
+If you're using Create React Native App or Expo CLI, this is configured for you already.
On iOS devices, open the file RCTWebSocketExecutor.m and change "localhost" to the IP address of your computer, then select "Debug JS Remotely" from the Developer Menu.
On Android 5.0+ devices connected via USB, you can use the adb command line tool to setup port forwarding from the device to your computer:
Projects with Native Code Only
The remainder of this guide only applies to projects made with react-native init
- or to those made with Create React Native App which have since ejected. For
+ or to those made with expo init or Create React Native App which have since ejected. For
more information about ejecting, please see
the guide on
the Create React Native App repository.
@@ -126,11 +126,11 @@ YellowBox.ignoreWarnings(['Warning: ...']);
You may also access these through Debug → Open System Log... in the iOS Simulator or by running adb logcat *:S ReactNative:V ReactNativeJS:V in a terminal while an Android app is running on a device or emulator.
-If you're using Create React Native App, console logs already appear in the same terminal output as the packager.
+If you're using Create React Native App or Expo CLI, console logs already appear in the same terminal output as the packager.
Debugging on a device with Chrome Developer Tools
-If you're using Create React Native App, this is configured for you already.
+If you're using Create React Native App or Expo CLI, this is configured for you already.
On iOS devices, open the file RCTWebSocketExecutor.m and change "localhost" to the IP address of your computer, then select "Debug JS Remotely" from the Developer Menu.
On Android 5.0+ devices connected via USB, you can use the adb command line tool to setup port forwarding from the device to your computer:
Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.
2. Install the Android SDK
-Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.0 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.1 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".
-The SDK Manager can also be found within the Android Studio "Preferences" dialog, under Appearance & Behavior → System Settings → Android SDK.
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.0 (Oreo) entry, then make sure the following items are all checked:
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.1 (Oreo) entry, then make sure the following items are all checked:
-
-
Android SDK Platform 26
+Android SDK Platform 27Google APIs Intel x86 Atom_64 System Image
Add the following lines to your $HOME/.bash_profile config file:
export ANDROID_HOME=$HOME/Library/Android/sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
export ANDROID_HOME=$HOME/Android/Sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
diff --git a/docs/0.12/getting-started/index.html b/docs/0.12/getting-started/index.html index f798bdc03ba..475b90f9604 100644 --- a/docs/0.12/getting-started/index.html +++ b/docs/0.12/getting-started/index.html @@ -260,7 +260,7 @@ npm start
Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.
2. Install the Android SDK
-Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.0 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.1 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".
-The SDK Manager can also be found within the Android Studio "Preferences" dialog, under Appearance & Behavior → System Settings → Android SDK.
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.0 (Oreo) entry, then make sure the following items are all checked:
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.1 (Oreo) entry, then make sure the following items are all checked:
-
-
Android SDK Platform 26
+Android SDK Platform 27Google APIs Intel x86 Atom_64 System Image
Add the following lines to your $HOME/.bash_profile config file:
export ANDROID_HOME=$HOME/Library/Android/sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
export ANDROID_HOME=$HOME/Android/Sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
diff --git a/docs/0.12/images.html b/docs/0.12/images.html index 212aab6b390..5ba9f9625c8 100644 --- a/docs/0.12/images.html +++ b/docs/0.12/images.html @@ -77,7 +77,7 @@ var icon = this.props.activeNote that image sources required this way include size (width, height) info for the Image. If you need to scale the image dynamically (i.e. via flex), you may need to manually set
{ width: undefined, height: undefined }on the style attribute.Static Non-Image Resources
The
-requiresyntax described above can be used to statically include audio, video or document files in your project as well. Most common file types are supported including.mp3,.wav,.mp4,.mov,.htmlandYou can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
+You can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
A caveat is that videos must use absolute positioning instead of
flexGrow, since size info is not currently passed for non-image assets. This limitation doesn't occur for videos that are linked directly into Xcode or the Assets folder for Android.Images From Hybrid App's Resources
If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app.
diff --git a/docs/0.12/images/index.html b/docs/0.12/images/index.html index 212aab6b390..5ba9f9625c8 100644 --- a/docs/0.12/images/index.html +++ b/docs/0.12/images/index.html @@ -77,7 +77,7 @@ var icon = this.props.activeNote that image sources required this way include size (width, height) info for the Image. If you need to scale the image dynamically (i.e. via flex), you may need to manually set
{ width: undefined, height: undefined }on the style attribute.Static Non-Image Resources
The
-requiresyntax described above can be used to statically include audio, video or document files in your project as well. Most common file types are supported including.mp3,.wav,.mp4,.mov,.htmlandYou can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
+You can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
A caveat is that videos must use absolute positioning instead of
flexGrow, since size info is not currently passed for non-image assets. This limitation doesn't occur for videos that are linked directly into Xcode or the Assets folder for Android.Images From Hybrid App's Resources
If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app.
diff --git a/docs/0.12/navigation.html b/docs/0.12/navigation.html index 99482f921ed..894fd86cc28 100644 --- a/docs/0.12/navigation.html +++ b/docs/0.12/navigation.html @@ -36,7 +36,7 @@
Navigating Between Screens
Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.
This guide covers the various navigation components available in React Native. If you are just getting started with navigation, you will probably want to use React Navigation. React Navigation provides an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android.
If you're only targeting iOS, you may want to also check out NavigatorIOS as a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native UINavigationController class. This component will not work on Android, however.
If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms:react-native-navigation.
+If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: react-native-navigation.
React Navigation
The community solution to navigation is a standalone library that allows developers to set up the screens of an app with just a few lines of code.
The first step is to install in your project:
diff --git a/docs/0.12/navigation/index.html b/docs/0.12/navigation/index.html index 99482f921ed..894fd86cc28 100644 --- a/docs/0.12/navigation/index.html +++ b/docs/0.12/navigation/index.html @@ -36,7 +36,7 @@Navigating Between Screens
Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.
This guide covers the various navigation components available in React Native. If you are just getting started with navigation, you will probably want to use React Navigation. React Navigation provides an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android.
If you're only targeting iOS, you may want to also check out NavigatorIOS as a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native UINavigationController class. This component will not work on Android, however.
If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms:react-native-navigation.
+If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: react-native-navigation.
React Navigation
The community solution to navigation is a standalone library that allows developers to set up the screens of an app with just a few lines of code.
The first step is to install in your project:
diff --git a/docs/0.12/running-on-device.html b/docs/0.12/running-on-device.html index b620ae5a484..ccf0a225121 100644 --- a/docs/0.12/running-on-device.html +++ b/docs/0.12/running-on-device.html @@ -102,7 +102,7 @@ }It's always a good idea to test your app on an actual device before releasing it to your users. This document will guide you through the necessary steps to run your React Native app on a device and to get it ready for production.
-If you used Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
+If you used Expo CLI or Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
- @@ -125,7 +125,7 @@ Windows
A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Create React Native App, which will allow you to run your app using the Expo client app.
+A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app.
1. Plug in your device via USB
Connect your iOS device to your Mac using a USB to Lightning cable. Navigate to the ios folder in your project, then open the .xcodeproj file, or if you are using CocoaPods open .xcworkspace, within it using Xcode.
It's always a good idea to test your app on an actual device before releasing it to your users. This document will guide you through the necessary steps to run your React Native app on a device and to get it ready for production.
-If you used Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
+If you used Expo CLI or Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
- @@ -125,7 +125,7 @@ Windows
A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Create React Native App, which will allow you to run your app using the Expo client app.
+A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app.
1. Plug in your device via USB
Connect your iOS device to your Mac using a USB to Lightning cable. Navigate to the ios folder in your project, then open the .xcodeproj file, or if you are using CocoaPods open .xcworkspace, within it using Xcode.
-Note: Make sure gradle.properties does not include org.gradle.configureondemand=true as that will make the release build skip bundling JS and assets into the APK.
The generated APK can be found under android/app/build/outputs/apk/app-release.apk, and is ready to be distributed.
The generated APK can be found under android/app/build/outputs/apk/release/app-release.apk, and is ready to be distributed.
Testing the release build of your app
Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using:
$ react-native run-android --variant=release
diff --git a/docs/0.12/signed-apk-android/index.html b/docs/0.12/signed-apk-android/index.html
index f0ce93d09de..12bda5c07dc 100644
--- a/docs/0.12/signed-apk-android/index.html
+++ b/docs/0.12/signed-apk-android/index.html
@@ -102,7 +102,7 @@ $ ./gradlew assembleRelease
Note: Make sure gradle.properties does not include org.gradle.configureondemand=true as that will make the release build skip bundling JS and assets into the APK.
-The generated APK can be found under android/app/build/outputs/apk/app-release.apk, and is ready to be distributed.
+The generated APK can be found under android/app/build/outputs/apk/release/app-release.apk, and is ready to be distributed.
Testing the release build of your app
Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using:
$ react-native run-android --variant=release
diff --git a/docs/0.12/understanding-cli.html b/docs/0.12/understanding-cli.html
index d3052231d7b..6ef9f699150 100644
--- a/docs/0.12/understanding-cli.html
+++ b/docs/0.12/understanding-cli.html
@@ -76,7 +76,7 @@
CLI Configs
When using react-native start, its platform derivatives, and react-native bundle you can use a file to define the CLI options used by React Native by default. If you create a file rn-cli.config.js in the root of your project, it will be evaluated and options for the commands will come from there.
You can see the options for the CLI config file inside the source code for Metro here, and here is a common rn-cli.config.js used for supporting TypeScript in React Native projects:
You can see the options for the CLI config on the metro website. Here's a common rn-cli.config.js used for supporting TypeScript in React Native projects:
module.exports = {
getTransformModulePath() {
return require.resolve('react-native-typescript-transformer');
diff --git a/docs/0.12/understanding-cli/index.html b/docs/0.12/understanding-cli/index.html
index d3052231d7b..6ef9f699150 100644
--- a/docs/0.12/understanding-cli/index.html
+++ b/docs/0.12/understanding-cli/index.html
@@ -76,7 +76,7 @@
CLI Configs
When using react-native start, its platform derivatives, and react-native bundle you can use a file to define the CLI options used by React Native by default. If you create a file rn-cli.config.js in the root of your project, it will be evaluated and options for the commands will come from there.
You can see the options for the CLI config file inside the source code for Metro here, and here is a common rn-cli.config.js used for supporting TypeScript in React Native projects:
You can see the options for the CLI config on the metro website. Here's a common rn-cli.config.js used for supporting TypeScript in React Native projects:
module.exports = {
getTransformModulePath() {
return require.resolve('react-native-typescript-transformer');
diff --git a/docs/0.13/debugging.html b/docs/0.13/debugging.html
index aa257e9cd8e..650175723f9 100644
--- a/docs/0.13/debugging.html
+++ b/docs/0.13/debugging.html
@@ -113,7 +113,7 @@ YellowBox.ignoreWarnings(['Warning: ...']);
Projects with Native Code Only
The remainder of this guide only applies to projects made with react-native init
- or to those made with Create React Native App which have since ejected. For
+ or to those made with expo init or Create React Native App which have since ejected. For
more information about ejecting, please see
the guide on
the Create React Native App repository.
@@ -126,11 +126,11 @@ YellowBox.ignoreWarnings(['Warning: ...']);
You may also access these through Debug → Open System Log... in the iOS Simulator or by running adb logcat *:S ReactNative:V ReactNativeJS:V in a terminal while an Android app is running on a device or emulator.
-If you're using Create React Native App, console logs already appear in the same terminal output as the packager.
+If you're using Create React Native App or Expo CLI, console logs already appear in the same terminal output as the packager.
Debugging on a device with Chrome Developer Tools
-If you're using Create React Native App, this is configured for you already.
+If you're using Create React Native App or Expo CLI, this is configured for you already.
On iOS devices, open the file RCTWebSocketExecutor.m and change "localhost" to the IP address of your computer, then select "Debug JS Remotely" from the Developer Menu.
On Android 5.0+ devices connected via USB, you can use the adb command line tool to setup port forwarding from the device to your computer:
Projects with Native Code Only
The remainder of this guide only applies to projects made with react-native init
- or to those made with Create React Native App which have since ejected. For
+ or to those made with expo init or Create React Native App which have since ejected. For
more information about ejecting, please see
the guide on
the Create React Native App repository.
@@ -126,11 +126,11 @@ YellowBox.ignoreWarnings(['Warning: ...']);
You may also access these through Debug → Open System Log... in the iOS Simulator or by running adb logcat *:S ReactNative:V ReactNativeJS:V in a terminal while an Android app is running on a device or emulator.
-If you're using Create React Native App, console logs already appear in the same terminal output as the packager.
+If you're using Create React Native App or Expo CLI, console logs already appear in the same terminal output as the packager.
Debugging on a device with Chrome Developer Tools
-If you're using Create React Native App, this is configured for you already.
+If you're using Create React Native App or Expo CLI, this is configured for you already.
On iOS devices, open the file RCTWebSocketExecutor.m and change "localhost" to the IP address of your computer, then select "Debug JS Remotely" from the Developer Menu.
On Android 5.0+ devices connected via USB, you can use the adb command line tool to setup port forwarding from the device to your computer:
Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.
2. Install the Android SDK
-Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.0 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.1 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".
-The SDK Manager can also be found within the Android Studio "Preferences" dialog, under Appearance & Behavior → System Settings → Android SDK.
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.0 (Oreo) entry, then make sure the following items are all checked:
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.1 (Oreo) entry, then make sure the following items are all checked:
-
-
Android SDK Platform 26
+Android SDK Platform 27Google APIs Intel x86 Atom_64 System Image
Add the following lines to your $HOME/.bash_profile config file:
export ANDROID_HOME=$HOME/Library/Android/sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
export ANDROID_HOME=$HOME/Android/Sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
diff --git a/docs/0.13/getting-started/index.html b/docs/0.13/getting-started/index.html index 28e500b2934..6f7efa3ea29 100644 --- a/docs/0.13/getting-started/index.html +++ b/docs/0.13/getting-started/index.html @@ -260,7 +260,7 @@ npm start
Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.
2. Install the Android SDK
-Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.0 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.1 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".
-The SDK Manager can also be found within the Android Studio "Preferences" dialog, under Appearance & Behavior → System Settings → Android SDK.
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.0 (Oreo) entry, then make sure the following items are all checked:
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.1 (Oreo) entry, then make sure the following items are all checked:
-
-
Android SDK Platform 26
+Android SDK Platform 27Google APIs Intel x86 Atom_64 System Image
Add the following lines to your $HOME/.bash_profile config file:
export ANDROID_HOME=$HOME/Library/Android/sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
export ANDROID_HOME=$HOME/Android/Sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
diff --git a/docs/0.13/images.html b/docs/0.13/images.html index 1d53ee72c65..b048c89ba32 100644 --- a/docs/0.13/images.html +++ b/docs/0.13/images.html @@ -77,7 +77,7 @@ var icon = this.props.activeNote that image sources required this way include size (width, height) info for the Image. If you need to scale the image dynamically (i.e. via flex), you may need to manually set
{ width: undefined, height: undefined }on the style attribute.Static Non-Image Resources
The
-requiresyntax described above can be used to statically include audio, video or document files in your project as well. Most common file types are supported including.mp3,.wav,.mp4,.mov,.htmlandYou can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
+You can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
A caveat is that videos must use absolute positioning instead of
flexGrow, since size info is not currently passed for non-image assets. This limitation doesn't occur for videos that are linked directly into Xcode or the Assets folder for Android.Images From Hybrid App's Resources
If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app.
diff --git a/docs/0.13/images/index.html b/docs/0.13/images/index.html index 1d53ee72c65..b048c89ba32 100644 --- a/docs/0.13/images/index.html +++ b/docs/0.13/images/index.html @@ -77,7 +77,7 @@ var icon = this.props.activeNote that image sources required this way include size (width, height) info for the Image. If you need to scale the image dynamically (i.e. via flex), you may need to manually set
{ width: undefined, height: undefined }on the style attribute.Static Non-Image Resources
The
-requiresyntax described above can be used to statically include audio, video or document files in your project as well. Most common file types are supported including.mp3,.wav,.mp4,.mov,.htmlandYou can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
+You can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
A caveat is that videos must use absolute positioning instead of
flexGrow, since size info is not currently passed for non-image assets. This limitation doesn't occur for videos that are linked directly into Xcode or the Assets folder for Android.Images From Hybrid App's Resources
If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app.
diff --git a/docs/0.13/navigation.html b/docs/0.13/navigation.html index 177dd14e59b..dbb1b9a6002 100644 --- a/docs/0.13/navigation.html +++ b/docs/0.13/navigation.html @@ -36,7 +36,7 @@
Navigating Between Screens
Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.
This guide covers the various navigation components available in React Native. If you are just getting started with navigation, you will probably want to use React Navigation. React Navigation provides an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android.
If you're only targeting iOS, you may want to also check out NavigatorIOS as a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native UINavigationController class. This component will not work on Android, however.
If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms:react-native-navigation.
+If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: react-native-navigation.
React Navigation
The community solution to navigation is a standalone library that allows developers to set up the screens of an app with just a few lines of code.
The first step is to install in your project:
diff --git a/docs/0.13/navigation/index.html b/docs/0.13/navigation/index.html index 177dd14e59b..dbb1b9a6002 100644 --- a/docs/0.13/navigation/index.html +++ b/docs/0.13/navigation/index.html @@ -36,7 +36,7 @@Navigating Between Screens
Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.
This guide covers the various navigation components available in React Native. If you are just getting started with navigation, you will probably want to use React Navigation. React Navigation provides an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android.
If you're only targeting iOS, you may want to also check out NavigatorIOS as a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native UINavigationController class. This component will not work on Android, however.
If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms:react-native-navigation.
+If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: react-native-navigation.
React Navigation
The community solution to navigation is a standalone library that allows developers to set up the screens of an app with just a few lines of code.
The first step is to install in your project:
diff --git a/docs/0.13/running-on-device.html b/docs/0.13/running-on-device.html index b504d2d2734..85b1ad03ea5 100644 --- a/docs/0.13/running-on-device.html +++ b/docs/0.13/running-on-device.html @@ -102,7 +102,7 @@ }It's always a good idea to test your app on an actual device before releasing it to your users. This document will guide you through the necessary steps to run your React Native app on a device and to get it ready for production.
-If you used Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
+If you used Expo CLI or Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
- @@ -125,7 +125,7 @@ Windows
A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Create React Native App, which will allow you to run your app using the Expo client app.
+A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app.
1. Plug in your device via USB
Connect your iOS device to your Mac using a USB to Lightning cable. Navigate to the ios folder in your project, then open the .xcodeproj file, or if you are using CocoaPods open .xcworkspace, within it using Xcode.
It's always a good idea to test your app on an actual device before releasing it to your users. This document will guide you through the necessary steps to run your React Native app on a device and to get it ready for production.
-If you used Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
+If you used Expo CLI or Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
- @@ -125,7 +125,7 @@ Windows
A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Create React Native App, which will allow you to run your app using the Expo client app.
+A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app.
1. Plug in your device via USB
Connect your iOS device to your Mac using a USB to Lightning cable. Navigate to the ios folder in your project, then open the .xcodeproj file, or if you are using CocoaPods open .xcworkspace, within it using Xcode.
-Note: Make sure gradle.properties does not include org.gradle.configureondemand=true as that will make the release build skip bundling JS and assets into the APK.
The generated APK can be found under android/app/build/outputs/apk/app-release.apk, and is ready to be distributed.
The generated APK can be found under android/app/build/outputs/apk/release/app-release.apk, and is ready to be distributed.
Testing the release build of your app
Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using:
$ react-native run-android --variant=release
diff --git a/docs/0.13/signed-apk-android/index.html b/docs/0.13/signed-apk-android/index.html
index 7e6023b899a..756e4568a46 100644
--- a/docs/0.13/signed-apk-android/index.html
+++ b/docs/0.13/signed-apk-android/index.html
@@ -102,7 +102,7 @@ $ ./gradlew assembleRelease
Note: Make sure gradle.properties does not include org.gradle.configureondemand=true as that will make the release build skip bundling JS and assets into the APK.
-The generated APK can be found under android/app/build/outputs/apk/app-release.apk, and is ready to be distributed.
+The generated APK can be found under android/app/build/outputs/apk/release/app-release.apk, and is ready to be distributed.
Testing the release build of your app
Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using:
$ react-native run-android --variant=release
diff --git a/docs/0.13/understanding-cli.html b/docs/0.13/understanding-cli.html
index 7c03562b824..e8a5ed24083 100644
--- a/docs/0.13/understanding-cli.html
+++ b/docs/0.13/understanding-cli.html
@@ -76,7 +76,7 @@
CLI Configs
When using react-native start, its platform derivatives, and react-native bundle you can use a file to define the CLI options used by React Native by default. If you create a file rn-cli.config.js in the root of your project, it will be evaluated and options for the commands will come from there.
You can see the options for the CLI config file inside the source code for Metro here, and here is a common rn-cli.config.js used for supporting TypeScript in React Native projects:
You can see the options for the CLI config on the metro website. Here's a common rn-cli.config.js used for supporting TypeScript in React Native projects:
module.exports = {
getTransformModulePath() {
return require.resolve('react-native-typescript-transformer');
diff --git a/docs/0.13/understanding-cli/index.html b/docs/0.13/understanding-cli/index.html
index 7c03562b824..e8a5ed24083 100644
--- a/docs/0.13/understanding-cli/index.html
+++ b/docs/0.13/understanding-cli/index.html
@@ -76,7 +76,7 @@
CLI Configs
When using react-native start, its platform derivatives, and react-native bundle you can use a file to define the CLI options used by React Native by default. If you create a file rn-cli.config.js in the root of your project, it will be evaluated and options for the commands will come from there.
You can see the options for the CLI config file inside the source code for Metro here, and here is a common rn-cli.config.js used for supporting TypeScript in React Native projects:
You can see the options for the CLI config on the metro website. Here's a common rn-cli.config.js used for supporting TypeScript in React Native projects:
module.exports = {
getTransformModulePath() {
return require.resolve('react-native-typescript-transformer');
diff --git a/docs/0.14/debugging.html b/docs/0.14/debugging.html
index da25f8b3c63..9096383bbcd 100644
--- a/docs/0.14/debugging.html
+++ b/docs/0.14/debugging.html
@@ -113,7 +113,7 @@ YellowBox.ignoreWarnings(['Warning: ...']);
Projects with Native Code Only
The remainder of this guide only applies to projects made with react-native init
- or to those made with Create React Native App which have since ejected. For
+ or to those made with expo init or Create React Native App which have since ejected. For
more information about ejecting, please see
the guide on
the Create React Native App repository.
@@ -126,11 +126,11 @@ YellowBox.ignoreWarnings(['Warning: ...']);
You may also access these through Debug → Open System Log... in the iOS Simulator or by running adb logcat *:S ReactNative:V ReactNativeJS:V in a terminal while an Android app is running on a device or emulator.
-If you're using Create React Native App, console logs already appear in the same terminal output as the packager.
+If you're using Create React Native App or Expo CLI, console logs already appear in the same terminal output as the packager.
Debugging on a device with Chrome Developer Tools
-If you're using Create React Native App, this is configured for you already.
+If you're using Create React Native App or Expo CLI, this is configured for you already.
On iOS devices, open the file RCTWebSocketExecutor.m and change "localhost" to the IP address of your computer, then select "Debug JS Remotely" from the Developer Menu.
On Android 5.0+ devices connected via USB, you can use the adb command line tool to setup port forwarding from the device to your computer:
Projects with Native Code Only
The remainder of this guide only applies to projects made with react-native init
- or to those made with Create React Native App which have since ejected. For
+ or to those made with expo init or Create React Native App which have since ejected. For
more information about ejecting, please see
the guide on
the Create React Native App repository.
@@ -126,11 +126,11 @@ YellowBox.ignoreWarnings(['Warning: ...']);
You may also access these through Debug → Open System Log... in the iOS Simulator or by running adb logcat *:S ReactNative:V ReactNativeJS:V in a terminal while an Android app is running on a device or emulator.
-If you're using Create React Native App, console logs already appear in the same terminal output as the packager.
+If you're using Create React Native App or Expo CLI, console logs already appear in the same terminal output as the packager.
Debugging on a device with Chrome Developer Tools
-If you're using Create React Native App, this is configured for you already.
+If you're using Create React Native App or Expo CLI, this is configured for you already.
On iOS devices, open the file RCTWebSocketExecutor.m and change "localhost" to the IP address of your computer, then select "Debug JS Remotely" from the Developer Menu.
On Android 5.0+ devices connected via USB, you can use the adb command line tool to setup port forwarding from the device to your computer:
Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.
2. Install the Android SDK
-Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.0 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.1 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".
-The SDK Manager can also be found within the Android Studio "Preferences" dialog, under Appearance & Behavior → System Settings → Android SDK.
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.0 (Oreo) entry, then make sure the following items are all checked:
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.1 (Oreo) entry, then make sure the following items are all checked:
-
-
Android SDK Platform 26
+Android SDK Platform 27Google APIs Intel x86 Atom_64 System Image
Add the following lines to your $HOME/.bash_profile config file:
export ANDROID_HOME=$HOME/Library/Android/sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
export ANDROID_HOME=$HOME/Android/Sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
diff --git a/docs/0.14/getting-started/index.html b/docs/0.14/getting-started/index.html index 1a1f5c6f6f4..6446e8fb42a 100644 --- a/docs/0.14/getting-started/index.html +++ b/docs/0.14/getting-started/index.html @@ -260,7 +260,7 @@ npm start
Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.
2. Install the Android SDK
-Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.0 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.1 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".
-The SDK Manager can also be found within the Android Studio "Preferences" dialog, under Appearance & Behavior → System Settings → Android SDK.
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.0 (Oreo) entry, then make sure the following items are all checked:
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.1 (Oreo) entry, then make sure the following items are all checked:
-
-
Android SDK Platform 26
+Android SDK Platform 27Google APIs Intel x86 Atom_64 System Image
Add the following lines to your $HOME/.bash_profile config file:
export ANDROID_HOME=$HOME/Library/Android/sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
export ANDROID_HOME=$HOME/Android/Sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
diff --git a/docs/0.14/images.html b/docs/0.14/images.html index cfd98a8ecef..851c9be671a 100644 --- a/docs/0.14/images.html +++ b/docs/0.14/images.html @@ -77,7 +77,7 @@ var icon = this.props.activeNote that image sources required this way include size (width, height) info for the Image. If you need to scale the image dynamically (i.e. via flex), you may need to manually set
{ width: undefined, height: undefined }on the style attribute.Static Non-Image Resources
The
-requiresyntax described above can be used to statically include audio, video or document files in your project as well. Most common file types are supported including.mp3,.wav,.mp4,.mov,.htmlandYou can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
+You can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
A caveat is that videos must use absolute positioning instead of
flexGrow, since size info is not currently passed for non-image assets. This limitation doesn't occur for videos that are linked directly into Xcode or the Assets folder for Android.Images From Hybrid App's Resources
If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app.
diff --git a/docs/0.14/images/index.html b/docs/0.14/images/index.html index cfd98a8ecef..851c9be671a 100644 --- a/docs/0.14/images/index.html +++ b/docs/0.14/images/index.html @@ -77,7 +77,7 @@ var icon = this.props.activeNote that image sources required this way include size (width, height) info for the Image. If you need to scale the image dynamically (i.e. via flex), you may need to manually set
{ width: undefined, height: undefined }on the style attribute.Static Non-Image Resources
The
-requiresyntax described above can be used to statically include audio, video or document files in your project as well. Most common file types are supported including.mp3,.wav,.mp4,.mov,.htmlandYou can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
+You can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
A caveat is that videos must use absolute positioning instead of
flexGrow, since size info is not currently passed for non-image assets. This limitation doesn't occur for videos that are linked directly into Xcode or the Assets folder for Android.Images From Hybrid App's Resources
If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app.
diff --git a/docs/0.14/navigation.html b/docs/0.14/navigation.html index 9e120148ca7..7413da36648 100644 --- a/docs/0.14/navigation.html +++ b/docs/0.14/navigation.html @@ -36,7 +36,7 @@
Navigating Between Screens
Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.
This guide covers the various navigation components available in React Native. If you are just getting started with navigation, you will probably want to use React Navigation. React Navigation provides an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android.
If you're only targeting iOS, you may want to also check out NavigatorIOS as a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native UINavigationController class. This component will not work on Android, however.
If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms:react-native-navigation.
+If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: react-native-navigation.
React Navigation
The community solution to navigation is a standalone library that allows developers to set up the screens of an app with just a few lines of code.
The first step is to install in your project:
diff --git a/docs/0.14/navigation/index.html b/docs/0.14/navigation/index.html index 9e120148ca7..7413da36648 100644 --- a/docs/0.14/navigation/index.html +++ b/docs/0.14/navigation/index.html @@ -36,7 +36,7 @@Navigating Between Screens
Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.
This guide covers the various navigation components available in React Native. If you are just getting started with navigation, you will probably want to use React Navigation. React Navigation provides an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android.
If you're only targeting iOS, you may want to also check out NavigatorIOS as a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native UINavigationController class. This component will not work on Android, however.
If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms:react-native-navigation.
+If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: react-native-navigation.
React Navigation
The community solution to navigation is a standalone library that allows developers to set up the screens of an app with just a few lines of code.
The first step is to install in your project:
diff --git a/docs/0.14/running-on-device.html b/docs/0.14/running-on-device.html index 774d92d09d8..702297a52c3 100644 --- a/docs/0.14/running-on-device.html +++ b/docs/0.14/running-on-device.html @@ -102,7 +102,7 @@ }It's always a good idea to test your app on an actual device before releasing it to your users. This document will guide you through the necessary steps to run your React Native app on a device and to get it ready for production.
-If you used Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
+If you used Expo CLI or Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
- @@ -125,7 +125,7 @@ Windows
A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Create React Native App, which will allow you to run your app using the Expo client app.
+A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app.
1. Plug in your device via USB
Connect your iOS device to your Mac using a USB to Lightning cable. Navigate to the ios folder in your project, then open the .xcodeproj file, or if you are using CocoaPods open .xcworkspace, within it using Xcode.
It's always a good idea to test your app on an actual device before releasing it to your users. This document will guide you through the necessary steps to run your React Native app on a device and to get it ready for production.
-If you used Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
+If you used Expo CLI or Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
- @@ -125,7 +125,7 @@ Windows
A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Create React Native App, which will allow you to run your app using the Expo client app.
+A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app.
1. Plug in your device via USB
Connect your iOS device to your Mac using a USB to Lightning cable. Navigate to the ios folder in your project, then open the .xcodeproj file, or if you are using CocoaPods open .xcworkspace, within it using Xcode.
-Note: Make sure gradle.properties does not include org.gradle.configureondemand=true as that will make the release build skip bundling JS and assets into the APK.
The generated APK can be found under android/app/build/outputs/apk/app-release.apk, and is ready to be distributed.
The generated APK can be found under android/app/build/outputs/apk/release/app-release.apk, and is ready to be distributed.
Testing the release build of your app
Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using:
$ react-native run-android --variant=release
diff --git a/docs/0.14/signed-apk-android/index.html b/docs/0.14/signed-apk-android/index.html
index 864a57f04bb..7dd9beacc0a 100644
--- a/docs/0.14/signed-apk-android/index.html
+++ b/docs/0.14/signed-apk-android/index.html
@@ -102,7 +102,7 @@ $ ./gradlew assembleRelease
Note: Make sure gradle.properties does not include org.gradle.configureondemand=true as that will make the release build skip bundling JS and assets into the APK.
-The generated APK can be found under android/app/build/outputs/apk/app-release.apk, and is ready to be distributed.
+The generated APK can be found under android/app/build/outputs/apk/release/app-release.apk, and is ready to be distributed.
Testing the release build of your app
Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using:
$ react-native run-android --variant=release
diff --git a/docs/0.14/understanding-cli.html b/docs/0.14/understanding-cli.html
index eee6ca3cdab..79ee18ec46c 100644
--- a/docs/0.14/understanding-cli.html
+++ b/docs/0.14/understanding-cli.html
@@ -76,7 +76,7 @@
CLI Configs
When using react-native start, its platform derivatives, and react-native bundle you can use a file to define the CLI options used by React Native by default. If you create a file rn-cli.config.js in the root of your project, it will be evaluated and options for the commands will come from there.
You can see the options for the CLI config file inside the source code for Metro here, and here is a common rn-cli.config.js used for supporting TypeScript in React Native projects:
You can see the options for the CLI config on the metro website. Here's a common rn-cli.config.js used for supporting TypeScript in React Native projects:
module.exports = {
getTransformModulePath() {
return require.resolve('react-native-typescript-transformer');
diff --git a/docs/0.14/understanding-cli/index.html b/docs/0.14/understanding-cli/index.html
index eee6ca3cdab..79ee18ec46c 100644
--- a/docs/0.14/understanding-cli/index.html
+++ b/docs/0.14/understanding-cli/index.html
@@ -76,7 +76,7 @@
CLI Configs
When using react-native start, its platform derivatives, and react-native bundle you can use a file to define the CLI options used by React Native by default. If you create a file rn-cli.config.js in the root of your project, it will be evaluated and options for the commands will come from there.
You can see the options for the CLI config file inside the source code for Metro here, and here is a common rn-cli.config.js used for supporting TypeScript in React Native projects:
You can see the options for the CLI config on the metro website. Here's a common rn-cli.config.js used for supporting TypeScript in React Native projects:
module.exports = {
getTransformModulePath() {
return require.resolve('react-native-typescript-transformer');
diff --git a/docs/0.15/debugging.html b/docs/0.15/debugging.html
index a4ee99724dd..c68ca9b8d7f 100644
--- a/docs/0.15/debugging.html
+++ b/docs/0.15/debugging.html
@@ -113,7 +113,7 @@ YellowBox.ignoreWarnings(['Warning: ...']);
Projects with Native Code Only
The remainder of this guide only applies to projects made with react-native init
- or to those made with Create React Native App which have since ejected. For
+ or to those made with expo init or Create React Native App which have since ejected. For
more information about ejecting, please see
the guide on
the Create React Native App repository.
@@ -126,11 +126,11 @@ YellowBox.ignoreWarnings(['Warning: ...']);
You may also access these through Debug → Open System Log... in the iOS Simulator or by running adb logcat *:S ReactNative:V ReactNativeJS:V in a terminal while an Android app is running on a device or emulator.
-If you're using Create React Native App, console logs already appear in the same terminal output as the packager.
+If you're using Create React Native App or Expo CLI, console logs already appear in the same terminal output as the packager.
Debugging on a device with Chrome Developer Tools
-If you're using Create React Native App, this is configured for you already.
+If you're using Create React Native App or Expo CLI, this is configured for you already.
On iOS devices, open the file RCTWebSocketExecutor.m and change "localhost" to the IP address of your computer, then select "Debug JS Remotely" from the Developer Menu.
On Android 5.0+ devices connected via USB, you can use the adb command line tool to setup port forwarding from the device to your computer:
Projects with Native Code Only
The remainder of this guide only applies to projects made with react-native init
- or to those made with Create React Native App which have since ejected. For
+ or to those made with expo init or Create React Native App which have since ejected. For
more information about ejecting, please see
the guide on
the Create React Native App repository.
@@ -126,11 +126,11 @@ YellowBox.ignoreWarnings(['Warning: ...']);
You may also access these through Debug → Open System Log... in the iOS Simulator or by running adb logcat *:S ReactNative:V ReactNativeJS:V in a terminal while an Android app is running on a device or emulator.
-If you're using Create React Native App, console logs already appear in the same terminal output as the packager.
+If you're using Create React Native App or Expo CLI, console logs already appear in the same terminal output as the packager.
Debugging on a device with Chrome Developer Tools
-If you're using Create React Native App, this is configured for you already.
+If you're using Create React Native App or Expo CLI, this is configured for you already.
On iOS devices, open the file RCTWebSocketExecutor.m and change "localhost" to the IP address of your computer, then select "Debug JS Remotely" from the Developer Menu.
On Android 5.0+ devices connected via USB, you can use the adb command line tool to setup port forwarding from the device to your computer:
Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.
2. Install the Android SDK
-Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.0 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.1 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".
-The SDK Manager can also be found within the Android Studio "Preferences" dialog, under Appearance & Behavior → System Settings → Android SDK.
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.0 (Oreo) entry, then make sure the following items are all checked:
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.1 (Oreo) entry, then make sure the following items are all checked:
-
-
Android SDK Platform 26
+Android SDK Platform 27Google APIs Intel x86 Atom_64 System Image
Add the following lines to your $HOME/.bash_profile config file:
export ANDROID_HOME=$HOME/Library/Android/sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
export ANDROID_HOME=$HOME/Android/Sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
diff --git a/docs/0.15/getting-started/index.html b/docs/0.15/getting-started/index.html index bcc7b179f50..ddbeacdc6f2 100644 --- a/docs/0.15/getting-started/index.html +++ b/docs/0.15/getting-started/index.html @@ -260,7 +260,7 @@ npm start
Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.
2. Install the Android SDK
-Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.0 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.1 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".
-The SDK Manager can also be found within the Android Studio "Preferences" dialog, under Appearance & Behavior → System Settings → Android SDK.
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.0 (Oreo) entry, then make sure the following items are all checked:
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.1 (Oreo) entry, then make sure the following items are all checked:
-
-
Android SDK Platform 26
+Android SDK Platform 27Google APIs Intel x86 Atom_64 System Image
Add the following lines to your $HOME/.bash_profile config file:
export ANDROID_HOME=$HOME/Library/Android/sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
export ANDROID_HOME=$HOME/Android/Sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
diff --git a/docs/0.15/images.html b/docs/0.15/images.html index 957c301f59d..e715d5cb0f5 100644 --- a/docs/0.15/images.html +++ b/docs/0.15/images.html @@ -77,7 +77,7 @@ var icon = this.props.activeNote that image sources required this way include size (width, height) info for the Image. If you need to scale the image dynamically (i.e. via flex), you may need to manually set
{ width: undefined, height: undefined }on the style attribute.Static Non-Image Resources
The
-requiresyntax described above can be used to statically include audio, video or document files in your project as well. Most common file types are supported including.mp3,.wav,.mp4,.mov,.htmlandYou can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
+You can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
A caveat is that videos must use absolute positioning instead of
flexGrow, since size info is not currently passed for non-image assets. This limitation doesn't occur for videos that are linked directly into Xcode or the Assets folder for Android.Images From Hybrid App's Resources
If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app.
diff --git a/docs/0.15/images/index.html b/docs/0.15/images/index.html index 957c301f59d..e715d5cb0f5 100644 --- a/docs/0.15/images/index.html +++ b/docs/0.15/images/index.html @@ -77,7 +77,7 @@ var icon = this.props.activeNote that image sources required this way include size (width, height) info for the Image. If you need to scale the image dynamically (i.e. via flex), you may need to manually set
{ width: undefined, height: undefined }on the style attribute.Static Non-Image Resources
The
-requiresyntax described above can be used to statically include audio, video or document files in your project as well. Most common file types are supported including.mp3,.wav,.mp4,.mov,.htmlandYou can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
+You can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
A caveat is that videos must use absolute positioning instead of
flexGrow, since size info is not currently passed for non-image assets. This limitation doesn't occur for videos that are linked directly into Xcode or the Assets folder for Android.Images From Hybrid App's Resources
If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app.
diff --git a/docs/0.15/navigation.html b/docs/0.15/navigation.html index 5071088b0dc..b28dc755e60 100644 --- a/docs/0.15/navigation.html +++ b/docs/0.15/navigation.html @@ -36,7 +36,7 @@
Navigating Between Screens
Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.
This guide covers the various navigation components available in React Native. If you are just getting started with navigation, you will probably want to use React Navigation. React Navigation provides an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android.
If you're only targeting iOS, you may want to also check out NavigatorIOS as a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native UINavigationController class. This component will not work on Android, however.
If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms:react-native-navigation.
+If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: react-native-navigation.
React Navigation
The community solution to navigation is a standalone library that allows developers to set up the screens of an app with just a few lines of code.
The first step is to install in your project:
diff --git a/docs/0.15/navigation/index.html b/docs/0.15/navigation/index.html index 5071088b0dc..b28dc755e60 100644 --- a/docs/0.15/navigation/index.html +++ b/docs/0.15/navigation/index.html @@ -36,7 +36,7 @@Navigating Between Screens
Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.
This guide covers the various navigation components available in React Native. If you are just getting started with navigation, you will probably want to use React Navigation. React Navigation provides an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android.
If you're only targeting iOS, you may want to also check out NavigatorIOS as a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native UINavigationController class. This component will not work on Android, however.
If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms:react-native-navigation.
+If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: react-native-navigation.
React Navigation
The community solution to navigation is a standalone library that allows developers to set up the screens of an app with just a few lines of code.
The first step is to install in your project:
diff --git a/docs/0.15/running-on-device.html b/docs/0.15/running-on-device.html index 5eaf90126e3..89067352c70 100644 --- a/docs/0.15/running-on-device.html +++ b/docs/0.15/running-on-device.html @@ -102,7 +102,7 @@ }It's always a good idea to test your app on an actual device before releasing it to your users. This document will guide you through the necessary steps to run your React Native app on a device and to get it ready for production.
-If you used Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
+If you used Expo CLI or Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
- @@ -125,7 +125,7 @@ Windows
A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Create React Native App, which will allow you to run your app using the Expo client app.
+A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app.
1. Plug in your device via USB
Connect your iOS device to your Mac using a USB to Lightning cable. Navigate to the ios folder in your project, then open the .xcodeproj file, or if you are using CocoaPods open .xcworkspace, within it using Xcode.
It's always a good idea to test your app on an actual device before releasing it to your users. This document will guide you through the necessary steps to run your React Native app on a device and to get it ready for production.
-If you used Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
+If you used Expo CLI or Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
- @@ -125,7 +125,7 @@ Windows
A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Create React Native App, which will allow you to run your app using the Expo client app.
+A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app.
1. Plug in your device via USB
Connect your iOS device to your Mac using a USB to Lightning cable. Navigate to the ios folder in your project, then open the .xcodeproj file, or if you are using CocoaPods open .xcworkspace, within it using Xcode.
-Note: Make sure gradle.properties does not include org.gradle.configureondemand=true as that will make the release build skip bundling JS and assets into the APK.
The generated APK can be found under android/app/build/outputs/apk/app-release.apk, and is ready to be distributed.
The generated APK can be found under android/app/build/outputs/apk/release/app-release.apk, and is ready to be distributed.
Testing the release build of your app
Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using:
$ react-native run-android --variant=release
diff --git a/docs/0.15/signed-apk-android/index.html b/docs/0.15/signed-apk-android/index.html
index bfac5d4b834..9cc878f6fcb 100644
--- a/docs/0.15/signed-apk-android/index.html
+++ b/docs/0.15/signed-apk-android/index.html
@@ -102,7 +102,7 @@ $ ./gradlew assembleRelease
Note: Make sure gradle.properties does not include org.gradle.configureondemand=true as that will make the release build skip bundling JS and assets into the APK.
-The generated APK can be found under android/app/build/outputs/apk/app-release.apk, and is ready to be distributed.
+The generated APK can be found under android/app/build/outputs/apk/release/app-release.apk, and is ready to be distributed.
Testing the release build of your app
Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using:
$ react-native run-android --variant=release
diff --git a/docs/0.15/understanding-cli.html b/docs/0.15/understanding-cli.html
index dcfdcd99d1d..404a5b44e8d 100644
--- a/docs/0.15/understanding-cli.html
+++ b/docs/0.15/understanding-cli.html
@@ -76,7 +76,7 @@
CLI Configs
When using react-native start, its platform derivatives, and react-native bundle you can use a file to define the CLI options used by React Native by default. If you create a file rn-cli.config.js in the root of your project, it will be evaluated and options for the commands will come from there.
You can see the options for the CLI config file inside the source code for Metro here, and here is a common rn-cli.config.js used for supporting TypeScript in React Native projects:
You can see the options for the CLI config on the metro website. Here's a common rn-cli.config.js used for supporting TypeScript in React Native projects:
module.exports = {
getTransformModulePath() {
return require.resolve('react-native-typescript-transformer');
diff --git a/docs/0.15/understanding-cli/index.html b/docs/0.15/understanding-cli/index.html
index dcfdcd99d1d..404a5b44e8d 100644
--- a/docs/0.15/understanding-cli/index.html
+++ b/docs/0.15/understanding-cli/index.html
@@ -76,7 +76,7 @@
CLI Configs
When using react-native start, its platform derivatives, and react-native bundle you can use a file to define the CLI options used by React Native by default. If you create a file rn-cli.config.js in the root of your project, it will be evaluated and options for the commands will come from there.
You can see the options for the CLI config file inside the source code for Metro here, and here is a common rn-cli.config.js used for supporting TypeScript in React Native projects:
You can see the options for the CLI config on the metro website. Here's a common rn-cli.config.js used for supporting TypeScript in React Native projects:
module.exports = {
getTransformModulePath() {
return require.resolve('react-native-typescript-transformer');
diff --git a/docs/0.16/debugging.html b/docs/0.16/debugging.html
index 5877e1f066f..e63740f925a 100644
--- a/docs/0.16/debugging.html
+++ b/docs/0.16/debugging.html
@@ -113,7 +113,7 @@ YellowBox.ignoreWarnings(['Warning: ...']);
Projects with Native Code Only
The remainder of this guide only applies to projects made with react-native init
- or to those made with Create React Native App which have since ejected. For
+ or to those made with expo init or Create React Native App which have since ejected. For
more information about ejecting, please see
the guide on
the Create React Native App repository.
@@ -126,11 +126,11 @@ YellowBox.ignoreWarnings(['Warning: ...']);
You may also access these through Debug → Open System Log... in the iOS Simulator or by running adb logcat *:S ReactNative:V ReactNativeJS:V in a terminal while an Android app is running on a device or emulator.
-If you're using Create React Native App, console logs already appear in the same terminal output as the packager.
+If you're using Create React Native App or Expo CLI, console logs already appear in the same terminal output as the packager.
Debugging on a device with Chrome Developer Tools
-If you're using Create React Native App, this is configured for you already.
+If you're using Create React Native App or Expo CLI, this is configured for you already.
On iOS devices, open the file RCTWebSocketExecutor.m and change "localhost" to the IP address of your computer, then select "Debug JS Remotely" from the Developer Menu.
On Android 5.0+ devices connected via USB, you can use the adb command line tool to setup port forwarding from the device to your computer:
Projects with Native Code Only
The remainder of this guide only applies to projects made with react-native init
- or to those made with Create React Native App which have since ejected. For
+ or to those made with expo init or Create React Native App which have since ejected. For
more information about ejecting, please see
the guide on
the Create React Native App repository.
@@ -126,11 +126,11 @@ YellowBox.ignoreWarnings(['Warning: ...']);
You may also access these through Debug → Open System Log... in the iOS Simulator or by running adb logcat *:S ReactNative:V ReactNativeJS:V in a terminal while an Android app is running on a device or emulator.
-If you're using Create React Native App, console logs already appear in the same terminal output as the packager.
+If you're using Create React Native App or Expo CLI, console logs already appear in the same terminal output as the packager.
Debugging on a device with Chrome Developer Tools
-If you're using Create React Native App, this is configured for you already.
+If you're using Create React Native App or Expo CLI, this is configured for you already.
On iOS devices, open the file RCTWebSocketExecutor.m and change "localhost" to the IP address of your computer, then select "Debug JS Remotely" from the Developer Menu.
On Android 5.0+ devices connected via USB, you can use the adb command line tool to setup port forwarding from the device to your computer:
Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.
2. Install the Android SDK
-Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.0 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.1 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".
-The SDK Manager can also be found within the Android Studio "Preferences" dialog, under Appearance & Behavior → System Settings → Android SDK.
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.0 (Oreo) entry, then make sure the following items are all checked:
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.1 (Oreo) entry, then make sure the following items are all checked:
-
-
Android SDK Platform 26
+Android SDK Platform 27Google APIs Intel x86 Atom_64 System Image
Add the following lines to your $HOME/.bash_profile config file:
export ANDROID_HOME=$HOME/Library/Android/sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
export ANDROID_HOME=$HOME/Android/Sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
diff --git a/docs/0.16/getting-started/index.html b/docs/0.16/getting-started/index.html index d2ea4c273d4..be8b5f08ddd 100644 --- a/docs/0.16/getting-started/index.html +++ b/docs/0.16/getting-started/index.html @@ -260,7 +260,7 @@ npm start
Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.
2. Install the Android SDK
-Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.0 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.1 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".
-The SDK Manager can also be found within the Android Studio "Preferences" dialog, under Appearance & Behavior → System Settings → Android SDK.
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.0 (Oreo) entry, then make sure the following items are all checked:
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.1 (Oreo) entry, then make sure the following items are all checked:
-
-
Android SDK Platform 26
+Android SDK Platform 27Google APIs Intel x86 Atom_64 System Image
Add the following lines to your $HOME/.bash_profile config file:
export ANDROID_HOME=$HOME/Library/Android/sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
export ANDROID_HOME=$HOME/Android/Sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
diff --git a/docs/0.16/images.html b/docs/0.16/images.html index ea93e2f50f7..ad826fdce36 100644 --- a/docs/0.16/images.html +++ b/docs/0.16/images.html @@ -77,7 +77,7 @@ var icon = this.props.activeNote that image sources required this way include size (width, height) info for the Image. If you need to scale the image dynamically (i.e. via flex), you may need to manually set
{ width: undefined, height: undefined }on the style attribute.Static Non-Image Resources
The
-requiresyntax described above can be used to statically include audio, video or document files in your project as well. Most common file types are supported including.mp3,.wav,.mp4,.mov,.htmlandYou can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
+You can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
A caveat is that videos must use absolute positioning instead of
flexGrow, since size info is not currently passed for non-image assets. This limitation doesn't occur for videos that are linked directly into Xcode or the Assets folder for Android.Images From Hybrid App's Resources
If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app.
diff --git a/docs/0.16/images/index.html b/docs/0.16/images/index.html index ea93e2f50f7..ad826fdce36 100644 --- a/docs/0.16/images/index.html +++ b/docs/0.16/images/index.html @@ -77,7 +77,7 @@ var icon = this.props.activeNote that image sources required this way include size (width, height) info for the Image. If you need to scale the image dynamically (i.e. via flex), you may need to manually set
{ width: undefined, height: undefined }on the style attribute.Static Non-Image Resources
The
-requiresyntax described above can be used to statically include audio, video or document files in your project as well. Most common file types are supported including.mp3,.wav,.mp4,.mov,.htmlandYou can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
+You can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
A caveat is that videos must use absolute positioning instead of
flexGrow, since size info is not currently passed for non-image assets. This limitation doesn't occur for videos that are linked directly into Xcode or the Assets folder for Android.Images From Hybrid App's Resources
If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app.
diff --git a/docs/0.16/navigation.html b/docs/0.16/navigation.html index e463dcb313c..5daf492654b 100644 --- a/docs/0.16/navigation.html +++ b/docs/0.16/navigation.html @@ -36,7 +36,7 @@
Navigating Between Screens
Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.
This guide covers the various navigation components available in React Native. If you are just getting started with navigation, you will probably want to use React Navigation. React Navigation provides an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android.
If you're only targeting iOS, you may want to also check out NavigatorIOS as a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native UINavigationController class. This component will not work on Android, however.
If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms:react-native-navigation.
+If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: react-native-navigation.
React Navigation
The community solution to navigation is a standalone library that allows developers to set up the screens of an app with just a few lines of code.
The first step is to install in your project:
diff --git a/docs/0.16/navigation/index.html b/docs/0.16/navigation/index.html index e463dcb313c..5daf492654b 100644 --- a/docs/0.16/navigation/index.html +++ b/docs/0.16/navigation/index.html @@ -36,7 +36,7 @@Navigating Between Screens
Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.
This guide covers the various navigation components available in React Native. If you are just getting started with navigation, you will probably want to use React Navigation. React Navigation provides an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android.
If you're only targeting iOS, you may want to also check out NavigatorIOS as a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native UINavigationController class. This component will not work on Android, however.
If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms:react-native-navigation.
+If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: react-native-navigation.
React Navigation
The community solution to navigation is a standalone library that allows developers to set up the screens of an app with just a few lines of code.
The first step is to install in your project:
diff --git a/docs/0.16/running-on-device.html b/docs/0.16/running-on-device.html index 4c907a50c9f..8a6890ca414 100644 --- a/docs/0.16/running-on-device.html +++ b/docs/0.16/running-on-device.html @@ -102,7 +102,7 @@ }It's always a good idea to test your app on an actual device before releasing it to your users. This document will guide you through the necessary steps to run your React Native app on a device and to get it ready for production.
-If you used Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
+If you used Expo CLI or Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
- @@ -125,7 +125,7 @@ Windows
A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Create React Native App, which will allow you to run your app using the Expo client app.
+A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app.
1. Plug in your device via USB
Connect your iOS device to your Mac using a USB to Lightning cable. Navigate to the ios folder in your project, then open the .xcodeproj file, or if you are using CocoaPods open .xcworkspace, within it using Xcode.
It's always a good idea to test your app on an actual device before releasing it to your users. This document will guide you through the necessary steps to run your React Native app on a device and to get it ready for production.
-If you used Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
+If you used Expo CLI or Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
- @@ -125,7 +125,7 @@ Windows
A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Create React Native App, which will allow you to run your app using the Expo client app.
+A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app.
1. Plug in your device via USB
Connect your iOS device to your Mac using a USB to Lightning cable. Navigate to the ios folder in your project, then open the .xcodeproj file, or if you are using CocoaPods open .xcworkspace, within it using Xcode.
-Note: Make sure gradle.properties does not include org.gradle.configureondemand=true as that will make the release build skip bundling JS and assets into the APK.
The generated APK can be found under android/app/build/outputs/apk/app-release.apk, and is ready to be distributed.
The generated APK can be found under android/app/build/outputs/apk/release/app-release.apk, and is ready to be distributed.
Testing the release build of your app
Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using:
$ react-native run-android --variant=release
diff --git a/docs/0.16/signed-apk-android/index.html b/docs/0.16/signed-apk-android/index.html
index 5442bc82168..061767ef0f1 100644
--- a/docs/0.16/signed-apk-android/index.html
+++ b/docs/0.16/signed-apk-android/index.html
@@ -102,7 +102,7 @@ $ ./gradlew assembleRelease
Note: Make sure gradle.properties does not include org.gradle.configureondemand=true as that will make the release build skip bundling JS and assets into the APK.
-The generated APK can be found under android/app/build/outputs/apk/app-release.apk, and is ready to be distributed.
+The generated APK can be found under android/app/build/outputs/apk/release/app-release.apk, and is ready to be distributed.
Testing the release build of your app
Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using:
$ react-native run-android --variant=release
diff --git a/docs/0.16/understanding-cli.html b/docs/0.16/understanding-cli.html
index 5899557406a..19568c2076d 100644
--- a/docs/0.16/understanding-cli.html
+++ b/docs/0.16/understanding-cli.html
@@ -76,7 +76,7 @@
CLI Configs
When using react-native start, its platform derivatives, and react-native bundle you can use a file to define the CLI options used by React Native by default. If you create a file rn-cli.config.js in the root of your project, it will be evaluated and options for the commands will come from there.
You can see the options for the CLI config file inside the source code for Metro here, and here is a common rn-cli.config.js used for supporting TypeScript in React Native projects:
You can see the options for the CLI config on the metro website. Here's a common rn-cli.config.js used for supporting TypeScript in React Native projects:
module.exports = {
getTransformModulePath() {
return require.resolve('react-native-typescript-transformer');
diff --git a/docs/0.16/understanding-cli/index.html b/docs/0.16/understanding-cli/index.html
index 5899557406a..19568c2076d 100644
--- a/docs/0.16/understanding-cli/index.html
+++ b/docs/0.16/understanding-cli/index.html
@@ -76,7 +76,7 @@
CLI Configs
When using react-native start, its platform derivatives, and react-native bundle you can use a file to define the CLI options used by React Native by default. If you create a file rn-cli.config.js in the root of your project, it will be evaluated and options for the commands will come from there.
You can see the options for the CLI config file inside the source code for Metro here, and here is a common rn-cli.config.js used for supporting TypeScript in React Native projects:
You can see the options for the CLI config on the metro website. Here's a common rn-cli.config.js used for supporting TypeScript in React Native projects:
module.exports = {
getTransformModulePath() {
return require.resolve('react-native-typescript-transformer');
diff --git a/docs/0.17/debugging.html b/docs/0.17/debugging.html
index 9877cdd2947..5a5f9ab032d 100644
--- a/docs/0.17/debugging.html
+++ b/docs/0.17/debugging.html
@@ -113,7 +113,7 @@ YellowBox.ignoreWarnings(['Warning: ...']);
Projects with Native Code Only
The remainder of this guide only applies to projects made with react-native init
- or to those made with Create React Native App which have since ejected. For
+ or to those made with expo init or Create React Native App which have since ejected. For
more information about ejecting, please see
the guide on
the Create React Native App repository.
@@ -126,11 +126,11 @@ YellowBox.ignoreWarnings(['Warning: ...']);
You may also access these through Debug → Open System Log... in the iOS Simulator or by running adb logcat *:S ReactNative:V ReactNativeJS:V in a terminal while an Android app is running on a device or emulator.
-If you're using Create React Native App, console logs already appear in the same terminal output as the packager.
+If you're using Create React Native App or Expo CLI, console logs already appear in the same terminal output as the packager.
Debugging on a device with Chrome Developer Tools
-If you're using Create React Native App, this is configured for you already.
+If you're using Create React Native App or Expo CLI, this is configured for you already.
On iOS devices, open the file RCTWebSocketExecutor.m and change "localhost" to the IP address of your computer, then select "Debug JS Remotely" from the Developer Menu.
On Android 5.0+ devices connected via USB, you can use the adb command line tool to setup port forwarding from the device to your computer:
Projects with Native Code Only
The remainder of this guide only applies to projects made with react-native init
- or to those made with Create React Native App which have since ejected. For
+ or to those made with expo init or Create React Native App which have since ejected. For
more information about ejecting, please see
the guide on
the Create React Native App repository.
@@ -126,11 +126,11 @@ YellowBox.ignoreWarnings(['Warning: ...']);
You may also access these through Debug → Open System Log... in the iOS Simulator or by running adb logcat *:S ReactNative:V ReactNativeJS:V in a terminal while an Android app is running on a device or emulator.
-If you're using Create React Native App, console logs already appear in the same terminal output as the packager.
+If you're using Create React Native App or Expo CLI, console logs already appear in the same terminal output as the packager.
Debugging on a device with Chrome Developer Tools
-If you're using Create React Native App, this is configured for you already.
+If you're using Create React Native App or Expo CLI, this is configured for you already.
On iOS devices, open the file RCTWebSocketExecutor.m and change "localhost" to the IP address of your computer, then select "Debug JS Remotely" from the Developer Menu.
On Android 5.0+ devices connected via USB, you can use the adb command line tool to setup port forwarding from the device to your computer:
Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.
2. Install the Android SDK
-Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.0 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.1 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".
-The SDK Manager can also be found within the Android Studio "Preferences" dialog, under Appearance & Behavior → System Settings → Android SDK.
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.0 (Oreo) entry, then make sure the following items are all checked:
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.1 (Oreo) entry, then make sure the following items are all checked:
-
-
Android SDK Platform 26
+Android SDK Platform 27Google APIs Intel x86 Atom_64 System Image
Add the following lines to your $HOME/.bash_profile config file:
export ANDROID_HOME=$HOME/Library/Android/sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
export ANDROID_HOME=$HOME/Android/Sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
diff --git a/docs/0.17/getting-started/index.html b/docs/0.17/getting-started/index.html index 719bf6a1a3f..98025568251 100644 --- a/docs/0.17/getting-started/index.html +++ b/docs/0.17/getting-started/index.html @@ -260,7 +260,7 @@ npm start
Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.
2. Install the Android SDK
-Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.0 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.1 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".
-The SDK Manager can also be found within the Android Studio "Preferences" dialog, under Appearance & Behavior → System Settings → Android SDK.
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.0 (Oreo) entry, then make sure the following items are all checked:
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.1 (Oreo) entry, then make sure the following items are all checked:
-
-
Android SDK Platform 26
+Android SDK Platform 27Google APIs Intel x86 Atom_64 System Image
Add the following lines to your $HOME/.bash_profile config file:
export ANDROID_HOME=$HOME/Library/Android/sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
export ANDROID_HOME=$HOME/Android/Sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
diff --git a/docs/0.17/images.html b/docs/0.17/images.html index ce9ca9e4729..070ed0d4e48 100644 --- a/docs/0.17/images.html +++ b/docs/0.17/images.html @@ -77,7 +77,7 @@ var icon = this.props.activeNote that image sources required this way include size (width, height) info for the Image. If you need to scale the image dynamically (i.e. via flex), you may need to manually set
{ width: undefined, height: undefined }on the style attribute.Static Non-Image Resources
The
-requiresyntax described above can be used to statically include audio, video or document files in your project as well. Most common file types are supported including.mp3,.wav,.mp4,.mov,.htmlandYou can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
+You can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
A caveat is that videos must use absolute positioning instead of
flexGrow, since size info is not currently passed for non-image assets. This limitation doesn't occur for videos that are linked directly into Xcode or the Assets folder for Android.Images From Hybrid App's Resources
If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app.
diff --git a/docs/0.17/images/index.html b/docs/0.17/images/index.html index ce9ca9e4729..070ed0d4e48 100644 --- a/docs/0.17/images/index.html +++ b/docs/0.17/images/index.html @@ -77,7 +77,7 @@ var icon = this.props.activeNote that image sources required this way include size (width, height) info for the Image. If you need to scale the image dynamically (i.e. via flex), you may need to manually set
{ width: undefined, height: undefined }on the style attribute.Static Non-Image Resources
The
-requiresyntax described above can be used to statically include audio, video or document files in your project as well. Most common file types are supported including.mp3,.wav,.mp4,.mov,.htmlandYou can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
+You can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
A caveat is that videos must use absolute positioning instead of
flexGrow, since size info is not currently passed for non-image assets. This limitation doesn't occur for videos that are linked directly into Xcode or the Assets folder for Android.Images From Hybrid App's Resources
If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app.
diff --git a/docs/0.17/navigation.html b/docs/0.17/navigation.html index bd290b6a28b..d5896467c49 100644 --- a/docs/0.17/navigation.html +++ b/docs/0.17/navigation.html @@ -36,7 +36,7 @@
Navigating Between Screens
Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.
This guide covers the various navigation components available in React Native. If you are just getting started with navigation, you will probably want to use React Navigation. React Navigation provides an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android.
If you're only targeting iOS, you may want to also check out NavigatorIOS as a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native UINavigationController class. This component will not work on Android, however.
If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms:react-native-navigation.
+If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: react-native-navigation.
React Navigation
The community solution to navigation is a standalone library that allows developers to set up the screens of an app with just a few lines of code.
The first step is to install in your project:
diff --git a/docs/0.17/navigation/index.html b/docs/0.17/navigation/index.html index bd290b6a28b..d5896467c49 100644 --- a/docs/0.17/navigation/index.html +++ b/docs/0.17/navigation/index.html @@ -36,7 +36,7 @@Navigating Between Screens
Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.
This guide covers the various navigation components available in React Native. If you are just getting started with navigation, you will probably want to use React Navigation. React Navigation provides an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android.
If you're only targeting iOS, you may want to also check out NavigatorIOS as a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native UINavigationController class. This component will not work on Android, however.
If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms:react-native-navigation.
+If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: react-native-navigation.
React Navigation
The community solution to navigation is a standalone library that allows developers to set up the screens of an app with just a few lines of code.
The first step is to install in your project:
diff --git a/docs/0.17/running-on-device.html b/docs/0.17/running-on-device.html index fde1a42871e..44e44702257 100644 --- a/docs/0.17/running-on-device.html +++ b/docs/0.17/running-on-device.html @@ -102,7 +102,7 @@ }It's always a good idea to test your app on an actual device before releasing it to your users. This document will guide you through the necessary steps to run your React Native app on a device and to get it ready for production.
-If you used Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
+If you used Expo CLI or Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
- @@ -125,7 +125,7 @@ Windows
A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Create React Native App, which will allow you to run your app using the Expo client app.
+A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app.
1. Plug in your device via USB
Connect your iOS device to your Mac using a USB to Lightning cable. Navigate to the ios folder in your project, then open the .xcodeproj file, or if you are using CocoaPods open .xcworkspace, within it using Xcode.
It's always a good idea to test your app on an actual device before releasing it to your users. This document will guide you through the necessary steps to run your React Native app on a device and to get it ready for production.
-If you used Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
+If you used Expo CLI or Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
- @@ -125,7 +125,7 @@ Windows
A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Create React Native App, which will allow you to run your app using the Expo client app.
+A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app.
1. Plug in your device via USB
Connect your iOS device to your Mac using a USB to Lightning cable. Navigate to the ios folder in your project, then open the .xcodeproj file, or if you are using CocoaPods open .xcworkspace, within it using Xcode.
-Note: Make sure gradle.properties does not include org.gradle.configureondemand=true as that will make the release build skip bundling JS and assets into the APK.
The generated APK can be found under android/app/build/outputs/apk/app-release.apk, and is ready to be distributed.
The generated APK can be found under android/app/build/outputs/apk/release/app-release.apk, and is ready to be distributed.
Testing the release build of your app
Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using:
$ react-native run-android --variant=release
diff --git a/docs/0.17/signed-apk-android/index.html b/docs/0.17/signed-apk-android/index.html
index ef92ce47b91..a54a1c2632d 100644
--- a/docs/0.17/signed-apk-android/index.html
+++ b/docs/0.17/signed-apk-android/index.html
@@ -102,7 +102,7 @@ $ ./gradlew assembleRelease
Note: Make sure gradle.properties does not include org.gradle.configureondemand=true as that will make the release build skip bundling JS and assets into the APK.
-The generated APK can be found under android/app/build/outputs/apk/app-release.apk, and is ready to be distributed.
+The generated APK can be found under android/app/build/outputs/apk/release/app-release.apk, and is ready to be distributed.
Testing the release build of your app
Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using:
$ react-native run-android --variant=release
diff --git a/docs/0.17/understanding-cli.html b/docs/0.17/understanding-cli.html
index c73a98de0df..313b9c88856 100644
--- a/docs/0.17/understanding-cli.html
+++ b/docs/0.17/understanding-cli.html
@@ -76,7 +76,7 @@
CLI Configs
When using react-native start, its platform derivatives, and react-native bundle you can use a file to define the CLI options used by React Native by default. If you create a file rn-cli.config.js in the root of your project, it will be evaluated and options for the commands will come from there.
You can see the options for the CLI config file inside the source code for Metro here, and here is a common rn-cli.config.js used for supporting TypeScript in React Native projects:
You can see the options for the CLI config on the metro website. Here's a common rn-cli.config.js used for supporting TypeScript in React Native projects:
module.exports = {
getTransformModulePath() {
return require.resolve('react-native-typescript-transformer');
diff --git a/docs/0.17/understanding-cli/index.html b/docs/0.17/understanding-cli/index.html
index c73a98de0df..313b9c88856 100644
--- a/docs/0.17/understanding-cli/index.html
+++ b/docs/0.17/understanding-cli/index.html
@@ -76,7 +76,7 @@
CLI Configs
When using react-native start, its platform derivatives, and react-native bundle you can use a file to define the CLI options used by React Native by default. If you create a file rn-cli.config.js in the root of your project, it will be evaluated and options for the commands will come from there.
You can see the options for the CLI config file inside the source code for Metro here, and here is a common rn-cli.config.js used for supporting TypeScript in React Native projects:
You can see the options for the CLI config on the metro website. Here's a common rn-cli.config.js used for supporting TypeScript in React Native projects:
module.exports = {
getTransformModulePath() {
return require.resolve('react-native-typescript-transformer');
diff --git a/docs/0.18/debugging.html b/docs/0.18/debugging.html
index ca42b03d62f..66d85fef779 100644
--- a/docs/0.18/debugging.html
+++ b/docs/0.18/debugging.html
@@ -113,7 +113,7 @@ YellowBox.ignoreWarnings(['Warning: ...']);
Projects with Native Code Only
The remainder of this guide only applies to projects made with react-native init
- or to those made with Create React Native App which have since ejected. For
+ or to those made with expo init or Create React Native App which have since ejected. For
more information about ejecting, please see
the guide on
the Create React Native App repository.
@@ -126,11 +126,11 @@ YellowBox.ignoreWarnings(['Warning: ...']);
You may also access these through Debug → Open System Log... in the iOS Simulator or by running adb logcat *:S ReactNative:V ReactNativeJS:V in a terminal while an Android app is running on a device or emulator.
-If you're using Create React Native App, console logs already appear in the same terminal output as the packager.
+If you're using Create React Native App or Expo CLI, console logs already appear in the same terminal output as the packager.
Debugging on a device with Chrome Developer Tools
-If you're using Create React Native App, this is configured for you already.
+If you're using Create React Native App or Expo CLI, this is configured for you already.
On iOS devices, open the file RCTWebSocketExecutor.m and change "localhost" to the IP address of your computer, then select "Debug JS Remotely" from the Developer Menu.
On Android 5.0+ devices connected via USB, you can use the adb command line tool to setup port forwarding from the device to your computer:
Projects with Native Code Only
The remainder of this guide only applies to projects made with react-native init
- or to those made with Create React Native App which have since ejected. For
+ or to those made with expo init or Create React Native App which have since ejected. For
more information about ejecting, please see
the guide on
the Create React Native App repository.
@@ -126,11 +126,11 @@ YellowBox.ignoreWarnings(['Warning: ...']);
You may also access these through Debug → Open System Log... in the iOS Simulator or by running adb logcat *:S ReactNative:V ReactNativeJS:V in a terminal while an Android app is running on a device or emulator.
-If you're using Create React Native App, console logs already appear in the same terminal output as the packager.
+If you're using Create React Native App or Expo CLI, console logs already appear in the same terminal output as the packager.
Debugging on a device with Chrome Developer Tools
-If you're using Create React Native App, this is configured for you already.
+If you're using Create React Native App or Expo CLI, this is configured for you already.
On iOS devices, open the file RCTWebSocketExecutor.m and change "localhost" to the IP address of your computer, then select "Debug JS Remotely" from the Developer Menu.
On Android 5.0+ devices connected via USB, you can use the adb command line tool to setup port forwarding from the device to your computer:
Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.
2. Install the Android SDK
-Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.0 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.1 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".
-The SDK Manager can also be found within the Android Studio "Preferences" dialog, under Appearance & Behavior → System Settings → Android SDK.
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.0 (Oreo) entry, then make sure the following items are all checked:
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.1 (Oreo) entry, then make sure the following items are all checked:
-
-
Android SDK Platform 26
+Android SDK Platform 27Google APIs Intel x86 Atom_64 System Image
Add the following lines to your $HOME/.bash_profile config file:
export ANDROID_HOME=$HOME/Library/Android/sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
export ANDROID_HOME=$HOME/Android/Sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
diff --git a/docs/0.18/getting-started/index.html b/docs/0.18/getting-started/index.html index 32e33ac5349..e5f6a2eb43c 100644 --- a/docs/0.18/getting-started/index.html +++ b/docs/0.18/getting-started/index.html @@ -260,7 +260,7 @@ npm start
Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.
2. Install the Android SDK
-Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.0 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.1 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".
-The SDK Manager can also be found within the Android Studio "Preferences" dialog, under Appearance & Behavior → System Settings → Android SDK.
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.0 (Oreo) entry, then make sure the following items are all checked:
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.1 (Oreo) entry, then make sure the following items are all checked:
-
-
Android SDK Platform 26
+Android SDK Platform 27Google APIs Intel x86 Atom_64 System Image
Add the following lines to your $HOME/.bash_profile config file:
export ANDROID_HOME=$HOME/Library/Android/sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
export ANDROID_HOME=$HOME/Android/Sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
diff --git a/docs/0.18/images.html b/docs/0.18/images.html index e041ee31c77..4004c5834c2 100644 --- a/docs/0.18/images.html +++ b/docs/0.18/images.html @@ -77,7 +77,7 @@ var icon = this.props.activeNote that image sources required this way include size (width, height) info for the Image. If you need to scale the image dynamically (i.e. via flex), you may need to manually set
{ width: undefined, height: undefined }on the style attribute.Static Non-Image Resources
The
-requiresyntax described above can be used to statically include audio, video or document files in your project as well. Most common file types are supported including.mp3,.wav,.mp4,.mov,.htmlandYou can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
+You can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
A caveat is that videos must use absolute positioning instead of
flexGrow, since size info is not currently passed for non-image assets. This limitation doesn't occur for videos that are linked directly into Xcode or the Assets folder for Android.Images From Hybrid App's Resources
If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app.
diff --git a/docs/0.18/images/index.html b/docs/0.18/images/index.html index e041ee31c77..4004c5834c2 100644 --- a/docs/0.18/images/index.html +++ b/docs/0.18/images/index.html @@ -77,7 +77,7 @@ var icon = this.props.activeNote that image sources required this way include size (width, height) info for the Image. If you need to scale the image dynamically (i.e. via flex), you may need to manually set
{ width: undefined, height: undefined }on the style attribute.Static Non-Image Resources
The
-requiresyntax described above can be used to statically include audio, video or document files in your project as well. Most common file types are supported including.mp3,.wav,.mp4,.mov,.htmlandYou can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
+You can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
A caveat is that videos must use absolute positioning instead of
flexGrow, since size info is not currently passed for non-image assets. This limitation doesn't occur for videos that are linked directly into Xcode or the Assets folder for Android.Images From Hybrid App's Resources
If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app.
diff --git a/docs/0.18/navigation.html b/docs/0.18/navigation.html index a453a5a2f6c..1f4dc32d490 100644 --- a/docs/0.18/navigation.html +++ b/docs/0.18/navigation.html @@ -36,7 +36,7 @@
Navigating Between Screens
Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.
This guide covers the various navigation components available in React Native. If you are just getting started with navigation, you will probably want to use React Navigation. React Navigation provides an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android.
If you're only targeting iOS, you may want to also check out NavigatorIOS as a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native UINavigationController class. This component will not work on Android, however.
If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms:react-native-navigation.
+If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: react-native-navigation.
React Navigation
The community solution to navigation is a standalone library that allows developers to set up the screens of an app with just a few lines of code.
The first step is to install in your project:
diff --git a/docs/0.18/navigation/index.html b/docs/0.18/navigation/index.html index a453a5a2f6c..1f4dc32d490 100644 --- a/docs/0.18/navigation/index.html +++ b/docs/0.18/navigation/index.html @@ -36,7 +36,7 @@Navigating Between Screens
Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.
This guide covers the various navigation components available in React Native. If you are just getting started with navigation, you will probably want to use React Navigation. React Navigation provides an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android.
If you're only targeting iOS, you may want to also check out NavigatorIOS as a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native UINavigationController class. This component will not work on Android, however.
If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms:react-native-navigation.
+If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: react-native-navigation.
React Navigation
The community solution to navigation is a standalone library that allows developers to set up the screens of an app with just a few lines of code.
The first step is to install in your project:
diff --git a/docs/0.18/running-on-device.html b/docs/0.18/running-on-device.html index 32b15446ac3..a0af020a7cd 100644 --- a/docs/0.18/running-on-device.html +++ b/docs/0.18/running-on-device.html @@ -102,7 +102,7 @@ }It's always a good idea to test your app on an actual device before releasing it to your users. This document will guide you through the necessary steps to run your React Native app on a device and to get it ready for production.
-If you used Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
+If you used Expo CLI or Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
- @@ -125,7 +125,7 @@ Windows
A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Create React Native App, which will allow you to run your app using the Expo client app.
+A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app.
1. Plug in your device via USB
Connect your iOS device to your Mac using a USB to Lightning cable. Navigate to the ios folder in your project, then open the .xcodeproj file, or if you are using CocoaPods open .xcworkspace, within it using Xcode.
It's always a good idea to test your app on an actual device before releasing it to your users. This document will guide you through the necessary steps to run your React Native app on a device and to get it ready for production.
-If you used Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
+If you used Expo CLI or Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
- @@ -125,7 +125,7 @@ Windows
A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Create React Native App, which will allow you to run your app using the Expo client app.
+A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app.
1. Plug in your device via USB
Connect your iOS device to your Mac using a USB to Lightning cable. Navigate to the ios folder in your project, then open the .xcodeproj file, or if you are using CocoaPods open .xcworkspace, within it using Xcode.
-Note: Make sure gradle.properties does not include org.gradle.configureondemand=true as that will make the release build skip bundling JS and assets into the APK.
The generated APK can be found under android/app/build/outputs/apk/app-release.apk, and is ready to be distributed.
The generated APK can be found under android/app/build/outputs/apk/release/app-release.apk, and is ready to be distributed.
Testing the release build of your app
Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using:
$ react-native run-android --variant=release
diff --git a/docs/0.18/signed-apk-android/index.html b/docs/0.18/signed-apk-android/index.html
index 02e85e3ec90..3dcf3887c11 100644
--- a/docs/0.18/signed-apk-android/index.html
+++ b/docs/0.18/signed-apk-android/index.html
@@ -102,7 +102,7 @@ $ ./gradlew assembleRelease
Note: Make sure gradle.properties does not include org.gradle.configureondemand=true as that will make the release build skip bundling JS and assets into the APK.
-The generated APK can be found under android/app/build/outputs/apk/app-release.apk, and is ready to be distributed.
+The generated APK can be found under android/app/build/outputs/apk/release/app-release.apk, and is ready to be distributed.
Testing the release build of your app
Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using:
$ react-native run-android --variant=release
diff --git a/docs/0.18/understanding-cli.html b/docs/0.18/understanding-cli.html
index 73aaae1564e..93650566c8e 100644
--- a/docs/0.18/understanding-cli.html
+++ b/docs/0.18/understanding-cli.html
@@ -76,7 +76,7 @@
CLI Configs
When using react-native start, its platform derivatives, and react-native bundle you can use a file to define the CLI options used by React Native by default. If you create a file rn-cli.config.js in the root of your project, it will be evaluated and options for the commands will come from there.
You can see the options for the CLI config file inside the source code for Metro here, and here is a common rn-cli.config.js used for supporting TypeScript in React Native projects:
You can see the options for the CLI config on the metro website. Here's a common rn-cli.config.js used for supporting TypeScript in React Native projects:
module.exports = {
getTransformModulePath() {
return require.resolve('react-native-typescript-transformer');
diff --git a/docs/0.18/understanding-cli/index.html b/docs/0.18/understanding-cli/index.html
index 73aaae1564e..93650566c8e 100644
--- a/docs/0.18/understanding-cli/index.html
+++ b/docs/0.18/understanding-cli/index.html
@@ -76,7 +76,7 @@
CLI Configs
When using react-native start, its platform derivatives, and react-native bundle you can use a file to define the CLI options used by React Native by default. If you create a file rn-cli.config.js in the root of your project, it will be evaluated and options for the commands will come from there.
You can see the options for the CLI config file inside the source code for Metro here, and here is a common rn-cli.config.js used for supporting TypeScript in React Native projects:
You can see the options for the CLI config on the metro website. Here's a common rn-cli.config.js used for supporting TypeScript in React Native projects:
module.exports = {
getTransformModulePath() {
return require.resolve('react-native-typescript-transformer');
diff --git a/docs/0.19/debugging.html b/docs/0.19/debugging.html
index a6876702b75..00dcbbc4a93 100644
--- a/docs/0.19/debugging.html
+++ b/docs/0.19/debugging.html
@@ -113,7 +113,7 @@ YellowBox.ignoreWarnings(['Warning: ...']);
Projects with Native Code Only
The remainder of this guide only applies to projects made with react-native init
- or to those made with Create React Native App which have since ejected. For
+ or to those made with expo init or Create React Native App which have since ejected. For
more information about ejecting, please see
the guide on
the Create React Native App repository.
@@ -126,11 +126,11 @@ YellowBox.ignoreWarnings(['Warning: ...']);
You may also access these through Debug → Open System Log... in the iOS Simulator or by running adb logcat *:S ReactNative:V ReactNativeJS:V in a terminal while an Android app is running on a device or emulator.
-If you're using Create React Native App, console logs already appear in the same terminal output as the packager.
+If you're using Create React Native App or Expo CLI, console logs already appear in the same terminal output as the packager.
Debugging on a device with Chrome Developer Tools
-If you're using Create React Native App, this is configured for you already.
+If you're using Create React Native App or Expo CLI, this is configured for you already.
On iOS devices, open the file RCTWebSocketExecutor.m and change "localhost" to the IP address of your computer, then select "Debug JS Remotely" from the Developer Menu.
On Android 5.0+ devices connected via USB, you can use the adb command line tool to setup port forwarding from the device to your computer:
Projects with Native Code Only
The remainder of this guide only applies to projects made with react-native init
- or to those made with Create React Native App which have since ejected. For
+ or to those made with expo init or Create React Native App which have since ejected. For
more information about ejecting, please see
the guide on
the Create React Native App repository.
@@ -126,11 +126,11 @@ YellowBox.ignoreWarnings(['Warning: ...']);
You may also access these through Debug → Open System Log... in the iOS Simulator or by running adb logcat *:S ReactNative:V ReactNativeJS:V in a terminal while an Android app is running on a device or emulator.
-If you're using Create React Native App, console logs already appear in the same terminal output as the packager.
+If you're using Create React Native App or Expo CLI, console logs already appear in the same terminal output as the packager.
Debugging on a device with Chrome Developer Tools
-If you're using Create React Native App, this is configured for you already.
+If you're using Create React Native App or Expo CLI, this is configured for you already.
On iOS devices, open the file RCTWebSocketExecutor.m and change "localhost" to the IP address of your computer, then select "Debug JS Remotely" from the Developer Menu.
On Android 5.0+ devices connected via USB, you can use the adb command line tool to setup port forwarding from the device to your computer:
Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.
2. Install the Android SDK
-Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.0 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.1 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".
-The SDK Manager can also be found within the Android Studio "Preferences" dialog, under Appearance & Behavior → System Settings → Android SDK.
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.0 (Oreo) entry, then make sure the following items are all checked:
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.1 (Oreo) entry, then make sure the following items are all checked:
-
-
Android SDK Platform 26
+Android SDK Platform 27Google APIs Intel x86 Atom_64 System Image
Add the following lines to your $HOME/.bash_profile config file:
export ANDROID_HOME=$HOME/Library/Android/sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
export ANDROID_HOME=$HOME/Android/Sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
diff --git a/docs/0.19/getting-started/index.html b/docs/0.19/getting-started/index.html index 9ca86bf81fe..d8f5aae4320 100644 --- a/docs/0.19/getting-started/index.html +++ b/docs/0.19/getting-started/index.html @@ -260,7 +260,7 @@ npm start
Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.
2. Install the Android SDK
-Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.0 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.1 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".
-The SDK Manager can also be found within the Android Studio "Preferences" dialog, under Appearance & Behavior → System Settings → Android SDK.
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.0 (Oreo) entry, then make sure the following items are all checked:
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.1 (Oreo) entry, then make sure the following items are all checked:
-
-
Android SDK Platform 26
+Android SDK Platform 27Google APIs Intel x86 Atom_64 System Image
Add the following lines to your $HOME/.bash_profile config file:
export ANDROID_HOME=$HOME/Library/Android/sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
export ANDROID_HOME=$HOME/Android/Sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
diff --git a/docs/0.19/images.html b/docs/0.19/images.html index 1e5bd6b825b..4d37c61c169 100644 --- a/docs/0.19/images.html +++ b/docs/0.19/images.html @@ -77,7 +77,7 @@ var icon = this.props.activeNote that image sources required this way include size (width, height) info for the Image. If you need to scale the image dynamically (i.e. via flex), you may need to manually set
{ width: undefined, height: undefined }on the style attribute.Static Non-Image Resources
The
-requiresyntax described above can be used to statically include audio, video or document files in your project as well. Most common file types are supported including.mp3,.wav,.mp4,.mov,.htmlandYou can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
+You can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
A caveat is that videos must use absolute positioning instead of
flexGrow, since size info is not currently passed for non-image assets. This limitation doesn't occur for videos that are linked directly into Xcode or the Assets folder for Android.Images From Hybrid App's Resources
If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app.
diff --git a/docs/0.19/images/index.html b/docs/0.19/images/index.html index 1e5bd6b825b..4d37c61c169 100644 --- a/docs/0.19/images/index.html +++ b/docs/0.19/images/index.html @@ -77,7 +77,7 @@ var icon = this.props.activeNote that image sources required this way include size (width, height) info for the Image. If you need to scale the image dynamically (i.e. via flex), you may need to manually set
{ width: undefined, height: undefined }on the style attribute.Static Non-Image Resources
The
-requiresyntax described above can be used to statically include audio, video or document files in your project as well. Most common file types are supported including.mp3,.wav,.mp4,.mov,.htmlandYou can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
+You can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
A caveat is that videos must use absolute positioning instead of
flexGrow, since size info is not currently passed for non-image assets. This limitation doesn't occur for videos that are linked directly into Xcode or the Assets folder for Android.Images From Hybrid App's Resources
If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app.
diff --git a/docs/0.19/navigation.html b/docs/0.19/navigation.html index b59eb825828..fc40a958600 100644 --- a/docs/0.19/navigation.html +++ b/docs/0.19/navigation.html @@ -36,7 +36,7 @@
Navigating Between Screens
Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.
This guide covers the various navigation components available in React Native. If you are just getting started with navigation, you will probably want to use React Navigation. React Navigation provides an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android.
If you're only targeting iOS, you may want to also check out NavigatorIOS as a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native UINavigationController class. This component will not work on Android, however.
If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms:react-native-navigation.
+If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: react-native-navigation.
React Navigation
The community solution to navigation is a standalone library that allows developers to set up the screens of an app with just a few lines of code.
The first step is to install in your project:
diff --git a/docs/0.19/navigation/index.html b/docs/0.19/navigation/index.html index b59eb825828..fc40a958600 100644 --- a/docs/0.19/navigation/index.html +++ b/docs/0.19/navigation/index.html @@ -36,7 +36,7 @@Navigating Between Screens
Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.
This guide covers the various navigation components available in React Native. If you are just getting started with navigation, you will probably want to use React Navigation. React Navigation provides an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android.
If you're only targeting iOS, you may want to also check out NavigatorIOS as a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native UINavigationController class. This component will not work on Android, however.
If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms:react-native-navigation.
+If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: react-native-navigation.
React Navigation
The community solution to navigation is a standalone library that allows developers to set up the screens of an app with just a few lines of code.
The first step is to install in your project:
diff --git a/docs/0.19/running-on-device.html b/docs/0.19/running-on-device.html index c9d8d12e863..87b55a094e3 100644 --- a/docs/0.19/running-on-device.html +++ b/docs/0.19/running-on-device.html @@ -102,7 +102,7 @@ }It's always a good idea to test your app on an actual device before releasing it to your users. This document will guide you through the necessary steps to run your React Native app on a device and to get it ready for production.
-If you used Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
+If you used Expo CLI or Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
- @@ -125,7 +125,7 @@ Windows
A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Create React Native App, which will allow you to run your app using the Expo client app.
+A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app.
1. Plug in your device via USB
Connect your iOS device to your Mac using a USB to Lightning cable. Navigate to the ios folder in your project, then open the .xcodeproj file, or if you are using CocoaPods open .xcworkspace, within it using Xcode.
It's always a good idea to test your app on an actual device before releasing it to your users. This document will guide you through the necessary steps to run your React Native app on a device and to get it ready for production.
-If you used Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
+If you used Expo CLI or Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
- @@ -125,7 +125,7 @@ Windows
A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Create React Native App, which will allow you to run your app using the Expo client app.
+A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app.
1. Plug in your device via USB
Connect your iOS device to your Mac using a USB to Lightning cable. Navigate to the ios folder in your project, then open the .xcodeproj file, or if you are using CocoaPods open .xcworkspace, within it using Xcode.
-Note: Make sure gradle.properties does not include org.gradle.configureondemand=true as that will make the release build skip bundling JS and assets into the APK.
The generated APK can be found under android/app/build/outputs/apk/app-release.apk, and is ready to be distributed.
The generated APK can be found under android/app/build/outputs/apk/release/app-release.apk, and is ready to be distributed.
Testing the release build of your app
Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using:
$ react-native run-android --variant=release
diff --git a/docs/0.19/signed-apk-android/index.html b/docs/0.19/signed-apk-android/index.html
index 2ac79d47668..ba25021eb38 100644
--- a/docs/0.19/signed-apk-android/index.html
+++ b/docs/0.19/signed-apk-android/index.html
@@ -102,7 +102,7 @@ $ ./gradlew assembleRelease
Note: Make sure gradle.properties does not include org.gradle.configureondemand=true as that will make the release build skip bundling JS and assets into the APK.
-The generated APK can be found under android/app/build/outputs/apk/app-release.apk, and is ready to be distributed.
+The generated APK can be found under android/app/build/outputs/apk/release/app-release.apk, and is ready to be distributed.
Testing the release build of your app
Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using:
$ react-native run-android --variant=release
diff --git a/docs/0.19/understanding-cli.html b/docs/0.19/understanding-cli.html
index 17f850731bd..82690e0024d 100644
--- a/docs/0.19/understanding-cli.html
+++ b/docs/0.19/understanding-cli.html
@@ -76,7 +76,7 @@
CLI Configs
When using react-native start, its platform derivatives, and react-native bundle you can use a file to define the CLI options used by React Native by default. If you create a file rn-cli.config.js in the root of your project, it will be evaluated and options for the commands will come from there.
You can see the options for the CLI config file inside the source code for Metro here, and here is a common rn-cli.config.js used for supporting TypeScript in React Native projects:
You can see the options for the CLI config on the metro website. Here's a common rn-cli.config.js used for supporting TypeScript in React Native projects:
module.exports = {
getTransformModulePath() {
return require.resolve('react-native-typescript-transformer');
diff --git a/docs/0.19/understanding-cli/index.html b/docs/0.19/understanding-cli/index.html
index 17f850731bd..82690e0024d 100644
--- a/docs/0.19/understanding-cli/index.html
+++ b/docs/0.19/understanding-cli/index.html
@@ -76,7 +76,7 @@
CLI Configs
When using react-native start, its platform derivatives, and react-native bundle you can use a file to define the CLI options used by React Native by default. If you create a file rn-cli.config.js in the root of your project, it will be evaluated and options for the commands will come from there.
You can see the options for the CLI config file inside the source code for Metro here, and here is a common rn-cli.config.js used for supporting TypeScript in React Native projects:
You can see the options for the CLI config on the metro website. Here's a common rn-cli.config.js used for supporting TypeScript in React Native projects:
module.exports = {
getTransformModulePath() {
return require.resolve('react-native-typescript-transformer');
diff --git a/docs/0.20/debugging.html b/docs/0.20/debugging.html
index 22c5dacd030..120f40bf904 100644
--- a/docs/0.20/debugging.html
+++ b/docs/0.20/debugging.html
@@ -113,7 +113,7 @@ YellowBox.ignoreWarnings(['Warning: ...']);
Projects with Native Code Only
The remainder of this guide only applies to projects made with react-native init
- or to those made with Create React Native App which have since ejected. For
+ or to those made with expo init or Create React Native App which have since ejected. For
more information about ejecting, please see
the guide on
the Create React Native App repository.
@@ -126,11 +126,11 @@ YellowBox.ignoreWarnings(['Warning: ...']);
You may also access these through Debug → Open System Log... in the iOS Simulator or by running adb logcat *:S ReactNative:V ReactNativeJS:V in a terminal while an Android app is running on a device or emulator.
-If you're using Create React Native App, console logs already appear in the same terminal output as the packager.
+If you're using Create React Native App or Expo CLI, console logs already appear in the same terminal output as the packager.
Debugging on a device with Chrome Developer Tools
-If you're using Create React Native App, this is configured for you already.
+If you're using Create React Native App or Expo CLI, this is configured for you already.
On iOS devices, open the file RCTWebSocketExecutor.m and change "localhost" to the IP address of your computer, then select "Debug JS Remotely" from the Developer Menu.
On Android 5.0+ devices connected via USB, you can use the adb command line tool to setup port forwarding from the device to your computer:
Projects with Native Code Only
The remainder of this guide only applies to projects made with react-native init
- or to those made with Create React Native App which have since ejected. For
+ or to those made with expo init or Create React Native App which have since ejected. For
more information about ejecting, please see
the guide on
the Create React Native App repository.
@@ -126,11 +126,11 @@ YellowBox.ignoreWarnings(['Warning: ...']);
You may also access these through Debug → Open System Log... in the iOS Simulator or by running adb logcat *:S ReactNative:V ReactNativeJS:V in a terminal while an Android app is running on a device or emulator.
-If you're using Create React Native App, console logs already appear in the same terminal output as the packager.
+If you're using Create React Native App or Expo CLI, console logs already appear in the same terminal output as the packager.
Debugging on a device with Chrome Developer Tools
-If you're using Create React Native App, this is configured for you already.
+If you're using Create React Native App or Expo CLI, this is configured for you already.
On iOS devices, open the file RCTWebSocketExecutor.m and change "localhost" to the IP address of your computer, then select "Debug JS Remotely" from the Developer Menu.
On Android 5.0+ devices connected via USB, you can use the adb command line tool to setup port forwarding from the device to your computer:
Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.
2. Install the Android SDK
-Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.0 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.1 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".
-The SDK Manager can also be found within the Android Studio "Preferences" dialog, under Appearance & Behavior → System Settings → Android SDK.
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.0 (Oreo) entry, then make sure the following items are all checked:
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.1 (Oreo) entry, then make sure the following items are all checked:
-
-
Android SDK Platform 26
+Android SDK Platform 27Google APIs Intel x86 Atom_64 System Image
Add the following lines to your $HOME/.bash_profile config file:
export ANDROID_HOME=$HOME/Library/Android/sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
export ANDROID_HOME=$HOME/Android/Sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
diff --git a/docs/0.20/getting-started/index.html b/docs/0.20/getting-started/index.html index de24591b46f..b44cb8e9010 100644 --- a/docs/0.20/getting-started/index.html +++ b/docs/0.20/getting-started/index.html @@ -260,7 +260,7 @@ npm start
Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.
2. Install the Android SDK
-Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.0 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.1 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".
-The SDK Manager can also be found within the Android Studio "Preferences" dialog, under Appearance & Behavior → System Settings → Android SDK.
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.0 (Oreo) entry, then make sure the following items are all checked:
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.1 (Oreo) entry, then make sure the following items are all checked:
-
-
Android SDK Platform 26
+Android SDK Platform 27Google APIs Intel x86 Atom_64 System Image
Add the following lines to your $HOME/.bash_profile config file:
export ANDROID_HOME=$HOME/Library/Android/sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
export ANDROID_HOME=$HOME/Android/Sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
diff --git a/docs/0.20/images.html b/docs/0.20/images.html index 4148a3a8924..291949e9649 100644 --- a/docs/0.20/images.html +++ b/docs/0.20/images.html @@ -77,7 +77,7 @@ var icon = this.props.activeNote that image sources required this way include size (width, height) info for the Image. If you need to scale the image dynamically (i.e. via flex), you may need to manually set
{ width: undefined, height: undefined }on the style attribute.Static Non-Image Resources
The
-requiresyntax described above can be used to statically include audio, video or document files in your project as well. Most common file types are supported including.mp3,.wav,.mp4,.mov,.htmlandYou can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
+You can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
A caveat is that videos must use absolute positioning instead of
flexGrow, since size info is not currently passed for non-image assets. This limitation doesn't occur for videos that are linked directly into Xcode or the Assets folder for Android.Images From Hybrid App's Resources
If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app.
diff --git a/docs/0.20/images/index.html b/docs/0.20/images/index.html index 4148a3a8924..291949e9649 100644 --- a/docs/0.20/images/index.html +++ b/docs/0.20/images/index.html @@ -77,7 +77,7 @@ var icon = this.props.activeNote that image sources required this way include size (width, height) info for the Image. If you need to scale the image dynamically (i.e. via flex), you may need to manually set
{ width: undefined, height: undefined }on the style attribute.Static Non-Image Resources
The
-requiresyntax described above can be used to statically include audio, video or document files in your project as well. Most common file types are supported including.mp3,.wav,.mp4,.mov,.htmlandYou can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
+You can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
A caveat is that videos must use absolute positioning instead of
flexGrow, since size info is not currently passed for non-image assets. This limitation doesn't occur for videos that are linked directly into Xcode or the Assets folder for Android.Images From Hybrid App's Resources
If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app.
diff --git a/docs/0.20/navigation.html b/docs/0.20/navigation.html index aadce85042c..b87a51001d9 100644 --- a/docs/0.20/navigation.html +++ b/docs/0.20/navigation.html @@ -36,7 +36,7 @@
Navigating Between Screens
Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.
This guide covers the various navigation components available in React Native. If you are just getting started with navigation, you will probably want to use React Navigation. React Navigation provides an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android.
If you're only targeting iOS, you may want to also check out NavigatorIOS as a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native UINavigationController class. This component will not work on Android, however.
If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms:react-native-navigation.
+If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: react-native-navigation.
React Navigation
The community solution to navigation is a standalone library that allows developers to set up the screens of an app with just a few lines of code.
The first step is to install in your project:
diff --git a/docs/0.20/navigation/index.html b/docs/0.20/navigation/index.html index aadce85042c..b87a51001d9 100644 --- a/docs/0.20/navigation/index.html +++ b/docs/0.20/navigation/index.html @@ -36,7 +36,7 @@Navigating Between Screens
Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.
This guide covers the various navigation components available in React Native. If you are just getting started with navigation, you will probably want to use React Navigation. React Navigation provides an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android.
If you're only targeting iOS, you may want to also check out NavigatorIOS as a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native UINavigationController class. This component will not work on Android, however.
If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms:react-native-navigation.
+If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: react-native-navigation.
React Navigation
The community solution to navigation is a standalone library that allows developers to set up the screens of an app with just a few lines of code.
The first step is to install in your project:
diff --git a/docs/0.20/running-on-device.html b/docs/0.20/running-on-device.html index 0485842172a..926e89f20fe 100644 --- a/docs/0.20/running-on-device.html +++ b/docs/0.20/running-on-device.html @@ -102,7 +102,7 @@ }It's always a good idea to test your app on an actual device before releasing it to your users. This document will guide you through the necessary steps to run your React Native app on a device and to get it ready for production.
-If you used Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
+If you used Expo CLI or Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
- @@ -125,7 +125,7 @@ Windows
A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Create React Native App, which will allow you to run your app using the Expo client app.
+A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app.
1. Plug in your device via USB
Connect your iOS device to your Mac using a USB to Lightning cable. Navigate to the ios folder in your project, then open the .xcodeproj file, or if you are using CocoaPods open .xcworkspace, within it using Xcode.
It's always a good idea to test your app on an actual device before releasing it to your users. This document will guide you through the necessary steps to run your React Native app on a device and to get it ready for production.
-If you used Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
+If you used Expo CLI or Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
- @@ -125,7 +125,7 @@ Windows
A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Create React Native App, which will allow you to run your app using the Expo client app.
+A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app.
1. Plug in your device via USB
Connect your iOS device to your Mac using a USB to Lightning cable. Navigate to the ios folder in your project, then open the .xcodeproj file, or if you are using CocoaPods open .xcworkspace, within it using Xcode.
-Note: Make sure gradle.properties does not include org.gradle.configureondemand=true as that will make the release build skip bundling JS and assets into the APK.
The generated APK can be found under android/app/build/outputs/apk/app-release.apk, and is ready to be distributed.
The generated APK can be found under android/app/build/outputs/apk/release/app-release.apk, and is ready to be distributed.
Testing the release build of your app
Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using:
$ react-native run-android --variant=release
diff --git a/docs/0.20/signed-apk-android/index.html b/docs/0.20/signed-apk-android/index.html
index 35eecd1f0c4..2bd2656fbee 100644
--- a/docs/0.20/signed-apk-android/index.html
+++ b/docs/0.20/signed-apk-android/index.html
@@ -102,7 +102,7 @@ $ ./gradlew assembleRelease
Note: Make sure gradle.properties does not include org.gradle.configureondemand=true as that will make the release build skip bundling JS and assets into the APK.
-The generated APK can be found under android/app/build/outputs/apk/app-release.apk, and is ready to be distributed.
+The generated APK can be found under android/app/build/outputs/apk/release/app-release.apk, and is ready to be distributed.
Testing the release build of your app
Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using:
$ react-native run-android --variant=release
diff --git a/docs/0.20/understanding-cli.html b/docs/0.20/understanding-cli.html
index 3926c5a4ac0..165ebea5ce1 100644
--- a/docs/0.20/understanding-cli.html
+++ b/docs/0.20/understanding-cli.html
@@ -76,7 +76,7 @@
CLI Configs
When using react-native start, its platform derivatives, and react-native bundle you can use a file to define the CLI options used by React Native by default. If you create a file rn-cli.config.js in the root of your project, it will be evaluated and options for the commands will come from there.
You can see the options for the CLI config file inside the source code for Metro here, and here is a common rn-cli.config.js used for supporting TypeScript in React Native projects:
You can see the options for the CLI config on the metro website. Here's a common rn-cli.config.js used for supporting TypeScript in React Native projects:
module.exports = {
getTransformModulePath() {
return require.resolve('react-native-typescript-transformer');
diff --git a/docs/0.20/understanding-cli/index.html b/docs/0.20/understanding-cli/index.html
index 3926c5a4ac0..165ebea5ce1 100644
--- a/docs/0.20/understanding-cli/index.html
+++ b/docs/0.20/understanding-cli/index.html
@@ -76,7 +76,7 @@
CLI Configs
When using react-native start, its platform derivatives, and react-native bundle you can use a file to define the CLI options used by React Native by default. If you create a file rn-cli.config.js in the root of your project, it will be evaluated and options for the commands will come from there.
You can see the options for the CLI config file inside the source code for Metro here, and here is a common rn-cli.config.js used for supporting TypeScript in React Native projects:
You can see the options for the CLI config on the metro website. Here's a common rn-cli.config.js used for supporting TypeScript in React Native projects:
module.exports = {
getTransformModulePath() {
return require.resolve('react-native-typescript-transformer');
diff --git a/docs/0.21/debugging.html b/docs/0.21/debugging.html
index c133dd5c949..d22c4d88b88 100644
--- a/docs/0.21/debugging.html
+++ b/docs/0.21/debugging.html
@@ -113,7 +113,7 @@ YellowBox.ignoreWarnings(['Warning: ...']);
Projects with Native Code Only
The remainder of this guide only applies to projects made with react-native init
- or to those made with Create React Native App which have since ejected. For
+ or to those made with expo init or Create React Native App which have since ejected. For
more information about ejecting, please see
the guide on
the Create React Native App repository.
@@ -126,11 +126,11 @@ YellowBox.ignoreWarnings(['Warning: ...']);
You may also access these through Debug → Open System Log... in the iOS Simulator or by running adb logcat *:S ReactNative:V ReactNativeJS:V in a terminal while an Android app is running on a device or emulator.
-If you're using Create React Native App, console logs already appear in the same terminal output as the packager.
+If you're using Create React Native App or Expo CLI, console logs already appear in the same terminal output as the packager.
Debugging on a device with Chrome Developer Tools
-If you're using Create React Native App, this is configured for you already.
+If you're using Create React Native App or Expo CLI, this is configured for you already.
On iOS devices, open the file RCTWebSocketExecutor.m and change "localhost" to the IP address of your computer, then select "Debug JS Remotely" from the Developer Menu.
On Android 5.0+ devices connected via USB, you can use the adb command line tool to setup port forwarding from the device to your computer:
Projects with Native Code Only
The remainder of this guide only applies to projects made with react-native init
- or to those made with Create React Native App which have since ejected. For
+ or to those made with expo init or Create React Native App which have since ejected. For
more information about ejecting, please see
the guide on
the Create React Native App repository.
@@ -126,11 +126,11 @@ YellowBox.ignoreWarnings(['Warning: ...']);
You may also access these through Debug → Open System Log... in the iOS Simulator or by running adb logcat *:S ReactNative:V ReactNativeJS:V in a terminal while an Android app is running on a device or emulator.
-If you're using Create React Native App, console logs already appear in the same terminal output as the packager.
+If you're using Create React Native App or Expo CLI, console logs already appear in the same terminal output as the packager.
Debugging on a device with Chrome Developer Tools
-If you're using Create React Native App, this is configured for you already.
+If you're using Create React Native App or Expo CLI, this is configured for you already.
On iOS devices, open the file RCTWebSocketExecutor.m and change "localhost" to the IP address of your computer, then select "Debug JS Remotely" from the Developer Menu.
On Android 5.0+ devices connected via USB, you can use the adb command line tool to setup port forwarding from the device to your computer:
Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.
2. Install the Android SDK
-Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.0 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.1 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".
-The SDK Manager can also be found within the Android Studio "Preferences" dialog, under Appearance & Behavior → System Settings → Android SDK.
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.0 (Oreo) entry, then make sure the following items are all checked:
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.1 (Oreo) entry, then make sure the following items are all checked:
-
-
Android SDK Platform 26
+Android SDK Platform 27Google APIs Intel x86 Atom_64 System Image
Add the following lines to your $HOME/.bash_profile config file:
export ANDROID_HOME=$HOME/Library/Android/sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
export ANDROID_HOME=$HOME/Android/Sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
diff --git a/docs/0.21/getting-started/index.html b/docs/0.21/getting-started/index.html index f09153627da..bf08e72891b 100644 --- a/docs/0.21/getting-started/index.html +++ b/docs/0.21/getting-started/index.html @@ -260,7 +260,7 @@ npm start
Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.
2. Install the Android SDK
-Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.0 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.1 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".
-The SDK Manager can also be found within the Android Studio "Preferences" dialog, under Appearance & Behavior → System Settings → Android SDK.
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.0 (Oreo) entry, then make sure the following items are all checked:
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.1 (Oreo) entry, then make sure the following items are all checked:
-
-
Android SDK Platform 26
+Android SDK Platform 27Google APIs Intel x86 Atom_64 System Image
Add the following lines to your $HOME/.bash_profile config file:
export ANDROID_HOME=$HOME/Library/Android/sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
export ANDROID_HOME=$HOME/Android/Sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
diff --git a/docs/0.21/images.html b/docs/0.21/images.html index 90c79c2bfb4..b43bf6cbe2d 100644 --- a/docs/0.21/images.html +++ b/docs/0.21/images.html @@ -77,7 +77,7 @@ var icon = this.props.activeNote that image sources required this way include size (width, height) info for the Image. If you need to scale the image dynamically (i.e. via flex), you may need to manually set
{ width: undefined, height: undefined }on the style attribute.Static Non-Image Resources
The
-requiresyntax described above can be used to statically include audio, video or document files in your project as well. Most common file types are supported including.mp3,.wav,.mp4,.mov,.htmlandYou can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
+You can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
A caveat is that videos must use absolute positioning instead of
flexGrow, since size info is not currently passed for non-image assets. This limitation doesn't occur for videos that are linked directly into Xcode or the Assets folder for Android.Images From Hybrid App's Resources
If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app.
diff --git a/docs/0.21/images/index.html b/docs/0.21/images/index.html index 90c79c2bfb4..b43bf6cbe2d 100644 --- a/docs/0.21/images/index.html +++ b/docs/0.21/images/index.html @@ -77,7 +77,7 @@ var icon = this.props.activeNote that image sources required this way include size (width, height) info for the Image. If you need to scale the image dynamically (i.e. via flex), you may need to manually set
{ width: undefined, height: undefined }on the style attribute.Static Non-Image Resources
The
-requiresyntax described above can be used to statically include audio, video or document files in your project as well. Most common file types are supported including.mp3,.wav,.mp4,.mov,.htmlandYou can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
+You can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
A caveat is that videos must use absolute positioning instead of
flexGrow, since size info is not currently passed for non-image assets. This limitation doesn't occur for videos that are linked directly into Xcode or the Assets folder for Android.Images From Hybrid App's Resources
If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app.
diff --git a/docs/0.21/navigation.html b/docs/0.21/navigation.html index 94332cbc8f1..05bb64484d4 100644 --- a/docs/0.21/navigation.html +++ b/docs/0.21/navigation.html @@ -36,7 +36,7 @@
Navigating Between Screens
Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.
This guide covers the various navigation components available in React Native. If you are just getting started with navigation, you will probably want to use React Navigation. React Navigation provides an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android.
If you're only targeting iOS, you may want to also check out NavigatorIOS as a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native UINavigationController class. This component will not work on Android, however.
If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms:react-native-navigation.
+If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: react-native-navigation.
React Navigation
The community solution to navigation is a standalone library that allows developers to set up the screens of an app with just a few lines of code.
The first step is to install in your project:
diff --git a/docs/0.21/navigation/index.html b/docs/0.21/navigation/index.html index 94332cbc8f1..05bb64484d4 100644 --- a/docs/0.21/navigation/index.html +++ b/docs/0.21/navigation/index.html @@ -36,7 +36,7 @@Navigating Between Screens
Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.
This guide covers the various navigation components available in React Native. If you are just getting started with navigation, you will probably want to use React Navigation. React Navigation provides an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android.
If you're only targeting iOS, you may want to also check out NavigatorIOS as a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native UINavigationController class. This component will not work on Android, however.
If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms:react-native-navigation.
+If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: react-native-navigation.
React Navigation
The community solution to navigation is a standalone library that allows developers to set up the screens of an app with just a few lines of code.
The first step is to install in your project:
diff --git a/docs/0.21/running-on-device.html b/docs/0.21/running-on-device.html index d0df8c5ce47..4fd0cbeba4d 100644 --- a/docs/0.21/running-on-device.html +++ b/docs/0.21/running-on-device.html @@ -102,7 +102,7 @@ }It's always a good idea to test your app on an actual device before releasing it to your users. This document will guide you through the necessary steps to run your React Native app on a device and to get it ready for production.
-If you used Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
+If you used Expo CLI or Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
- @@ -125,7 +125,7 @@ Windows
A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Create React Native App, which will allow you to run your app using the Expo client app.
+A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app.
1. Plug in your device via USB
Connect your iOS device to your Mac using a USB to Lightning cable. Navigate to the ios folder in your project, then open the .xcodeproj file, or if you are using CocoaPods open .xcworkspace, within it using Xcode.
It's always a good idea to test your app on an actual device before releasing it to your users. This document will guide you through the necessary steps to run your React Native app on a device and to get it ready for production.
-If you used Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
+If you used Expo CLI or Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
- @@ -125,7 +125,7 @@ Windows
A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Create React Native App, which will allow you to run your app using the Expo client app.
+A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app.
1. Plug in your device via USB
Connect your iOS device to your Mac using a USB to Lightning cable. Navigate to the ios folder in your project, then open the .xcodeproj file, or if you are using CocoaPods open .xcworkspace, within it using Xcode.
-Note: Make sure gradle.properties does not include org.gradle.configureondemand=true as that will make the release build skip bundling JS and assets into the APK.
The generated APK can be found under android/app/build/outputs/apk/app-release.apk, and is ready to be distributed.
The generated APK can be found under android/app/build/outputs/apk/release/app-release.apk, and is ready to be distributed.
Testing the release build of your app
Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using:
$ react-native run-android --variant=release
diff --git a/docs/0.21/signed-apk-android/index.html b/docs/0.21/signed-apk-android/index.html
index 82bce11b0e6..0f377aba5fa 100644
--- a/docs/0.21/signed-apk-android/index.html
+++ b/docs/0.21/signed-apk-android/index.html
@@ -102,7 +102,7 @@ $ ./gradlew assembleRelease
Note: Make sure gradle.properties does not include org.gradle.configureondemand=true as that will make the release build skip bundling JS and assets into the APK.
-The generated APK can be found under android/app/build/outputs/apk/app-release.apk, and is ready to be distributed.
+The generated APK can be found under android/app/build/outputs/apk/release/app-release.apk, and is ready to be distributed.
Testing the release build of your app
Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using:
$ react-native run-android --variant=release
diff --git a/docs/0.21/understanding-cli.html b/docs/0.21/understanding-cli.html
index fc85bc7e322..880572690b7 100644
--- a/docs/0.21/understanding-cli.html
+++ b/docs/0.21/understanding-cli.html
@@ -76,7 +76,7 @@
CLI Configs
When using react-native start, its platform derivatives, and react-native bundle you can use a file to define the CLI options used by React Native by default. If you create a file rn-cli.config.js in the root of your project, it will be evaluated and options for the commands will come from there.
You can see the options for the CLI config file inside the source code for Metro here, and here is a common rn-cli.config.js used for supporting TypeScript in React Native projects:
You can see the options for the CLI config on the metro website. Here's a common rn-cli.config.js used for supporting TypeScript in React Native projects:
module.exports = {
getTransformModulePath() {
return require.resolve('react-native-typescript-transformer');
diff --git a/docs/0.21/understanding-cli/index.html b/docs/0.21/understanding-cli/index.html
index fc85bc7e322..880572690b7 100644
--- a/docs/0.21/understanding-cli/index.html
+++ b/docs/0.21/understanding-cli/index.html
@@ -76,7 +76,7 @@
CLI Configs
When using react-native start, its platform derivatives, and react-native bundle you can use a file to define the CLI options used by React Native by default. If you create a file rn-cli.config.js in the root of your project, it will be evaluated and options for the commands will come from there.
You can see the options for the CLI config file inside the source code for Metro here, and here is a common rn-cli.config.js used for supporting TypeScript in React Native projects:
You can see the options for the CLI config on the metro website. Here's a common rn-cli.config.js used for supporting TypeScript in React Native projects:
module.exports = {
getTransformModulePath() {
return require.resolve('react-native-typescript-transformer');
diff --git a/docs/0.22/debugging.html b/docs/0.22/debugging.html
index e1fc06e23fb..4f6f9338f09 100644
--- a/docs/0.22/debugging.html
+++ b/docs/0.22/debugging.html
@@ -113,7 +113,7 @@ YellowBox.ignoreWarnings(['Warning: ...']);
Projects with Native Code Only
The remainder of this guide only applies to projects made with react-native init
- or to those made with Create React Native App which have since ejected. For
+ or to those made with expo init or Create React Native App which have since ejected. For
more information about ejecting, please see
the guide on
the Create React Native App repository.
@@ -126,11 +126,11 @@ YellowBox.ignoreWarnings(['Warning: ...']);
You may also access these through Debug → Open System Log... in the iOS Simulator or by running adb logcat *:S ReactNative:V ReactNativeJS:V in a terminal while an Android app is running on a device or emulator.
-If you're using Create React Native App, console logs already appear in the same terminal output as the packager.
+If you're using Create React Native App or Expo CLI, console logs already appear in the same terminal output as the packager.
Debugging on a device with Chrome Developer Tools
-If you're using Create React Native App, this is configured for you already.
+If you're using Create React Native App or Expo CLI, this is configured for you already.
On iOS devices, open the file RCTWebSocketExecutor.m and change "localhost" to the IP address of your computer, then select "Debug JS Remotely" from the Developer Menu.
On Android 5.0+ devices connected via USB, you can use the adb command line tool to setup port forwarding from the device to your computer:
Projects with Native Code Only
The remainder of this guide only applies to projects made with react-native init
- or to those made with Create React Native App which have since ejected. For
+ or to those made with expo init or Create React Native App which have since ejected. For
more information about ejecting, please see
the guide on
the Create React Native App repository.
@@ -126,11 +126,11 @@ YellowBox.ignoreWarnings(['Warning: ...']);
You may also access these through Debug → Open System Log... in the iOS Simulator or by running adb logcat *:S ReactNative:V ReactNativeJS:V in a terminal while an Android app is running on a device or emulator.
-If you're using Create React Native App, console logs already appear in the same terminal output as the packager.
+If you're using Create React Native App or Expo CLI, console logs already appear in the same terminal output as the packager.
Debugging on a device with Chrome Developer Tools
-If you're using Create React Native App, this is configured for you already.
+If you're using Create React Native App or Expo CLI, this is configured for you already.
On iOS devices, open the file RCTWebSocketExecutor.m and change "localhost" to the IP address of your computer, then select "Debug JS Remotely" from the Developer Menu.
On Android 5.0+ devices connected via USB, you can use the adb command line tool to setup port forwarding from the device to your computer:
Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.
2. Install the Android SDK
-Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.0 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.1 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".
-The SDK Manager can also be found within the Android Studio "Preferences" dialog, under Appearance & Behavior → System Settings → Android SDK.
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.0 (Oreo) entry, then make sure the following items are all checked:
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.1 (Oreo) entry, then make sure the following items are all checked:
-
-
Android SDK Platform 26
+Android SDK Platform 27Google APIs Intel x86 Atom_64 System Image
Add the following lines to your $HOME/.bash_profile config file:
export ANDROID_HOME=$HOME/Library/Android/sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
export ANDROID_HOME=$HOME/Android/Sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
diff --git a/docs/0.22/getting-started/index.html b/docs/0.22/getting-started/index.html index 9be56be6ef7..8f678b5048d 100644 --- a/docs/0.22/getting-started/index.html +++ b/docs/0.22/getting-started/index.html @@ -260,7 +260,7 @@ npm start
Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.
2. Install the Android SDK
-Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.0 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.1 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".
-The SDK Manager can also be found within the Android Studio "Preferences" dialog, under Appearance & Behavior → System Settings → Android SDK.
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.0 (Oreo) entry, then make sure the following items are all checked:
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.1 (Oreo) entry, then make sure the following items are all checked:
-
-
Android SDK Platform 26
+Android SDK Platform 27Google APIs Intel x86 Atom_64 System Image
Add the following lines to your $HOME/.bash_profile config file:
export ANDROID_HOME=$HOME/Library/Android/sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
export ANDROID_HOME=$HOME/Android/Sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
diff --git a/docs/0.22/images.html b/docs/0.22/images.html index e0218f7578d..3493eb8ad83 100644 --- a/docs/0.22/images.html +++ b/docs/0.22/images.html @@ -77,7 +77,7 @@ var icon = this.props.activeNote that image sources required this way include size (width, height) info for the Image. If you need to scale the image dynamically (i.e. via flex), you may need to manually set
{ width: undefined, height: undefined }on the style attribute.Static Non-Image Resources
The
-requiresyntax described above can be used to statically include audio, video or document files in your project as well. Most common file types are supported including.mp3,.wav,.mp4,.mov,.htmlandYou can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
+You can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
A caveat is that videos must use absolute positioning instead of
flexGrow, since size info is not currently passed for non-image assets. This limitation doesn't occur for videos that are linked directly into Xcode or the Assets folder for Android.Images From Hybrid App's Resources
If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app.
diff --git a/docs/0.22/images/index.html b/docs/0.22/images/index.html index e0218f7578d..3493eb8ad83 100644 --- a/docs/0.22/images/index.html +++ b/docs/0.22/images/index.html @@ -77,7 +77,7 @@ var icon = this.props.activeNote that image sources required this way include size (width, height) info for the Image. If you need to scale the image dynamically (i.e. via flex), you may need to manually set
{ width: undefined, height: undefined }on the style attribute.Static Non-Image Resources
The
-requiresyntax described above can be used to statically include audio, video or document files in your project as well. Most common file types are supported including.mp3,.wav,.mp4,.mov,.htmlandYou can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
+You can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
A caveat is that videos must use absolute positioning instead of
flexGrow, since size info is not currently passed for non-image assets. This limitation doesn't occur for videos that are linked directly into Xcode or the Assets folder for Android.Images From Hybrid App's Resources
If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app.
diff --git a/docs/0.22/navigation.html b/docs/0.22/navigation.html index 55283ad67ce..c8655c417e6 100644 --- a/docs/0.22/navigation.html +++ b/docs/0.22/navigation.html @@ -36,7 +36,7 @@
Navigating Between Screens
Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.
This guide covers the various navigation components available in React Native. If you are just getting started with navigation, you will probably want to use React Navigation. React Navigation provides an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android.
If you're only targeting iOS, you may want to also check out NavigatorIOS as a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native UINavigationController class. This component will not work on Android, however.
If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms:react-native-navigation.
+If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: react-native-navigation.
React Navigation
The community solution to navigation is a standalone library that allows developers to set up the screens of an app with just a few lines of code.
The first step is to install in your project:
diff --git a/docs/0.22/navigation/index.html b/docs/0.22/navigation/index.html index 55283ad67ce..c8655c417e6 100644 --- a/docs/0.22/navigation/index.html +++ b/docs/0.22/navigation/index.html @@ -36,7 +36,7 @@Navigating Between Screens
Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.
This guide covers the various navigation components available in React Native. If you are just getting started with navigation, you will probably want to use React Navigation. React Navigation provides an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android.
If you're only targeting iOS, you may want to also check out NavigatorIOS as a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native UINavigationController class. This component will not work on Android, however.
If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms:react-native-navigation.
+If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: react-native-navigation.
React Navigation
The community solution to navigation is a standalone library that allows developers to set up the screens of an app with just a few lines of code.
The first step is to install in your project:
diff --git a/docs/0.22/running-on-device.html b/docs/0.22/running-on-device.html index 2da7fabe6ff..df62731b4d5 100644 --- a/docs/0.22/running-on-device.html +++ b/docs/0.22/running-on-device.html @@ -102,7 +102,7 @@ }It's always a good idea to test your app on an actual device before releasing it to your users. This document will guide you through the necessary steps to run your React Native app on a device and to get it ready for production.
-If you used Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
+If you used Expo CLI or Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
- @@ -125,7 +125,7 @@ Windows
A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Create React Native App, which will allow you to run your app using the Expo client app.
+A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app.
1. Plug in your device via USB
Connect your iOS device to your Mac using a USB to Lightning cable. Navigate to the ios folder in your project, then open the .xcodeproj file, or if you are using CocoaPods open .xcworkspace, within it using Xcode.
It's always a good idea to test your app on an actual device before releasing it to your users. This document will guide you through the necessary steps to run your React Native app on a device and to get it ready for production.
-If you used Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
+If you used Expo CLI or Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
- @@ -125,7 +125,7 @@ Windows
A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Create React Native App, which will allow you to run your app using the Expo client app.
+A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app.
1. Plug in your device via USB
Connect your iOS device to your Mac using a USB to Lightning cable. Navigate to the ios folder in your project, then open the .xcodeproj file, or if you are using CocoaPods open .xcworkspace, within it using Xcode.
-Note: Make sure gradle.properties does not include org.gradle.configureondemand=true as that will make the release build skip bundling JS and assets into the APK.
The generated APK can be found under android/app/build/outputs/apk/app-release.apk, and is ready to be distributed.
The generated APK can be found under android/app/build/outputs/apk/release/app-release.apk, and is ready to be distributed.
Testing the release build of your app
Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using:
$ react-native run-android --variant=release
diff --git a/docs/0.22/signed-apk-android/index.html b/docs/0.22/signed-apk-android/index.html
index 17bec1f5d33..2d35b102ae6 100644
--- a/docs/0.22/signed-apk-android/index.html
+++ b/docs/0.22/signed-apk-android/index.html
@@ -102,7 +102,7 @@ $ ./gradlew assembleRelease
Note: Make sure gradle.properties does not include org.gradle.configureondemand=true as that will make the release build skip bundling JS and assets into the APK.
-The generated APK can be found under android/app/build/outputs/apk/app-release.apk, and is ready to be distributed.
+The generated APK can be found under android/app/build/outputs/apk/release/app-release.apk, and is ready to be distributed.
Testing the release build of your app
Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using:
$ react-native run-android --variant=release
diff --git a/docs/0.22/understanding-cli.html b/docs/0.22/understanding-cli.html
index 24dde3a6362..a4bc10bd581 100644
--- a/docs/0.22/understanding-cli.html
+++ b/docs/0.22/understanding-cli.html
@@ -76,7 +76,7 @@
CLI Configs
When using react-native start, its platform derivatives, and react-native bundle you can use a file to define the CLI options used by React Native by default. If you create a file rn-cli.config.js in the root of your project, it will be evaluated and options for the commands will come from there.
You can see the options for the CLI config file inside the source code for Metro here, and here is a common rn-cli.config.js used for supporting TypeScript in React Native projects:
You can see the options for the CLI config on the metro website. Here's a common rn-cli.config.js used for supporting TypeScript in React Native projects:
module.exports = {
getTransformModulePath() {
return require.resolve('react-native-typescript-transformer');
diff --git a/docs/0.22/understanding-cli/index.html b/docs/0.22/understanding-cli/index.html
index 24dde3a6362..a4bc10bd581 100644
--- a/docs/0.22/understanding-cli/index.html
+++ b/docs/0.22/understanding-cli/index.html
@@ -76,7 +76,7 @@
CLI Configs
When using react-native start, its platform derivatives, and react-native bundle you can use a file to define the CLI options used by React Native by default. If you create a file rn-cli.config.js in the root of your project, it will be evaluated and options for the commands will come from there.
You can see the options for the CLI config file inside the source code for Metro here, and here is a common rn-cli.config.js used for supporting TypeScript in React Native projects:
You can see the options for the CLI config on the metro website. Here's a common rn-cli.config.js used for supporting TypeScript in React Native projects:
module.exports = {
getTransformModulePath() {
return require.resolve('react-native-typescript-transformer');
diff --git a/docs/0.23/debugging.html b/docs/0.23/debugging.html
index 3bbecd56fd0..ea6c68c5371 100644
--- a/docs/0.23/debugging.html
+++ b/docs/0.23/debugging.html
@@ -113,7 +113,7 @@ YellowBox.ignoreWarnings(['Warning: ...']);
Projects with Native Code Only
The remainder of this guide only applies to projects made with react-native init
- or to those made with Create React Native App which have since ejected. For
+ or to those made with expo init or Create React Native App which have since ejected. For
more information about ejecting, please see
the guide on
the Create React Native App repository.
@@ -126,11 +126,11 @@ YellowBox.ignoreWarnings(['Warning: ...']);
You may also access these through Debug → Open System Log... in the iOS Simulator or by running adb logcat *:S ReactNative:V ReactNativeJS:V in a terminal while an Android app is running on a device or emulator.
-If you're using Create React Native App, console logs already appear in the same terminal output as the packager.
+If you're using Create React Native App or Expo CLI, console logs already appear in the same terminal output as the packager.
Debugging on a device with Chrome Developer Tools
-If you're using Create React Native App, this is configured for you already.
+If you're using Create React Native App or Expo CLI, this is configured for you already.
On iOS devices, open the file RCTWebSocketExecutor.m and change "localhost" to the IP address of your computer, then select "Debug JS Remotely" from the Developer Menu.
On Android 5.0+ devices connected via USB, you can use the adb command line tool to setup port forwarding from the device to your computer:
Projects with Native Code Only
The remainder of this guide only applies to projects made with react-native init
- or to those made with Create React Native App which have since ejected. For
+ or to those made with expo init or Create React Native App which have since ejected. For
more information about ejecting, please see
the guide on
the Create React Native App repository.
@@ -126,11 +126,11 @@ YellowBox.ignoreWarnings(['Warning: ...']);
You may also access these through Debug → Open System Log... in the iOS Simulator or by running adb logcat *:S ReactNative:V ReactNativeJS:V in a terminal while an Android app is running on a device or emulator.
-If you're using Create React Native App, console logs already appear in the same terminal output as the packager.
+If you're using Create React Native App or Expo CLI, console logs already appear in the same terminal output as the packager.
Debugging on a device with Chrome Developer Tools
-If you're using Create React Native App, this is configured for you already.
+If you're using Create React Native App or Expo CLI, this is configured for you already.
On iOS devices, open the file RCTWebSocketExecutor.m and change "localhost" to the IP address of your computer, then select "Debug JS Remotely" from the Developer Menu.
On Android 5.0+ devices connected via USB, you can use the adb command line tool to setup port forwarding from the device to your computer:
Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.
2. Install the Android SDK
-Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.0 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.1 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".
-The SDK Manager can also be found within the Android Studio "Preferences" dialog, under Appearance & Behavior → System Settings → Android SDK.
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.0 (Oreo) entry, then make sure the following items are all checked:
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.1 (Oreo) entry, then make sure the following items are all checked:
-
-
Android SDK Platform 26
+Android SDK Platform 27Google APIs Intel x86 Atom_64 System Image
Add the following lines to your $HOME/.bash_profile config file:
export ANDROID_HOME=$HOME/Library/Android/sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
export ANDROID_HOME=$HOME/Android/Sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
diff --git a/docs/0.23/getting-started/index.html b/docs/0.23/getting-started/index.html index 6ce8a49af9c..e9af40b23f3 100644 --- a/docs/0.23/getting-started/index.html +++ b/docs/0.23/getting-started/index.html @@ -260,7 +260,7 @@ npm start
Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.
2. Install the Android SDK
-Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.0 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.1 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".
-The SDK Manager can also be found within the Android Studio "Preferences" dialog, under Appearance & Behavior → System Settings → Android SDK.
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.0 (Oreo) entry, then make sure the following items are all checked:
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.1 (Oreo) entry, then make sure the following items are all checked:
-
-
Android SDK Platform 26
+Android SDK Platform 27Google APIs Intel x86 Atom_64 System Image
Add the following lines to your $HOME/.bash_profile config file:
export ANDROID_HOME=$HOME/Library/Android/sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
export ANDROID_HOME=$HOME/Android/Sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
diff --git a/docs/0.23/images.html b/docs/0.23/images.html index e9c409c4c07..4a8a4c1eff4 100644 --- a/docs/0.23/images.html +++ b/docs/0.23/images.html @@ -77,7 +77,7 @@ var icon = this.props.activeNote that image sources required this way include size (width, height) info for the Image. If you need to scale the image dynamically (i.e. via flex), you may need to manually set
{ width: undefined, height: undefined }on the style attribute.Static Non-Image Resources
The
-requiresyntax described above can be used to statically include audio, video or document files in your project as well. Most common file types are supported including.mp3,.wav,.mp4,.mov,.htmlandYou can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
+You can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
A caveat is that videos must use absolute positioning instead of
flexGrow, since size info is not currently passed for non-image assets. This limitation doesn't occur for videos that are linked directly into Xcode or the Assets folder for Android.Images From Hybrid App's Resources
If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app.
diff --git a/docs/0.23/images/index.html b/docs/0.23/images/index.html index e9c409c4c07..4a8a4c1eff4 100644 --- a/docs/0.23/images/index.html +++ b/docs/0.23/images/index.html @@ -77,7 +77,7 @@ var icon = this.props.activeNote that image sources required this way include size (width, height) info for the Image. If you need to scale the image dynamically (i.e. via flex), you may need to manually set
{ width: undefined, height: undefined }on the style attribute.Static Non-Image Resources
The
-requiresyntax described above can be used to statically include audio, video or document files in your project as well. Most common file types are supported including.mp3,.wav,.mp4,.mov,.htmlandYou can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
+You can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
A caveat is that videos must use absolute positioning instead of
flexGrow, since size info is not currently passed for non-image assets. This limitation doesn't occur for videos that are linked directly into Xcode or the Assets folder for Android.Images From Hybrid App's Resources
If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app.
diff --git a/docs/0.23/navigation.html b/docs/0.23/navigation.html index 11060ecabb5..d0b55160f6f 100644 --- a/docs/0.23/navigation.html +++ b/docs/0.23/navigation.html @@ -36,7 +36,7 @@
Navigating Between Screens
Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.
This guide covers the various navigation components available in React Native. If you are just getting started with navigation, you will probably want to use React Navigation. React Navigation provides an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android.
If you're only targeting iOS, you may want to also check out NavigatorIOS as a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native UINavigationController class. This component will not work on Android, however.
If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms:react-native-navigation.
+If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: react-native-navigation.
React Navigation
The community solution to navigation is a standalone library that allows developers to set up the screens of an app with just a few lines of code.
The first step is to install in your project:
diff --git a/docs/0.23/navigation/index.html b/docs/0.23/navigation/index.html index 11060ecabb5..d0b55160f6f 100644 --- a/docs/0.23/navigation/index.html +++ b/docs/0.23/navigation/index.html @@ -36,7 +36,7 @@Navigating Between Screens
Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.
This guide covers the various navigation components available in React Native. If you are just getting started with navigation, you will probably want to use React Navigation. React Navigation provides an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android.
If you're only targeting iOS, you may want to also check out NavigatorIOS as a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native UINavigationController class. This component will not work on Android, however.
If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms:react-native-navigation.
+If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: react-native-navigation.
React Navigation
The community solution to navigation is a standalone library that allows developers to set up the screens of an app with just a few lines of code.
The first step is to install in your project:
diff --git a/docs/0.23/running-on-device.html b/docs/0.23/running-on-device.html index af2facc4b15..e20400963ba 100644 --- a/docs/0.23/running-on-device.html +++ b/docs/0.23/running-on-device.html @@ -102,7 +102,7 @@ }It's always a good idea to test your app on an actual device before releasing it to your users. This document will guide you through the necessary steps to run your React Native app on a device and to get it ready for production.
-If you used Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
+If you used Expo CLI or Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
- @@ -125,7 +125,7 @@ Windows
A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Create React Native App, which will allow you to run your app using the Expo client app.
+A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app.
1. Plug in your device via USB
Connect your iOS device to your Mac using a USB to Lightning cable. Navigate to the ios folder in your project, then open the .xcodeproj file, or if you are using CocoaPods open .xcworkspace, within it using Xcode.
It's always a good idea to test your app on an actual device before releasing it to your users. This document will guide you through the necessary steps to run your React Native app on a device and to get it ready for production.
-If you used Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
+If you used Expo CLI or Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
- @@ -125,7 +125,7 @@ Windows
A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Create React Native App, which will allow you to run your app using the Expo client app.
+A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app.
1. Plug in your device via USB
Connect your iOS device to your Mac using a USB to Lightning cable. Navigate to the ios folder in your project, then open the .xcodeproj file, or if you are using CocoaPods open .xcworkspace, within it using Xcode.
-Note: Make sure gradle.properties does not include org.gradle.configureondemand=true as that will make the release build skip bundling JS and assets into the APK.
The generated APK can be found under android/app/build/outputs/apk/app-release.apk, and is ready to be distributed.
The generated APK can be found under android/app/build/outputs/apk/release/app-release.apk, and is ready to be distributed.
Testing the release build of your app
Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using:
$ react-native run-android --variant=release
diff --git a/docs/0.23/signed-apk-android/index.html b/docs/0.23/signed-apk-android/index.html
index a1e2b6d4908..f7a6efe4baa 100644
--- a/docs/0.23/signed-apk-android/index.html
+++ b/docs/0.23/signed-apk-android/index.html
@@ -102,7 +102,7 @@ $ ./gradlew assembleRelease
Note: Make sure gradle.properties does not include org.gradle.configureondemand=true as that will make the release build skip bundling JS and assets into the APK.
-The generated APK can be found under android/app/build/outputs/apk/app-release.apk, and is ready to be distributed.
+The generated APK can be found under android/app/build/outputs/apk/release/app-release.apk, and is ready to be distributed.
Testing the release build of your app
Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using:
$ react-native run-android --variant=release
diff --git a/docs/0.23/understanding-cli.html b/docs/0.23/understanding-cli.html
index 847be090818..4be9995fb86 100644
--- a/docs/0.23/understanding-cli.html
+++ b/docs/0.23/understanding-cli.html
@@ -76,7 +76,7 @@
CLI Configs
When using react-native start, its platform derivatives, and react-native bundle you can use a file to define the CLI options used by React Native by default. If you create a file rn-cli.config.js in the root of your project, it will be evaluated and options for the commands will come from there.
You can see the options for the CLI config file inside the source code for Metro here, and here is a common rn-cli.config.js used for supporting TypeScript in React Native projects:
You can see the options for the CLI config on the metro website. Here's a common rn-cli.config.js used for supporting TypeScript in React Native projects:
module.exports = {
getTransformModulePath() {
return require.resolve('react-native-typescript-transformer');
diff --git a/docs/0.23/understanding-cli/index.html b/docs/0.23/understanding-cli/index.html
index 847be090818..4be9995fb86 100644
--- a/docs/0.23/understanding-cli/index.html
+++ b/docs/0.23/understanding-cli/index.html
@@ -76,7 +76,7 @@
CLI Configs
When using react-native start, its platform derivatives, and react-native bundle you can use a file to define the CLI options used by React Native by default. If you create a file rn-cli.config.js in the root of your project, it will be evaluated and options for the commands will come from there.
You can see the options for the CLI config file inside the source code for Metro here, and here is a common rn-cli.config.js used for supporting TypeScript in React Native projects:
You can see the options for the CLI config on the metro website. Here's a common rn-cli.config.js used for supporting TypeScript in React Native projects:
module.exports = {
getTransformModulePath() {
return require.resolve('react-native-typescript-transformer');
diff --git a/docs/0.24/debugging.html b/docs/0.24/debugging.html
index 71ac75912a7..5a1e0e70060 100644
--- a/docs/0.24/debugging.html
+++ b/docs/0.24/debugging.html
@@ -113,7 +113,7 @@ YellowBox.ignoreWarnings(['Warning: ...']);
Projects with Native Code Only
The remainder of this guide only applies to projects made with react-native init
- or to those made with Create React Native App which have since ejected. For
+ or to those made with expo init or Create React Native App which have since ejected. For
more information about ejecting, please see
the guide on
the Create React Native App repository.
@@ -126,11 +126,11 @@ YellowBox.ignoreWarnings(['Warning: ...']);
You may also access these through Debug → Open System Log... in the iOS Simulator or by running adb logcat *:S ReactNative:V ReactNativeJS:V in a terminal while an Android app is running on a device or emulator.
-If you're using Create React Native App, console logs already appear in the same terminal output as the packager.
+If you're using Create React Native App or Expo CLI, console logs already appear in the same terminal output as the packager.
Debugging on a device with Chrome Developer Tools
-If you're using Create React Native App, this is configured for you already.
+If you're using Create React Native App or Expo CLI, this is configured for you already.
On iOS devices, open the file RCTWebSocketExecutor.m and change "localhost" to the IP address of your computer, then select "Debug JS Remotely" from the Developer Menu.
On Android 5.0+ devices connected via USB, you can use the adb command line tool to setup port forwarding from the device to your computer:
Projects with Native Code Only
The remainder of this guide only applies to projects made with react-native init
- or to those made with Create React Native App which have since ejected. For
+ or to those made with expo init or Create React Native App which have since ejected. For
more information about ejecting, please see
the guide on
the Create React Native App repository.
@@ -126,11 +126,11 @@ YellowBox.ignoreWarnings(['Warning: ...']);
You may also access these through Debug → Open System Log... in the iOS Simulator or by running adb logcat *:S ReactNative:V ReactNativeJS:V in a terminal while an Android app is running on a device or emulator.
-If you're using Create React Native App, console logs already appear in the same terminal output as the packager.
+If you're using Create React Native App or Expo CLI, console logs already appear in the same terminal output as the packager.
Debugging on a device with Chrome Developer Tools
-If you're using Create React Native App, this is configured for you already.
+If you're using Create React Native App or Expo CLI, this is configured for you already.
On iOS devices, open the file RCTWebSocketExecutor.m and change "localhost" to the IP address of your computer, then select "Debug JS Remotely" from the Developer Menu.
On Android 5.0+ devices connected via USB, you can use the adb command line tool to setup port forwarding from the device to your computer:
Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.
2. Install the Android SDK
-Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.0 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.1 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".
-The SDK Manager can also be found within the Android Studio "Preferences" dialog, under Appearance & Behavior → System Settings → Android SDK.
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.0 (Oreo) entry, then make sure the following items are all checked:
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.1 (Oreo) entry, then make sure the following items are all checked:
-
-
Android SDK Platform 26
+Android SDK Platform 27Google APIs Intel x86 Atom_64 System Image
Add the following lines to your $HOME/.bash_profile config file:
export ANDROID_HOME=$HOME/Library/Android/sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
export ANDROID_HOME=$HOME/Android/Sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
diff --git a/docs/0.24/getting-started/index.html b/docs/0.24/getting-started/index.html index f8c9e2553db..e580fb2ce9e 100644 --- a/docs/0.24/getting-started/index.html +++ b/docs/0.24/getting-started/index.html @@ -260,7 +260,7 @@ npm start
Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.
2. Install the Android SDK
-Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.0 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.1 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".
-The SDK Manager can also be found within the Android Studio "Preferences" dialog, under Appearance & Behavior → System Settings → Android SDK.
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.0 (Oreo) entry, then make sure the following items are all checked:
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.1 (Oreo) entry, then make sure the following items are all checked:
-
-
Android SDK Platform 26
+Android SDK Platform 27Google APIs Intel x86 Atom_64 System Image
Add the following lines to your $HOME/.bash_profile config file:
export ANDROID_HOME=$HOME/Library/Android/sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
export ANDROID_HOME=$HOME/Android/Sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
diff --git a/docs/0.24/images.html b/docs/0.24/images.html index 19a04e76418..1bb7c6b77e7 100644 --- a/docs/0.24/images.html +++ b/docs/0.24/images.html @@ -77,7 +77,7 @@ var icon = this.props.activeNote that image sources required this way include size (width, height) info for the Image. If you need to scale the image dynamically (i.e. via flex), you may need to manually set
{ width: undefined, height: undefined }on the style attribute.Static Non-Image Resources
The
-requiresyntax described above can be used to statically include audio, video or document files in your project as well. Most common file types are supported including.mp3,.wav,.mp4,.mov,.htmlandYou can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
+You can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
A caveat is that videos must use absolute positioning instead of
flexGrow, since size info is not currently passed for non-image assets. This limitation doesn't occur for videos that are linked directly into Xcode or the Assets folder for Android.Images From Hybrid App's Resources
If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app.
diff --git a/docs/0.24/images/index.html b/docs/0.24/images/index.html index 19a04e76418..1bb7c6b77e7 100644 --- a/docs/0.24/images/index.html +++ b/docs/0.24/images/index.html @@ -77,7 +77,7 @@ var icon = this.props.activeNote that image sources required this way include size (width, height) info for the Image. If you need to scale the image dynamically (i.e. via flex), you may need to manually set
{ width: undefined, height: undefined }on the style attribute.Static Non-Image Resources
The
-requiresyntax described above can be used to statically include audio, video or document files in your project as well. Most common file types are supported including.mp3,.wav,.mp4,.mov,.htmlandYou can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
+You can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
A caveat is that videos must use absolute positioning instead of
flexGrow, since size info is not currently passed for non-image assets. This limitation doesn't occur for videos that are linked directly into Xcode or the Assets folder for Android.Images From Hybrid App's Resources
If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app.
diff --git a/docs/0.24/navigation.html b/docs/0.24/navigation.html index c5bda176085..ae75623611d 100644 --- a/docs/0.24/navigation.html +++ b/docs/0.24/navigation.html @@ -36,7 +36,7 @@
Navigating Between Screens
Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.
This guide covers the various navigation components available in React Native. If you are just getting started with navigation, you will probably want to use React Navigation. React Navigation provides an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android.
If you're only targeting iOS, you may want to also check out NavigatorIOS as a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native UINavigationController class. This component will not work on Android, however.
If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms:react-native-navigation.
+If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: react-native-navigation.
React Navigation
The community solution to navigation is a standalone library that allows developers to set up the screens of an app with just a few lines of code.
The first step is to install in your project:
diff --git a/docs/0.24/navigation/index.html b/docs/0.24/navigation/index.html index c5bda176085..ae75623611d 100644 --- a/docs/0.24/navigation/index.html +++ b/docs/0.24/navigation/index.html @@ -36,7 +36,7 @@Navigating Between Screens
Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.
This guide covers the various navigation components available in React Native. If you are just getting started with navigation, you will probably want to use React Navigation. React Navigation provides an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android.
If you're only targeting iOS, you may want to also check out NavigatorIOS as a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native UINavigationController class. This component will not work on Android, however.
If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms:react-native-navigation.
+If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: react-native-navigation.
React Navigation
The community solution to navigation is a standalone library that allows developers to set up the screens of an app with just a few lines of code.
The first step is to install in your project:
diff --git a/docs/0.24/running-on-device.html b/docs/0.24/running-on-device.html index 716cede9b10..00e74ea460c 100644 --- a/docs/0.24/running-on-device.html +++ b/docs/0.24/running-on-device.html @@ -102,7 +102,7 @@ }It's always a good idea to test your app on an actual device before releasing it to your users. This document will guide you through the necessary steps to run your React Native app on a device and to get it ready for production.
-If you used Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
+If you used Expo CLI or Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
- @@ -125,7 +125,7 @@ Windows
A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Create React Native App, which will allow you to run your app using the Expo client app.
+A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app.
1. Plug in your device via USB
Connect your iOS device to your Mac using a USB to Lightning cable. Navigate to the ios folder in your project, then open the .xcodeproj file, or if you are using CocoaPods open .xcworkspace, within it using Xcode.
It's always a good idea to test your app on an actual device before releasing it to your users. This document will guide you through the necessary steps to run your React Native app on a device and to get it ready for production.
-If you used Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
+If you used Expo CLI or Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
- @@ -125,7 +125,7 @@ Windows
A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Create React Native App, which will allow you to run your app using the Expo client app.
+A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app.
1. Plug in your device via USB
Connect your iOS device to your Mac using a USB to Lightning cable. Navigate to the ios folder in your project, then open the .xcodeproj file, or if you are using CocoaPods open .xcworkspace, within it using Xcode.
-Note: Make sure gradle.properties does not include org.gradle.configureondemand=true as that will make the release build skip bundling JS and assets into the APK.
The generated APK can be found under android/app/build/outputs/apk/app-release.apk, and is ready to be distributed.
The generated APK can be found under android/app/build/outputs/apk/release/app-release.apk, and is ready to be distributed.
Testing the release build of your app
Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using:
$ react-native run-android --variant=release
diff --git a/docs/0.24/signed-apk-android/index.html b/docs/0.24/signed-apk-android/index.html
index 3ade1f179ca..65231438b3e 100644
--- a/docs/0.24/signed-apk-android/index.html
+++ b/docs/0.24/signed-apk-android/index.html
@@ -102,7 +102,7 @@ $ ./gradlew assembleRelease
Note: Make sure gradle.properties does not include org.gradle.configureondemand=true as that will make the release build skip bundling JS and assets into the APK.
-The generated APK can be found under android/app/build/outputs/apk/app-release.apk, and is ready to be distributed.
+The generated APK can be found under android/app/build/outputs/apk/release/app-release.apk, and is ready to be distributed.
Testing the release build of your app
Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using:
$ react-native run-android --variant=release
diff --git a/docs/0.24/understanding-cli.html b/docs/0.24/understanding-cli.html
index 5022a8a68e0..07047e393de 100644
--- a/docs/0.24/understanding-cli.html
+++ b/docs/0.24/understanding-cli.html
@@ -76,7 +76,7 @@
CLI Configs
When using react-native start, its platform derivatives, and react-native bundle you can use a file to define the CLI options used by React Native by default. If you create a file rn-cli.config.js in the root of your project, it will be evaluated and options for the commands will come from there.
You can see the options for the CLI config file inside the source code for Metro here, and here is a common rn-cli.config.js used for supporting TypeScript in React Native projects:
You can see the options for the CLI config on the metro website. Here's a common rn-cli.config.js used for supporting TypeScript in React Native projects:
module.exports = {
getTransformModulePath() {
return require.resolve('react-native-typescript-transformer');
diff --git a/docs/0.24/understanding-cli/index.html b/docs/0.24/understanding-cli/index.html
index 5022a8a68e0..07047e393de 100644
--- a/docs/0.24/understanding-cli/index.html
+++ b/docs/0.24/understanding-cli/index.html
@@ -76,7 +76,7 @@
CLI Configs
When using react-native start, its platform derivatives, and react-native bundle you can use a file to define the CLI options used by React Native by default. If you create a file rn-cli.config.js in the root of your project, it will be evaluated and options for the commands will come from there.
You can see the options for the CLI config file inside the source code for Metro here, and here is a common rn-cli.config.js used for supporting TypeScript in React Native projects:
You can see the options for the CLI config on the metro website. Here's a common rn-cli.config.js used for supporting TypeScript in React Native projects:
module.exports = {
getTransformModulePath() {
return require.resolve('react-native-typescript-transformer');
diff --git a/docs/0.25/debugging.html b/docs/0.25/debugging.html
index 479c34f1528..0d5bc181ea8 100644
--- a/docs/0.25/debugging.html
+++ b/docs/0.25/debugging.html
@@ -113,7 +113,7 @@ YellowBox.ignoreWarnings(['Warning: ...']);
Projects with Native Code Only
The remainder of this guide only applies to projects made with react-native init
- or to those made with Create React Native App which have since ejected. For
+ or to those made with expo init or Create React Native App which have since ejected. For
more information about ejecting, please see
the guide on
the Create React Native App repository.
@@ -126,11 +126,11 @@ YellowBox.ignoreWarnings(['Warning: ...']);
You may also access these through Debug → Open System Log... in the iOS Simulator or by running adb logcat *:S ReactNative:V ReactNativeJS:V in a terminal while an Android app is running on a device or emulator.
-If you're using Create React Native App, console logs already appear in the same terminal output as the packager.
+If you're using Create React Native App or Expo CLI, console logs already appear in the same terminal output as the packager.
Debugging on a device with Chrome Developer Tools
-If you're using Create React Native App, this is configured for you already.
+If you're using Create React Native App or Expo CLI, this is configured for you already.
On iOS devices, open the file RCTWebSocketExecutor.m and change "localhost" to the IP address of your computer, then select "Debug JS Remotely" from the Developer Menu.
On Android 5.0+ devices connected via USB, you can use the adb command line tool to setup port forwarding from the device to your computer:
Projects with Native Code Only
The remainder of this guide only applies to projects made with react-native init
- or to those made with Create React Native App which have since ejected. For
+ or to those made with expo init or Create React Native App which have since ejected. For
more information about ejecting, please see
the guide on
the Create React Native App repository.
@@ -126,11 +126,11 @@ YellowBox.ignoreWarnings(['Warning: ...']);
You may also access these through Debug → Open System Log... in the iOS Simulator or by running adb logcat *:S ReactNative:V ReactNativeJS:V in a terminal while an Android app is running on a device or emulator.
-If you're using Create React Native App, console logs already appear in the same terminal output as the packager.
+If you're using Create React Native App or Expo CLI, console logs already appear in the same terminal output as the packager.
Debugging on a device with Chrome Developer Tools
-If you're using Create React Native App, this is configured for you already.
+If you're using Create React Native App or Expo CLI, this is configured for you already.
On iOS devices, open the file RCTWebSocketExecutor.m and change "localhost" to the IP address of your computer, then select "Debug JS Remotely" from the Developer Menu.
On Android 5.0+ devices connected via USB, you can use the adb command line tool to setup port forwarding from the device to your computer:
Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.
2. Install the Android SDK
-Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.0 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.1 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".
-The SDK Manager can also be found within the Android Studio "Preferences" dialog, under Appearance & Behavior → System Settings → Android SDK.
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.0 (Oreo) entry, then make sure the following items are all checked:
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.1 (Oreo) entry, then make sure the following items are all checked:
-
-
Android SDK Platform 26
+Android SDK Platform 27Google APIs Intel x86 Atom_64 System Image
Add the following lines to your $HOME/.bash_profile config file:
export ANDROID_HOME=$HOME/Library/Android/sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
export ANDROID_HOME=$HOME/Android/Sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
diff --git a/docs/0.25/getting-started/index.html b/docs/0.25/getting-started/index.html index 1554ce05096..ff2f429c3e7 100644 --- a/docs/0.25/getting-started/index.html +++ b/docs/0.25/getting-started/index.html @@ -260,7 +260,7 @@ npm start
Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.
2. Install the Android SDK
-Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.0 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.1 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".
-The SDK Manager can also be found within the Android Studio "Preferences" dialog, under Appearance & Behavior → System Settings → Android SDK.
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.0 (Oreo) entry, then make sure the following items are all checked:
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.1 (Oreo) entry, then make sure the following items are all checked:
-
-
Android SDK Platform 26
+Android SDK Platform 27Google APIs Intel x86 Atom_64 System Image
Add the following lines to your $HOME/.bash_profile config file:
export ANDROID_HOME=$HOME/Library/Android/sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
export ANDROID_HOME=$HOME/Android/Sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
diff --git a/docs/0.25/images.html b/docs/0.25/images.html index dc32f20871f..78790fe26ec 100644 --- a/docs/0.25/images.html +++ b/docs/0.25/images.html @@ -77,7 +77,7 @@ var icon = this.props.activeNote that image sources required this way include size (width, height) info for the Image. If you need to scale the image dynamically (i.e. via flex), you may need to manually set
{ width: undefined, height: undefined }on the style attribute.Static Non-Image Resources
The
-requiresyntax described above can be used to statically include audio, video or document files in your project as well. Most common file types are supported including.mp3,.wav,.mp4,.mov,.htmlandYou can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
+You can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
A caveat is that videos must use absolute positioning instead of
flexGrow, since size info is not currently passed for non-image assets. This limitation doesn't occur for videos that are linked directly into Xcode or the Assets folder for Android.Images From Hybrid App's Resources
If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app.
diff --git a/docs/0.25/images/index.html b/docs/0.25/images/index.html index dc32f20871f..78790fe26ec 100644 --- a/docs/0.25/images/index.html +++ b/docs/0.25/images/index.html @@ -77,7 +77,7 @@ var icon = this.props.activeNote that image sources required this way include size (width, height) info for the Image. If you need to scale the image dynamically (i.e. via flex), you may need to manually set
{ width: undefined, height: undefined }on the style attribute.Static Non-Image Resources
The
-requiresyntax described above can be used to statically include audio, video or document files in your project as well. Most common file types are supported including.mp3,.wav,.mp4,.mov,.htmlandYou can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
+You can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
A caveat is that videos must use absolute positioning instead of
flexGrow, since size info is not currently passed for non-image assets. This limitation doesn't occur for videos that are linked directly into Xcode or the Assets folder for Android.Images From Hybrid App's Resources
If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app.
diff --git a/docs/0.25/navigation.html b/docs/0.25/navigation.html index a588688c25d..493eae43c76 100644 --- a/docs/0.25/navigation.html +++ b/docs/0.25/navigation.html @@ -36,7 +36,7 @@
Navigating Between Screens
Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.
This guide covers the various navigation components available in React Native. If you are just getting started with navigation, you will probably want to use React Navigation. React Navigation provides an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android.
If you're only targeting iOS, you may want to also check out NavigatorIOS as a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native UINavigationController class. This component will not work on Android, however.
If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms:react-native-navigation.
+If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: react-native-navigation.
React Navigation
The community solution to navigation is a standalone library that allows developers to set up the screens of an app with just a few lines of code.
The first step is to install in your project:
diff --git a/docs/0.25/navigation/index.html b/docs/0.25/navigation/index.html index a588688c25d..493eae43c76 100644 --- a/docs/0.25/navigation/index.html +++ b/docs/0.25/navigation/index.html @@ -36,7 +36,7 @@Navigating Between Screens
Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.
This guide covers the various navigation components available in React Native. If you are just getting started with navigation, you will probably want to use React Navigation. React Navigation provides an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android.
If you're only targeting iOS, you may want to also check out NavigatorIOS as a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native UINavigationController class. This component will not work on Android, however.
If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms:react-native-navigation.
+If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: react-native-navigation.
React Navigation
The community solution to navigation is a standalone library that allows developers to set up the screens of an app with just a few lines of code.
The first step is to install in your project:
diff --git a/docs/0.25/running-on-device.html b/docs/0.25/running-on-device.html index 495dff8a6da..c94c55327ff 100644 --- a/docs/0.25/running-on-device.html +++ b/docs/0.25/running-on-device.html @@ -102,7 +102,7 @@ }It's always a good idea to test your app on an actual device before releasing it to your users. This document will guide you through the necessary steps to run your React Native app on a device and to get it ready for production.
-If you used Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
+If you used Expo CLI or Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
- @@ -125,7 +125,7 @@ Windows
A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Create React Native App, which will allow you to run your app using the Expo client app.
+A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app.
1. Plug in your device via USB
Connect your iOS device to your Mac using a USB to Lightning cable. Navigate to the ios folder in your project, then open the .xcodeproj file, or if you are using CocoaPods open .xcworkspace, within it using Xcode.
It's always a good idea to test your app on an actual device before releasing it to your users. This document will guide you through the necessary steps to run your React Native app on a device and to get it ready for production.
-If you used Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
+If you used Expo CLI or Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
- @@ -125,7 +125,7 @@ Windows
A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Create React Native App, which will allow you to run your app using the Expo client app.
+A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app.
1. Plug in your device via USB
Connect your iOS device to your Mac using a USB to Lightning cable. Navigate to the ios folder in your project, then open the .xcodeproj file, or if you are using CocoaPods open .xcworkspace, within it using Xcode.
-Note: Make sure gradle.properties does not include org.gradle.configureondemand=true as that will make the release build skip bundling JS and assets into the APK.
The generated APK can be found under android/app/build/outputs/apk/app-release.apk, and is ready to be distributed.
The generated APK can be found under android/app/build/outputs/apk/release/app-release.apk, and is ready to be distributed.
Testing the release build of your app
Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using:
$ react-native run-android --variant=release
diff --git a/docs/0.25/signed-apk-android/index.html b/docs/0.25/signed-apk-android/index.html
index 7d6190b8797..e74a9132ad8 100644
--- a/docs/0.25/signed-apk-android/index.html
+++ b/docs/0.25/signed-apk-android/index.html
@@ -102,7 +102,7 @@ $ ./gradlew assembleRelease
Note: Make sure gradle.properties does not include org.gradle.configureondemand=true as that will make the release build skip bundling JS and assets into the APK.
-The generated APK can be found under android/app/build/outputs/apk/app-release.apk, and is ready to be distributed.
+The generated APK can be found under android/app/build/outputs/apk/release/app-release.apk, and is ready to be distributed.
Testing the release build of your app
Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using:
$ react-native run-android --variant=release
diff --git a/docs/0.25/understanding-cli.html b/docs/0.25/understanding-cli.html
index 5ddeddfe7b3..92fc1d570c6 100644
--- a/docs/0.25/understanding-cli.html
+++ b/docs/0.25/understanding-cli.html
@@ -76,7 +76,7 @@
CLI Configs
When using react-native start, its platform derivatives, and react-native bundle you can use a file to define the CLI options used by React Native by default. If you create a file rn-cli.config.js in the root of your project, it will be evaluated and options for the commands will come from there.
You can see the options for the CLI config file inside the source code for Metro here, and here is a common rn-cli.config.js used for supporting TypeScript in React Native projects:
You can see the options for the CLI config on the metro website. Here's a common rn-cli.config.js used for supporting TypeScript in React Native projects:
module.exports = {
getTransformModulePath() {
return require.resolve('react-native-typescript-transformer');
diff --git a/docs/0.25/understanding-cli/index.html b/docs/0.25/understanding-cli/index.html
index 5ddeddfe7b3..92fc1d570c6 100644
--- a/docs/0.25/understanding-cli/index.html
+++ b/docs/0.25/understanding-cli/index.html
@@ -76,7 +76,7 @@
CLI Configs
When using react-native start, its platform derivatives, and react-native bundle you can use a file to define the CLI options used by React Native by default. If you create a file rn-cli.config.js in the root of your project, it will be evaluated and options for the commands will come from there.
You can see the options for the CLI config file inside the source code for Metro here, and here is a common rn-cli.config.js used for supporting TypeScript in React Native projects:
You can see the options for the CLI config on the metro website. Here's a common rn-cli.config.js used for supporting TypeScript in React Native projects:
module.exports = {
getTransformModulePath() {
return require.resolve('react-native-typescript-transformer');
diff --git a/docs/0.26/debugging.html b/docs/0.26/debugging.html
index 143a215f8c5..e4fa61a7aae 100644
--- a/docs/0.26/debugging.html
+++ b/docs/0.26/debugging.html
@@ -113,7 +113,7 @@ YellowBox.ignoreWarnings(['Warning: ...']);
Projects with Native Code Only
The remainder of this guide only applies to projects made with react-native init
- or to those made with Create React Native App which have since ejected. For
+ or to those made with expo init or Create React Native App which have since ejected. For
more information about ejecting, please see
the guide on
the Create React Native App repository.
@@ -126,11 +126,11 @@ YellowBox.ignoreWarnings(['Warning: ...']);
You may also access these through Debug → Open System Log... in the iOS Simulator or by running adb logcat *:S ReactNative:V ReactNativeJS:V in a terminal while an Android app is running on a device or emulator.
-If you're using Create React Native App, console logs already appear in the same terminal output as the packager.
+If you're using Create React Native App or Expo CLI, console logs already appear in the same terminal output as the packager.
Debugging on a device with Chrome Developer Tools
-If you're using Create React Native App, this is configured for you already.
+If you're using Create React Native App or Expo CLI, this is configured for you already.
On iOS devices, open the file RCTWebSocketExecutor.m and change "localhost" to the IP address of your computer, then select "Debug JS Remotely" from the Developer Menu.
On Android 5.0+ devices connected via USB, you can use the adb command line tool to setup port forwarding from the device to your computer:
Projects with Native Code Only
The remainder of this guide only applies to projects made with react-native init
- or to those made with Create React Native App which have since ejected. For
+ or to those made with expo init or Create React Native App which have since ejected. For
more information about ejecting, please see
the guide on
the Create React Native App repository.
@@ -126,11 +126,11 @@ YellowBox.ignoreWarnings(['Warning: ...']);
You may also access these through Debug → Open System Log... in the iOS Simulator or by running adb logcat *:S ReactNative:V ReactNativeJS:V in a terminal while an Android app is running on a device or emulator.
-If you're using Create React Native App, console logs already appear in the same terminal output as the packager.
+If you're using Create React Native App or Expo CLI, console logs already appear in the same terminal output as the packager.
Debugging on a device with Chrome Developer Tools
-If you're using Create React Native App, this is configured for you already.
+If you're using Create React Native App or Expo CLI, this is configured for you already.
On iOS devices, open the file RCTWebSocketExecutor.m and change "localhost" to the IP address of your computer, then select "Debug JS Remotely" from the Developer Menu.
On Android 5.0+ devices connected via USB, you can use the adb command line tool to setup port forwarding from the device to your computer:
Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.
2. Install the Android SDK
-Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.0 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.1 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".
-The SDK Manager can also be found within the Android Studio "Preferences" dialog, under Appearance & Behavior → System Settings → Android SDK.
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.0 (Oreo) entry, then make sure the following items are all checked:
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.1 (Oreo) entry, then make sure the following items are all checked:
-
-
Android SDK Platform 26
+Android SDK Platform 27Google APIs Intel x86 Atom_64 System Image
Add the following lines to your $HOME/.bash_profile config file:
export ANDROID_HOME=$HOME/Library/Android/sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
export ANDROID_HOME=$HOME/Android/Sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
diff --git a/docs/0.26/getting-started/index.html b/docs/0.26/getting-started/index.html index db91cd088e0..31a0f671e4f 100644 --- a/docs/0.26/getting-started/index.html +++ b/docs/0.26/getting-started/index.html @@ -260,7 +260,7 @@ npm start
Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.
2. Install the Android SDK
-Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.0 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.1 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".
-The SDK Manager can also be found within the Android Studio "Preferences" dialog, under Appearance & Behavior → System Settings → Android SDK.
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.0 (Oreo) entry, then make sure the following items are all checked:
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.1 (Oreo) entry, then make sure the following items are all checked:
-
-
Android SDK Platform 26
+Android SDK Platform 27Google APIs Intel x86 Atom_64 System Image
Add the following lines to your $HOME/.bash_profile config file:
export ANDROID_HOME=$HOME/Library/Android/sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
export ANDROID_HOME=$HOME/Android/Sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
diff --git a/docs/0.26/images.html b/docs/0.26/images.html index 3a9ba619203..9c4d38314ac 100644 --- a/docs/0.26/images.html +++ b/docs/0.26/images.html @@ -77,7 +77,7 @@ var icon = this.props.activeNote that image sources required this way include size (width, height) info for the Image. If you need to scale the image dynamically (i.e. via flex), you may need to manually set
{ width: undefined, height: undefined }on the style attribute.Static Non-Image Resources
The
-requiresyntax described above can be used to statically include audio, video or document files in your project as well. Most common file types are supported including.mp3,.wav,.mp4,.mov,.htmlandYou can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
+You can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
A caveat is that videos must use absolute positioning instead of
flexGrow, since size info is not currently passed for non-image assets. This limitation doesn't occur for videos that are linked directly into Xcode or the Assets folder for Android.Images From Hybrid App's Resources
If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app.
diff --git a/docs/0.26/images/index.html b/docs/0.26/images/index.html index 3a9ba619203..9c4d38314ac 100644 --- a/docs/0.26/images/index.html +++ b/docs/0.26/images/index.html @@ -77,7 +77,7 @@ var icon = this.props.activeNote that image sources required this way include size (width, height) info for the Image. If you need to scale the image dynamically (i.e. via flex), you may need to manually set
{ width: undefined, height: undefined }on the style attribute.Static Non-Image Resources
The
-requiresyntax described above can be used to statically include audio, video or document files in your project as well. Most common file types are supported including.mp3,.wav,.mp4,.mov,.htmlandYou can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
+You can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
A caveat is that videos must use absolute positioning instead of
flexGrow, since size info is not currently passed for non-image assets. This limitation doesn't occur for videos that are linked directly into Xcode or the Assets folder for Android.Images From Hybrid App's Resources
If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app.
diff --git a/docs/0.26/navigation.html b/docs/0.26/navigation.html index 11f9ead03f9..d4ab428235e 100644 --- a/docs/0.26/navigation.html +++ b/docs/0.26/navigation.html @@ -36,7 +36,7 @@
Navigating Between Screens
Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.
This guide covers the various navigation components available in React Native. If you are just getting started with navigation, you will probably want to use React Navigation. React Navigation provides an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android.
If you're only targeting iOS, you may want to also check out NavigatorIOS as a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native UINavigationController class. This component will not work on Android, however.
If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms:react-native-navigation.
+If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: react-native-navigation.
React Navigation
The community solution to navigation is a standalone library that allows developers to set up the screens of an app with just a few lines of code.
The first step is to install in your project:
diff --git a/docs/0.26/navigation/index.html b/docs/0.26/navigation/index.html index 11f9ead03f9..d4ab428235e 100644 --- a/docs/0.26/navigation/index.html +++ b/docs/0.26/navigation/index.html @@ -36,7 +36,7 @@Navigating Between Screens
Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.
This guide covers the various navigation components available in React Native. If you are just getting started with navigation, you will probably want to use React Navigation. React Navigation provides an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android.
If you're only targeting iOS, you may want to also check out NavigatorIOS as a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native UINavigationController class. This component will not work on Android, however.
If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms:react-native-navigation.
+If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: react-native-navigation.
React Navigation
The community solution to navigation is a standalone library that allows developers to set up the screens of an app with just a few lines of code.
The first step is to install in your project:
diff --git a/docs/0.26/running-on-device.html b/docs/0.26/running-on-device.html index ac03bcd0840..e3d02057e7b 100644 --- a/docs/0.26/running-on-device.html +++ b/docs/0.26/running-on-device.html @@ -102,7 +102,7 @@ }It's always a good idea to test your app on an actual device before releasing it to your users. This document will guide you through the necessary steps to run your React Native app on a device and to get it ready for production.
-If you used Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
+If you used Expo CLI or Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
- @@ -125,7 +125,7 @@ Windows
A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Create React Native App, which will allow you to run your app using the Expo client app.
+A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app.
1. Plug in your device via USB
Connect your iOS device to your Mac using a USB to Lightning cable. Navigate to the ios folder in your project, then open the .xcodeproj file, or if you are using CocoaPods open .xcworkspace, within it using Xcode.
It's always a good idea to test your app on an actual device before releasing it to your users. This document will guide you through the necessary steps to run your React Native app on a device and to get it ready for production.
-If you used Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
+If you used Expo CLI or Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
- @@ -125,7 +125,7 @@ Windows
A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Create React Native App, which will allow you to run your app using the Expo client app.
+A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app.
1. Plug in your device via USB
Connect your iOS device to your Mac using a USB to Lightning cable. Navigate to the ios folder in your project, then open the .xcodeproj file, or if you are using CocoaPods open .xcworkspace, within it using Xcode.
-Note: Make sure gradle.properties does not include org.gradle.configureondemand=true as that will make the release build skip bundling JS and assets into the APK.
The generated APK can be found under android/app/build/outputs/apk/app-release.apk, and is ready to be distributed.
The generated APK can be found under android/app/build/outputs/apk/release/app-release.apk, and is ready to be distributed.
Testing the release build of your app
Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using:
$ react-native run-android --variant=release
diff --git a/docs/0.26/signed-apk-android/index.html b/docs/0.26/signed-apk-android/index.html
index 73b4a4c4673..d4680b99a43 100644
--- a/docs/0.26/signed-apk-android/index.html
+++ b/docs/0.26/signed-apk-android/index.html
@@ -102,7 +102,7 @@ $ ./gradlew assembleRelease
Note: Make sure gradle.properties does not include org.gradle.configureondemand=true as that will make the release build skip bundling JS and assets into the APK.
-The generated APK can be found under android/app/build/outputs/apk/app-release.apk, and is ready to be distributed.
+The generated APK can be found under android/app/build/outputs/apk/release/app-release.apk, and is ready to be distributed.
Testing the release build of your app
Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using:
$ react-native run-android --variant=release
diff --git a/docs/0.26/understanding-cli.html b/docs/0.26/understanding-cli.html
index 27b2dc95a2e..83e1bfcda0c 100644
--- a/docs/0.26/understanding-cli.html
+++ b/docs/0.26/understanding-cli.html
@@ -76,7 +76,7 @@
CLI Configs
When using react-native start, its platform derivatives, and react-native bundle you can use a file to define the CLI options used by React Native by default. If you create a file rn-cli.config.js in the root of your project, it will be evaluated and options for the commands will come from there.
You can see the options for the CLI config file inside the source code for Metro here, and here is a common rn-cli.config.js used for supporting TypeScript in React Native projects:
You can see the options for the CLI config on the metro website. Here's a common rn-cli.config.js used for supporting TypeScript in React Native projects:
module.exports = {
getTransformModulePath() {
return require.resolve('react-native-typescript-transformer');
diff --git a/docs/0.26/understanding-cli/index.html b/docs/0.26/understanding-cli/index.html
index 27b2dc95a2e..83e1bfcda0c 100644
--- a/docs/0.26/understanding-cli/index.html
+++ b/docs/0.26/understanding-cli/index.html
@@ -76,7 +76,7 @@
CLI Configs
When using react-native start, its platform derivatives, and react-native bundle you can use a file to define the CLI options used by React Native by default. If you create a file rn-cli.config.js in the root of your project, it will be evaluated and options for the commands will come from there.
You can see the options for the CLI config file inside the source code for Metro here, and here is a common rn-cli.config.js used for supporting TypeScript in React Native projects:
You can see the options for the CLI config on the metro website. Here's a common rn-cli.config.js used for supporting TypeScript in React Native projects:
module.exports = {
getTransformModulePath() {
return require.resolve('react-native-typescript-transformer');
diff --git a/docs/0.27/debugging.html b/docs/0.27/debugging.html
index bbd632e1f5e..54d7f8e594f 100644
--- a/docs/0.27/debugging.html
+++ b/docs/0.27/debugging.html
@@ -113,7 +113,7 @@ YellowBox.ignoreWarnings(['Warning: ...']);
Projects with Native Code Only
The remainder of this guide only applies to projects made with react-native init
- or to those made with Create React Native App which have since ejected. For
+ or to those made with expo init or Create React Native App which have since ejected. For
more information about ejecting, please see
the guide on
the Create React Native App repository.
@@ -126,11 +126,11 @@ YellowBox.ignoreWarnings(['Warning: ...']);
You may also access these through Debug → Open System Log... in the iOS Simulator or by running adb logcat *:S ReactNative:V ReactNativeJS:V in a terminal while an Android app is running on a device or emulator.
-If you're using Create React Native App, console logs already appear in the same terminal output as the packager.
+If you're using Create React Native App or Expo CLI, console logs already appear in the same terminal output as the packager.
Debugging on a device with Chrome Developer Tools
-If you're using Create React Native App, this is configured for you already.
+If you're using Create React Native App or Expo CLI, this is configured for you already.
On iOS devices, open the file RCTWebSocketExecutor.m and change "localhost" to the IP address of your computer, then select "Debug JS Remotely" from the Developer Menu.
On Android 5.0+ devices connected via USB, you can use the adb command line tool to setup port forwarding from the device to your computer:
Projects with Native Code Only
The remainder of this guide only applies to projects made with react-native init
- or to those made with Create React Native App which have since ejected. For
+ or to those made with expo init or Create React Native App which have since ejected. For
more information about ejecting, please see
the guide on
the Create React Native App repository.
@@ -126,11 +126,11 @@ YellowBox.ignoreWarnings(['Warning: ...']);
You may also access these through Debug → Open System Log... in the iOS Simulator or by running adb logcat *:S ReactNative:V ReactNativeJS:V in a terminal while an Android app is running on a device or emulator.
-If you're using Create React Native App, console logs already appear in the same terminal output as the packager.
+If you're using Create React Native App or Expo CLI, console logs already appear in the same terminal output as the packager.
Debugging on a device with Chrome Developer Tools
-If you're using Create React Native App, this is configured for you already.
+If you're using Create React Native App or Expo CLI, this is configured for you already.
On iOS devices, open the file RCTWebSocketExecutor.m and change "localhost" to the IP address of your computer, then select "Debug JS Remotely" from the Developer Menu.
On Android 5.0+ devices connected via USB, you can use the adb command line tool to setup port forwarding from the device to your computer:
Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.
2. Install the Android SDK
-Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.0 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.1 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".
-The SDK Manager can also be found within the Android Studio "Preferences" dialog, under Appearance & Behavior → System Settings → Android SDK.
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.0 (Oreo) entry, then make sure the following items are all checked:
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.1 (Oreo) entry, then make sure the following items are all checked:
-
-
Android SDK Platform 26
+Android SDK Platform 27Google APIs Intel x86 Atom_64 System Image
Add the following lines to your $HOME/.bash_profile config file:
export ANDROID_HOME=$HOME/Library/Android/sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
export ANDROID_HOME=$HOME/Android/Sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
diff --git a/docs/0.27/getting-started/index.html b/docs/0.27/getting-started/index.html index 208f1360126..75559191f29 100644 --- a/docs/0.27/getting-started/index.html +++ b/docs/0.27/getting-started/index.html @@ -260,7 +260,7 @@ npm start
Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.
2. Install the Android SDK
-Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.0 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.1 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".
-The SDK Manager can also be found within the Android Studio "Preferences" dialog, under Appearance & Behavior → System Settings → Android SDK.
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.0 (Oreo) entry, then make sure the following items are all checked:
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.1 (Oreo) entry, then make sure the following items are all checked:
-
-
Android SDK Platform 26
+Android SDK Platform 27Google APIs Intel x86 Atom_64 System Image
Add the following lines to your $HOME/.bash_profile config file:
export ANDROID_HOME=$HOME/Library/Android/sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
export ANDROID_HOME=$HOME/Android/Sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
diff --git a/docs/0.27/images.html b/docs/0.27/images.html index c842302e349..ce729db34e9 100644 --- a/docs/0.27/images.html +++ b/docs/0.27/images.html @@ -77,7 +77,7 @@ var icon = this.props.activeNote that image sources required this way include size (width, height) info for the Image. If you need to scale the image dynamically (i.e. via flex), you may need to manually set
{ width: undefined, height: undefined }on the style attribute.Static Non-Image Resources
The
-requiresyntax described above can be used to statically include audio, video or document files in your project as well. Most common file types are supported including.mp3,.wav,.mp4,.mov,.htmlandYou can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
+You can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
A caveat is that videos must use absolute positioning instead of
flexGrow, since size info is not currently passed for non-image assets. This limitation doesn't occur for videos that are linked directly into Xcode or the Assets folder for Android.Images From Hybrid App's Resources
If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app.
diff --git a/docs/0.27/images/index.html b/docs/0.27/images/index.html index c842302e349..ce729db34e9 100644 --- a/docs/0.27/images/index.html +++ b/docs/0.27/images/index.html @@ -77,7 +77,7 @@ var icon = this.props.activeNote that image sources required this way include size (width, height) info for the Image. If you need to scale the image dynamically (i.e. via flex), you may need to manually set
{ width: undefined, height: undefined }on the style attribute.Static Non-Image Resources
The
-requiresyntax described above can be used to statically include audio, video or document files in your project as well. Most common file types are supported including.mp3,.wav,.mp4,.mov,.htmlandYou can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
+You can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
A caveat is that videos must use absolute positioning instead of
flexGrow, since size info is not currently passed for non-image assets. This limitation doesn't occur for videos that are linked directly into Xcode or the Assets folder for Android.Images From Hybrid App's Resources
If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app.
diff --git a/docs/0.27/navigation.html b/docs/0.27/navigation.html index 614a93ccbac..8fb616fd96d 100644 --- a/docs/0.27/navigation.html +++ b/docs/0.27/navigation.html @@ -36,7 +36,7 @@
Navigating Between Screens
Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.
This guide covers the various navigation components available in React Native. If you are just getting started with navigation, you will probably want to use React Navigation. React Navigation provides an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android.
If you're only targeting iOS, you may want to also check out NavigatorIOS as a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native UINavigationController class. This component will not work on Android, however.
If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms:react-native-navigation.
+If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: react-native-navigation.
React Navigation
The community solution to navigation is a standalone library that allows developers to set up the screens of an app with just a few lines of code.
The first step is to install in your project:
diff --git a/docs/0.27/navigation/index.html b/docs/0.27/navigation/index.html index 614a93ccbac..8fb616fd96d 100644 --- a/docs/0.27/navigation/index.html +++ b/docs/0.27/navigation/index.html @@ -36,7 +36,7 @@Navigating Between Screens
Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.
This guide covers the various navigation components available in React Native. If you are just getting started with navigation, you will probably want to use React Navigation. React Navigation provides an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android.
If you're only targeting iOS, you may want to also check out NavigatorIOS as a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native UINavigationController class. This component will not work on Android, however.
If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms:react-native-navigation.
+If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: react-native-navigation.
React Navigation
The community solution to navigation is a standalone library that allows developers to set up the screens of an app with just a few lines of code.
The first step is to install in your project:
diff --git a/docs/0.27/running-on-device.html b/docs/0.27/running-on-device.html index edcbe80b622..9d847b8241a 100644 --- a/docs/0.27/running-on-device.html +++ b/docs/0.27/running-on-device.html @@ -102,7 +102,7 @@ }It's always a good idea to test your app on an actual device before releasing it to your users. This document will guide you through the necessary steps to run your React Native app on a device and to get it ready for production.
-If you used Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
+If you used Expo CLI or Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
- @@ -125,7 +125,7 @@ Windows
A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Create React Native App, which will allow you to run your app using the Expo client app.
+A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app.
1. Plug in your device via USB
Connect your iOS device to your Mac using a USB to Lightning cable. Navigate to the ios folder in your project, then open the .xcodeproj file, or if you are using CocoaPods open .xcworkspace, within it using Xcode.
It's always a good idea to test your app on an actual device before releasing it to your users. This document will guide you through the necessary steps to run your React Native app on a device and to get it ready for production.
-If you used Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
+If you used Expo CLI or Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
- @@ -125,7 +125,7 @@ Windows
A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Create React Native App, which will allow you to run your app using the Expo client app.
+A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app.
1. Plug in your device via USB
Connect your iOS device to your Mac using a USB to Lightning cable. Navigate to the ios folder in your project, then open the .xcodeproj file, or if you are using CocoaPods open .xcworkspace, within it using Xcode.
-Note: Make sure gradle.properties does not include org.gradle.configureondemand=true as that will make the release build skip bundling JS and assets into the APK.
The generated APK can be found under android/app/build/outputs/apk/app-release.apk, and is ready to be distributed.
The generated APK can be found under android/app/build/outputs/apk/release/app-release.apk, and is ready to be distributed.
Testing the release build of your app
Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using:
$ react-native run-android --variant=release
diff --git a/docs/0.27/signed-apk-android/index.html b/docs/0.27/signed-apk-android/index.html
index 98069f9084a..5f7d8c43929 100644
--- a/docs/0.27/signed-apk-android/index.html
+++ b/docs/0.27/signed-apk-android/index.html
@@ -102,7 +102,7 @@ $ ./gradlew assembleRelease
Note: Make sure gradle.properties does not include org.gradle.configureondemand=true as that will make the release build skip bundling JS and assets into the APK.
-The generated APK can be found under android/app/build/outputs/apk/app-release.apk, and is ready to be distributed.
+The generated APK can be found under android/app/build/outputs/apk/release/app-release.apk, and is ready to be distributed.
Testing the release build of your app
Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using:
$ react-native run-android --variant=release
diff --git a/docs/0.27/understanding-cli.html b/docs/0.27/understanding-cli.html
index 5588dec0e7f..4ca1646f6df 100644
--- a/docs/0.27/understanding-cli.html
+++ b/docs/0.27/understanding-cli.html
@@ -76,7 +76,7 @@
CLI Configs
When using react-native start, its platform derivatives, and react-native bundle you can use a file to define the CLI options used by React Native by default. If you create a file rn-cli.config.js in the root of your project, it will be evaluated and options for the commands will come from there.
You can see the options for the CLI config file inside the source code for Metro here, and here is a common rn-cli.config.js used for supporting TypeScript in React Native projects:
You can see the options for the CLI config on the metro website. Here's a common rn-cli.config.js used for supporting TypeScript in React Native projects:
module.exports = {
getTransformModulePath() {
return require.resolve('react-native-typescript-transformer');
diff --git a/docs/0.27/understanding-cli/index.html b/docs/0.27/understanding-cli/index.html
index 5588dec0e7f..4ca1646f6df 100644
--- a/docs/0.27/understanding-cli/index.html
+++ b/docs/0.27/understanding-cli/index.html
@@ -76,7 +76,7 @@
CLI Configs
When using react-native start, its platform derivatives, and react-native bundle you can use a file to define the CLI options used by React Native by default. If you create a file rn-cli.config.js in the root of your project, it will be evaluated and options for the commands will come from there.
You can see the options for the CLI config file inside the source code for Metro here, and here is a common rn-cli.config.js used for supporting TypeScript in React Native projects:
You can see the options for the CLI config on the metro website. Here's a common rn-cli.config.js used for supporting TypeScript in React Native projects:
module.exports = {
getTransformModulePath() {
return require.resolve('react-native-typescript-transformer');
diff --git a/docs/0.28/debugging.html b/docs/0.28/debugging.html
index ae0d9e8b958..c8ac2f654e3 100644
--- a/docs/0.28/debugging.html
+++ b/docs/0.28/debugging.html
@@ -113,7 +113,7 @@ YellowBox.ignoreWarnings(['Warning: ...']);
Projects with Native Code Only
The remainder of this guide only applies to projects made with react-native init
- or to those made with Create React Native App which have since ejected. For
+ or to those made with expo init or Create React Native App which have since ejected. For
more information about ejecting, please see
the guide on
the Create React Native App repository.
@@ -126,11 +126,11 @@ YellowBox.ignoreWarnings(['Warning: ...']);
You may also access these through Debug → Open System Log... in the iOS Simulator or by running adb logcat *:S ReactNative:V ReactNativeJS:V in a terminal while an Android app is running on a device or emulator.
-If you're using Create React Native App, console logs already appear in the same terminal output as the packager.
+If you're using Create React Native App or Expo CLI, console logs already appear in the same terminal output as the packager.
Debugging on a device with Chrome Developer Tools
-If you're using Create React Native App, this is configured for you already.
+If you're using Create React Native App or Expo CLI, this is configured for you already.
On iOS devices, open the file RCTWebSocketExecutor.m and change "localhost" to the IP address of your computer, then select "Debug JS Remotely" from the Developer Menu.
On Android 5.0+ devices connected via USB, you can use the adb command line tool to setup port forwarding from the device to your computer:
Projects with Native Code Only
The remainder of this guide only applies to projects made with react-native init
- or to those made with Create React Native App which have since ejected. For
+ or to those made with expo init or Create React Native App which have since ejected. For
more information about ejecting, please see
the guide on
the Create React Native App repository.
@@ -126,11 +126,11 @@ YellowBox.ignoreWarnings(['Warning: ...']);
You may also access these through Debug → Open System Log... in the iOS Simulator or by running adb logcat *:S ReactNative:V ReactNativeJS:V in a terminal while an Android app is running on a device or emulator.
-If you're using Create React Native App, console logs already appear in the same terminal output as the packager.
+If you're using Create React Native App or Expo CLI, console logs already appear in the same terminal output as the packager.
Debugging on a device with Chrome Developer Tools
-If you're using Create React Native App, this is configured for you already.
+If you're using Create React Native App or Expo CLI, this is configured for you already.
On iOS devices, open the file RCTWebSocketExecutor.m and change "localhost" to the IP address of your computer, then select "Debug JS Remotely" from the Developer Menu.
On Android 5.0+ devices connected via USB, you can use the adb command line tool to setup port forwarding from the device to your computer:
Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.
2. Install the Android SDK
-Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.0 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.1 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".
-The SDK Manager can also be found within the Android Studio "Preferences" dialog, under Appearance & Behavior → System Settings → Android SDK.
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.0 (Oreo) entry, then make sure the following items are all checked:
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.1 (Oreo) entry, then make sure the following items are all checked:
-
-
Android SDK Platform 26
+Android SDK Platform 27Google APIs Intel x86 Atom_64 System Image
Add the following lines to your $HOME/.bash_profile config file:
export ANDROID_HOME=$HOME/Library/Android/sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
export ANDROID_HOME=$HOME/Android/Sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
diff --git a/docs/0.28/getting-started/index.html b/docs/0.28/getting-started/index.html index cc6dc6b71a8..669732025f2 100644 --- a/docs/0.28/getting-started/index.html +++ b/docs/0.28/getting-started/index.html @@ -260,7 +260,7 @@ npm start
Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.
2. Install the Android SDK
-Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.0 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.1 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".
-The SDK Manager can also be found within the Android Studio "Preferences" dialog, under Appearance & Behavior → System Settings → Android SDK.
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.0 (Oreo) entry, then make sure the following items are all checked:
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.1 (Oreo) entry, then make sure the following items are all checked:
-
-
Android SDK Platform 26
+Android SDK Platform 27Google APIs Intel x86 Atom_64 System Image
Add the following lines to your $HOME/.bash_profile config file:
export ANDROID_HOME=$HOME/Library/Android/sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
export ANDROID_HOME=$HOME/Android/Sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
diff --git a/docs/0.28/images.html b/docs/0.28/images.html index de010441355..9e202d73ee9 100644 --- a/docs/0.28/images.html +++ b/docs/0.28/images.html @@ -77,7 +77,7 @@ var icon = this.props.activeNote that image sources required this way include size (width, height) info for the Image. If you need to scale the image dynamically (i.e. via flex), you may need to manually set
{ width: undefined, height: undefined }on the style attribute.Static Non-Image Resources
The
-requiresyntax described above can be used to statically include audio, video or document files in your project as well. Most common file types are supported including.mp3,.wav,.mp4,.mov,.htmlandYou can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
+You can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
A caveat is that videos must use absolute positioning instead of
flexGrow, since size info is not currently passed for non-image assets. This limitation doesn't occur for videos that are linked directly into Xcode or the Assets folder for Android.Images From Hybrid App's Resources
If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app.
diff --git a/docs/0.28/images/index.html b/docs/0.28/images/index.html index de010441355..9e202d73ee9 100644 --- a/docs/0.28/images/index.html +++ b/docs/0.28/images/index.html @@ -77,7 +77,7 @@ var icon = this.props.activeNote that image sources required this way include size (width, height) info for the Image. If you need to scale the image dynamically (i.e. via flex), you may need to manually set
{ width: undefined, height: undefined }on the style attribute.Static Non-Image Resources
The
-requiresyntax described above can be used to statically include audio, video or document files in your project as well. Most common file types are supported including.mp3,.wav,.mp4,.mov,.htmlandYou can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
+You can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
A caveat is that videos must use absolute positioning instead of
flexGrow, since size info is not currently passed for non-image assets. This limitation doesn't occur for videos that are linked directly into Xcode or the Assets folder for Android.Images From Hybrid App's Resources
If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app.
diff --git a/docs/0.28/navigation.html b/docs/0.28/navigation.html index 255eca09954..2c03e1e7697 100644 --- a/docs/0.28/navigation.html +++ b/docs/0.28/navigation.html @@ -36,7 +36,7 @@
Navigating Between Screens
Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.
This guide covers the various navigation components available in React Native. If you are just getting started with navigation, you will probably want to use React Navigation. React Navigation provides an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android.
If you're only targeting iOS, you may want to also check out NavigatorIOS as a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native UINavigationController class. This component will not work on Android, however.
If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms:react-native-navigation.
+If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: react-native-navigation.
React Navigation
The community solution to navigation is a standalone library that allows developers to set up the screens of an app with just a few lines of code.
The first step is to install in your project:
diff --git a/docs/0.28/navigation/index.html b/docs/0.28/navigation/index.html index 255eca09954..2c03e1e7697 100644 --- a/docs/0.28/navigation/index.html +++ b/docs/0.28/navigation/index.html @@ -36,7 +36,7 @@Navigating Between Screens
Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.
This guide covers the various navigation components available in React Native. If you are just getting started with navigation, you will probably want to use React Navigation. React Navigation provides an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android.
If you're only targeting iOS, you may want to also check out NavigatorIOS as a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native UINavigationController class. This component will not work on Android, however.
If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms:react-native-navigation.
+If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: react-native-navigation.
React Navigation
The community solution to navigation is a standalone library that allows developers to set up the screens of an app with just a few lines of code.
The first step is to install in your project:
diff --git a/docs/0.28/running-on-device.html b/docs/0.28/running-on-device.html index a1a27290f50..5422070a318 100644 --- a/docs/0.28/running-on-device.html +++ b/docs/0.28/running-on-device.html @@ -102,7 +102,7 @@ }It's always a good idea to test your app on an actual device before releasing it to your users. This document will guide you through the necessary steps to run your React Native app on a device and to get it ready for production.
-If you used Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
+If you used Expo CLI or Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
- @@ -125,7 +125,7 @@ Windows
A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Create React Native App, which will allow you to run your app using the Expo client app.
+A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app.
1. Plug in your device via USB
Connect your iOS device to your Mac using a USB to Lightning cable. Navigate to the ios folder in your project, then open the .xcodeproj file, or if you are using CocoaPods open .xcworkspace, within it using Xcode.
It's always a good idea to test your app on an actual device before releasing it to your users. This document will guide you through the necessary steps to run your React Native app on a device and to get it ready for production.
-If you used Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
+If you used Expo CLI or Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
- @@ -125,7 +125,7 @@ Windows
A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Create React Native App, which will allow you to run your app using the Expo client app.
+A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app.
1. Plug in your device via USB
Connect your iOS device to your Mac using a USB to Lightning cable. Navigate to the ios folder in your project, then open the .xcodeproj file, or if you are using CocoaPods open .xcworkspace, within it using Xcode.
-Note: Make sure gradle.properties does not include org.gradle.configureondemand=true as that will make the release build skip bundling JS and assets into the APK.
The generated APK can be found under android/app/build/outputs/apk/app-release.apk, and is ready to be distributed.
The generated APK can be found under android/app/build/outputs/apk/release/app-release.apk, and is ready to be distributed.
Testing the release build of your app
Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using:
$ react-native run-android --variant=release
diff --git a/docs/0.28/signed-apk-android/index.html b/docs/0.28/signed-apk-android/index.html
index 7b3cdd31742..022fe7c81da 100644
--- a/docs/0.28/signed-apk-android/index.html
+++ b/docs/0.28/signed-apk-android/index.html
@@ -102,7 +102,7 @@ $ ./gradlew assembleRelease
Note: Make sure gradle.properties does not include org.gradle.configureondemand=true as that will make the release build skip bundling JS and assets into the APK.
-The generated APK can be found under android/app/build/outputs/apk/app-release.apk, and is ready to be distributed.
+The generated APK can be found under android/app/build/outputs/apk/release/app-release.apk, and is ready to be distributed.
Testing the release build of your app
Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using:
$ react-native run-android --variant=release
diff --git a/docs/0.28/understanding-cli.html b/docs/0.28/understanding-cli.html
index 432e1f881e6..f4569347209 100644
--- a/docs/0.28/understanding-cli.html
+++ b/docs/0.28/understanding-cli.html
@@ -76,7 +76,7 @@
CLI Configs
When using react-native start, its platform derivatives, and react-native bundle you can use a file to define the CLI options used by React Native by default. If you create a file rn-cli.config.js in the root of your project, it will be evaluated and options for the commands will come from there.
You can see the options for the CLI config file inside the source code for Metro here, and here is a common rn-cli.config.js used for supporting TypeScript in React Native projects:
You can see the options for the CLI config on the metro website. Here's a common rn-cli.config.js used for supporting TypeScript in React Native projects:
module.exports = {
getTransformModulePath() {
return require.resolve('react-native-typescript-transformer');
diff --git a/docs/0.28/understanding-cli/index.html b/docs/0.28/understanding-cli/index.html
index 432e1f881e6..f4569347209 100644
--- a/docs/0.28/understanding-cli/index.html
+++ b/docs/0.28/understanding-cli/index.html
@@ -76,7 +76,7 @@
CLI Configs
When using react-native start, its platform derivatives, and react-native bundle you can use a file to define the CLI options used by React Native by default. If you create a file rn-cli.config.js in the root of your project, it will be evaluated and options for the commands will come from there.
You can see the options for the CLI config file inside the source code for Metro here, and here is a common rn-cli.config.js used for supporting TypeScript in React Native projects:
You can see the options for the CLI config on the metro website. Here's a common rn-cli.config.js used for supporting TypeScript in React Native projects:
module.exports = {
getTransformModulePath() {
return require.resolve('react-native-typescript-transformer');
diff --git a/docs/0.29/debugging.html b/docs/0.29/debugging.html
index 5cbe1c97519..d76c07ac8ca 100644
--- a/docs/0.29/debugging.html
+++ b/docs/0.29/debugging.html
@@ -113,7 +113,7 @@ YellowBox.ignoreWarnings(['Warning: ...']);
Projects with Native Code Only
The remainder of this guide only applies to projects made with react-native init
- or to those made with Create React Native App which have since ejected. For
+ or to those made with expo init or Create React Native App which have since ejected. For
more information about ejecting, please see
the guide on
the Create React Native App repository.
@@ -126,11 +126,11 @@ YellowBox.ignoreWarnings(['Warning: ...']);
You may also access these through Debug → Open System Log... in the iOS Simulator or by running adb logcat *:S ReactNative:V ReactNativeJS:V in a terminal while an Android app is running on a device or emulator.
-If you're using Create React Native App, console logs already appear in the same terminal output as the packager.
+If you're using Create React Native App or Expo CLI, console logs already appear in the same terminal output as the packager.
Debugging on a device with Chrome Developer Tools
-If you're using Create React Native App, this is configured for you already.
+If you're using Create React Native App or Expo CLI, this is configured for you already.
On iOS devices, open the file RCTWebSocketExecutor.m and change "localhost" to the IP address of your computer, then select "Debug JS Remotely" from the Developer Menu.
On Android 5.0+ devices connected via USB, you can use the adb command line tool to setup port forwarding from the device to your computer:
Projects with Native Code Only
The remainder of this guide only applies to projects made with react-native init
- or to those made with Create React Native App which have since ejected. For
+ or to those made with expo init or Create React Native App which have since ejected. For
more information about ejecting, please see
the guide on
the Create React Native App repository.
@@ -126,11 +126,11 @@ YellowBox.ignoreWarnings(['Warning: ...']);
You may also access these through Debug → Open System Log... in the iOS Simulator or by running adb logcat *:S ReactNative:V ReactNativeJS:V in a terminal while an Android app is running on a device or emulator.
-If you're using Create React Native App, console logs already appear in the same terminal output as the packager.
+If you're using Create React Native App or Expo CLI, console logs already appear in the same terminal output as the packager.
Debugging on a device with Chrome Developer Tools
-If you're using Create React Native App, this is configured for you already.
+If you're using Create React Native App or Expo CLI, this is configured for you already.
On iOS devices, open the file RCTWebSocketExecutor.m and change "localhost" to the IP address of your computer, then select "Debug JS Remotely" from the Developer Menu.
On Android 5.0+ devices connected via USB, you can use the adb command line tool to setup port forwarding from the device to your computer:
Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.
2. Install the Android SDK
-Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.0 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.1 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".
-The SDK Manager can also be found within the Android Studio "Preferences" dialog, under Appearance & Behavior → System Settings → Android SDK.
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.0 (Oreo) entry, then make sure the following items are all checked:
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.1 (Oreo) entry, then make sure the following items are all checked:
-
-
Android SDK Platform 26
+Android SDK Platform 27Google APIs Intel x86 Atom_64 System Image
Add the following lines to your $HOME/.bash_profile config file:
export ANDROID_HOME=$HOME/Library/Android/sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
export ANDROID_HOME=$HOME/Android/Sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
diff --git a/docs/0.29/getting-started/index.html b/docs/0.29/getting-started/index.html index 7a18723278d..a931f379b78 100644 --- a/docs/0.29/getting-started/index.html +++ b/docs/0.29/getting-started/index.html @@ -260,7 +260,7 @@ npm start
Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.
2. Install the Android SDK
-Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.0 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.1 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".
-The SDK Manager can also be found within the Android Studio "Preferences" dialog, under Appearance & Behavior → System Settings → Android SDK.
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.0 (Oreo) entry, then make sure the following items are all checked:
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.1 (Oreo) entry, then make sure the following items are all checked:
-
-
Android SDK Platform 26
+Android SDK Platform 27Google APIs Intel x86 Atom_64 System Image
Add the following lines to your $HOME/.bash_profile config file:
export ANDROID_HOME=$HOME/Library/Android/sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
export ANDROID_HOME=$HOME/Android/Sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
diff --git a/docs/0.29/images.html b/docs/0.29/images.html index 0db04b4f277..f384f06f116 100644 --- a/docs/0.29/images.html +++ b/docs/0.29/images.html @@ -77,7 +77,7 @@ var icon = this.props.activeNote that image sources required this way include size (width, height) info for the Image. If you need to scale the image dynamically (i.e. via flex), you may need to manually set
{ width: undefined, height: undefined }on the style attribute.Static Non-Image Resources
The
-requiresyntax described above can be used to statically include audio, video or document files in your project as well. Most common file types are supported including.mp3,.wav,.mp4,.mov,.htmlandYou can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
+You can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
A caveat is that videos must use absolute positioning instead of
flexGrow, since size info is not currently passed for non-image assets. This limitation doesn't occur for videos that are linked directly into Xcode or the Assets folder for Android.Images From Hybrid App's Resources
If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app.
diff --git a/docs/0.29/images/index.html b/docs/0.29/images/index.html index 0db04b4f277..f384f06f116 100644 --- a/docs/0.29/images/index.html +++ b/docs/0.29/images/index.html @@ -77,7 +77,7 @@ var icon = this.props.activeNote that image sources required this way include size (width, height) info for the Image. If you need to scale the image dynamically (i.e. via flex), you may need to manually set
{ width: undefined, height: undefined }on the style attribute.Static Non-Image Resources
The
-requiresyntax described above can be used to statically include audio, video or document files in your project as well. Most common file types are supported including.mp3,.wav,.mp4,.mov,.htmlandYou can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
+You can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
A caveat is that videos must use absolute positioning instead of
flexGrow, since size info is not currently passed for non-image assets. This limitation doesn't occur for videos that are linked directly into Xcode or the Assets folder for Android.Images From Hybrid App's Resources
If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app.
diff --git a/docs/0.29/navigation.html b/docs/0.29/navigation.html index 88aaa0ea3ae..0fb66284e4a 100644 --- a/docs/0.29/navigation.html +++ b/docs/0.29/navigation.html @@ -36,7 +36,7 @@
Navigating Between Screens
Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.
This guide covers the various navigation components available in React Native. If you are just getting started with navigation, you will probably want to use React Navigation. React Navigation provides an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android.
If you're only targeting iOS, you may want to also check out NavigatorIOS as a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native UINavigationController class. This component will not work on Android, however.
If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms:react-native-navigation.
+If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: react-native-navigation.
React Navigation
The community solution to navigation is a standalone library that allows developers to set up the screens of an app with just a few lines of code.
The first step is to install in your project:
diff --git a/docs/0.29/navigation/index.html b/docs/0.29/navigation/index.html index 88aaa0ea3ae..0fb66284e4a 100644 --- a/docs/0.29/navigation/index.html +++ b/docs/0.29/navigation/index.html @@ -36,7 +36,7 @@Navigating Between Screens
Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.
This guide covers the various navigation components available in React Native. If you are just getting started with navigation, you will probably want to use React Navigation. React Navigation provides an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android.
If you're only targeting iOS, you may want to also check out NavigatorIOS as a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native UINavigationController class. This component will not work on Android, however.
If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms:react-native-navigation.
+If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: react-native-navigation.
React Navigation
The community solution to navigation is a standalone library that allows developers to set up the screens of an app with just a few lines of code.
The first step is to install in your project:
diff --git a/docs/0.29/running-on-device.html b/docs/0.29/running-on-device.html index 924dd95f72d..1e92a0b9240 100644 --- a/docs/0.29/running-on-device.html +++ b/docs/0.29/running-on-device.html @@ -102,7 +102,7 @@ }It's always a good idea to test your app on an actual device before releasing it to your users. This document will guide you through the necessary steps to run your React Native app on a device and to get it ready for production.
-If you used Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
+If you used Expo CLI or Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
- @@ -125,7 +125,7 @@ Windows
A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Create React Native App, which will allow you to run your app using the Expo client app.
+A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app.
1. Plug in your device via USB
Connect your iOS device to your Mac using a USB to Lightning cable. Navigate to the ios folder in your project, then open the .xcodeproj file, or if you are using CocoaPods open .xcworkspace, within it using Xcode.
It's always a good idea to test your app on an actual device before releasing it to your users. This document will guide you through the necessary steps to run your React Native app on a device and to get it ready for production.
-If you used Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
+If you used Expo CLI or Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
- @@ -125,7 +125,7 @@ Windows
A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Create React Native App, which will allow you to run your app using the Expo client app.
+A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app.
1. Plug in your device via USB
Connect your iOS device to your Mac using a USB to Lightning cable. Navigate to the ios folder in your project, then open the .xcodeproj file, or if you are using CocoaPods open .xcworkspace, within it using Xcode.
-Note: Make sure gradle.properties does not include org.gradle.configureondemand=true as that will make the release build skip bundling JS and assets into the APK.
The generated APK can be found under android/app/build/outputs/apk/app-release.apk, and is ready to be distributed.
The generated APK can be found under android/app/build/outputs/apk/release/app-release.apk, and is ready to be distributed.
Testing the release build of your app
Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using:
$ react-native run-android --variant=release
diff --git a/docs/0.29/signed-apk-android/index.html b/docs/0.29/signed-apk-android/index.html
index 11a86da5ac0..62b0f0fcc23 100644
--- a/docs/0.29/signed-apk-android/index.html
+++ b/docs/0.29/signed-apk-android/index.html
@@ -102,7 +102,7 @@ $ ./gradlew assembleRelease
Note: Make sure gradle.properties does not include org.gradle.configureondemand=true as that will make the release build skip bundling JS and assets into the APK.
-The generated APK can be found under android/app/build/outputs/apk/app-release.apk, and is ready to be distributed.
+The generated APK can be found under android/app/build/outputs/apk/release/app-release.apk, and is ready to be distributed.
Testing the release build of your app
Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using:
$ react-native run-android --variant=release
diff --git a/docs/0.29/understanding-cli.html b/docs/0.29/understanding-cli.html
index 05feba4f90c..055f413b3d4 100644
--- a/docs/0.29/understanding-cli.html
+++ b/docs/0.29/understanding-cli.html
@@ -76,7 +76,7 @@
CLI Configs
When using react-native start, its platform derivatives, and react-native bundle you can use a file to define the CLI options used by React Native by default. If you create a file rn-cli.config.js in the root of your project, it will be evaluated and options for the commands will come from there.
You can see the options for the CLI config file inside the source code for Metro here, and here is a common rn-cli.config.js used for supporting TypeScript in React Native projects:
You can see the options for the CLI config on the metro website. Here's a common rn-cli.config.js used for supporting TypeScript in React Native projects:
module.exports = {
getTransformModulePath() {
return require.resolve('react-native-typescript-transformer');
diff --git a/docs/0.29/understanding-cli/index.html b/docs/0.29/understanding-cli/index.html
index 05feba4f90c..055f413b3d4 100644
--- a/docs/0.29/understanding-cli/index.html
+++ b/docs/0.29/understanding-cli/index.html
@@ -76,7 +76,7 @@
CLI Configs
When using react-native start, its platform derivatives, and react-native bundle you can use a file to define the CLI options used by React Native by default. If you create a file rn-cli.config.js in the root of your project, it will be evaluated and options for the commands will come from there.
You can see the options for the CLI config file inside the source code for Metro here, and here is a common rn-cli.config.js used for supporting TypeScript in React Native projects:
You can see the options for the CLI config on the metro website. Here's a common rn-cli.config.js used for supporting TypeScript in React Native projects:
module.exports = {
getTransformModulePath() {
return require.resolve('react-native-typescript-transformer');
diff --git a/docs/0.30/debugging.html b/docs/0.30/debugging.html
index 356f5faa5d3..2fcdf17a19a 100644
--- a/docs/0.30/debugging.html
+++ b/docs/0.30/debugging.html
@@ -113,7 +113,7 @@ YellowBox.ignoreWarnings(['Warning: ...']);
Projects with Native Code Only
The remainder of this guide only applies to projects made with react-native init
- or to those made with Create React Native App which have since ejected. For
+ or to those made with expo init or Create React Native App which have since ejected. For
more information about ejecting, please see
the guide on
the Create React Native App repository.
@@ -126,11 +126,11 @@ YellowBox.ignoreWarnings(['Warning: ...']);
You may also access these through Debug → Open System Log... in the iOS Simulator or by running adb logcat *:S ReactNative:V ReactNativeJS:V in a terminal while an Android app is running on a device or emulator.
-If you're using Create React Native App, console logs already appear in the same terminal output as the packager.
+If you're using Create React Native App or Expo CLI, console logs already appear in the same terminal output as the packager.
Debugging on a device with Chrome Developer Tools
-If you're using Create React Native App, this is configured for you already.
+If you're using Create React Native App or Expo CLI, this is configured for you already.
On iOS devices, open the file RCTWebSocketExecutor.m and change "localhost" to the IP address of your computer, then select "Debug JS Remotely" from the Developer Menu.
On Android 5.0+ devices connected via USB, you can use the adb command line tool to setup port forwarding from the device to your computer:
Projects with Native Code Only
The remainder of this guide only applies to projects made with react-native init
- or to those made with Create React Native App which have since ejected. For
+ or to those made with expo init or Create React Native App which have since ejected. For
more information about ejecting, please see
the guide on
the Create React Native App repository.
@@ -126,11 +126,11 @@ YellowBox.ignoreWarnings(['Warning: ...']);
You may also access these through Debug → Open System Log... in the iOS Simulator or by running adb logcat *:S ReactNative:V ReactNativeJS:V in a terminal while an Android app is running on a device or emulator.
-If you're using Create React Native App, console logs already appear in the same terminal output as the packager.
+If you're using Create React Native App or Expo CLI, console logs already appear in the same terminal output as the packager.
Debugging on a device with Chrome Developer Tools
-If you're using Create React Native App, this is configured for you already.
+If you're using Create React Native App or Expo CLI, this is configured for you already.
On iOS devices, open the file RCTWebSocketExecutor.m and change "localhost" to the IP address of your computer, then select "Debug JS Remotely" from the Developer Menu.
On Android 5.0+ devices connected via USB, you can use the adb command line tool to setup port forwarding from the device to your computer:
Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.
2. Install the Android SDK
-Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.0 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.1 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".
-The SDK Manager can also be found within the Android Studio "Preferences" dialog, under Appearance & Behavior → System Settings → Android SDK.
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.0 (Oreo) entry, then make sure the following items are all checked:
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.1 (Oreo) entry, then make sure the following items are all checked:
-
-
Android SDK Platform 26
+Android SDK Platform 27Google APIs Intel x86 Atom_64 System Image
Add the following lines to your $HOME/.bash_profile config file:
export ANDROID_HOME=$HOME/Library/Android/sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
export ANDROID_HOME=$HOME/Android/Sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
diff --git a/docs/0.30/getting-started/index.html b/docs/0.30/getting-started/index.html index 5a12aca0a6d..b15c74b01b0 100644 --- a/docs/0.30/getting-started/index.html +++ b/docs/0.30/getting-started/index.html @@ -260,7 +260,7 @@ npm start
Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.
2. Install the Android SDK
-Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.0 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.1 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".
-The SDK Manager can also be found within the Android Studio "Preferences" dialog, under Appearance & Behavior → System Settings → Android SDK.
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.0 (Oreo) entry, then make sure the following items are all checked:
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.1 (Oreo) entry, then make sure the following items are all checked:
-
-
Android SDK Platform 26
+Android SDK Platform 27Google APIs Intel x86 Atom_64 System Image
Add the following lines to your $HOME/.bash_profile config file:
export ANDROID_HOME=$HOME/Library/Android/sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
export ANDROID_HOME=$HOME/Android/Sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
diff --git a/docs/0.30/images.html b/docs/0.30/images.html index 4194f4ac85d..41c19de9fba 100644 --- a/docs/0.30/images.html +++ b/docs/0.30/images.html @@ -77,7 +77,7 @@ var icon = this.props.activeNote that image sources required this way include size (width, height) info for the Image. If you need to scale the image dynamically (i.e. via flex), you may need to manually set
{ width: undefined, height: undefined }on the style attribute.Static Non-Image Resources
The
-requiresyntax described above can be used to statically include audio, video or document files in your project as well. Most common file types are supported including.mp3,.wav,.mp4,.mov,.htmlandYou can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
+You can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
A caveat is that videos must use absolute positioning instead of
flexGrow, since size info is not currently passed for non-image assets. This limitation doesn't occur for videos that are linked directly into Xcode or the Assets folder for Android.Images From Hybrid App's Resources
If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app.
diff --git a/docs/0.30/images/index.html b/docs/0.30/images/index.html index 4194f4ac85d..41c19de9fba 100644 --- a/docs/0.30/images/index.html +++ b/docs/0.30/images/index.html @@ -77,7 +77,7 @@ var icon = this.props.activeNote that image sources required this way include size (width, height) info for the Image. If you need to scale the image dynamically (i.e. via flex), you may need to manually set
{ width: undefined, height: undefined }on the style attribute.Static Non-Image Resources
The
-requiresyntax described above can be used to statically include audio, video or document files in your project as well. Most common file types are supported including.mp3,.wav,.mp4,.mov,.htmlandYou can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
+You can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
A caveat is that videos must use absolute positioning instead of
flexGrow, since size info is not currently passed for non-image assets. This limitation doesn't occur for videos that are linked directly into Xcode or the Assets folder for Android.Images From Hybrid App's Resources
If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app.
diff --git a/docs/0.30/navigation.html b/docs/0.30/navigation.html index 8309a0b06b5..1438e69419e 100644 --- a/docs/0.30/navigation.html +++ b/docs/0.30/navigation.html @@ -36,7 +36,7 @@
Navigating Between Screens
Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.
This guide covers the various navigation components available in React Native. If you are just getting started with navigation, you will probably want to use React Navigation. React Navigation provides an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android.
If you're only targeting iOS, you may want to also check out NavigatorIOS as a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native UINavigationController class. This component will not work on Android, however.
If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms:react-native-navigation.
+If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: react-native-navigation.
React Navigation
The community solution to navigation is a standalone library that allows developers to set up the screens of an app with just a few lines of code.
The first step is to install in your project:
diff --git a/docs/0.30/navigation/index.html b/docs/0.30/navigation/index.html index 8309a0b06b5..1438e69419e 100644 --- a/docs/0.30/navigation/index.html +++ b/docs/0.30/navigation/index.html @@ -36,7 +36,7 @@Navigating Between Screens
Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.
This guide covers the various navigation components available in React Native. If you are just getting started with navigation, you will probably want to use React Navigation. React Navigation provides an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android.
If you're only targeting iOS, you may want to also check out NavigatorIOS as a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native UINavigationController class. This component will not work on Android, however.
If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms:react-native-navigation.
+If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: react-native-navigation.
React Navigation
The community solution to navigation is a standalone library that allows developers to set up the screens of an app with just a few lines of code.
The first step is to install in your project:
diff --git a/docs/0.30/running-on-device.html b/docs/0.30/running-on-device.html index 75a315653f1..39459755b36 100644 --- a/docs/0.30/running-on-device.html +++ b/docs/0.30/running-on-device.html @@ -102,7 +102,7 @@ }It's always a good idea to test your app on an actual device before releasing it to your users. This document will guide you through the necessary steps to run your React Native app on a device and to get it ready for production.
-If you used Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
+If you used Expo CLI or Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
- @@ -125,7 +125,7 @@ Windows
A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Create React Native App, which will allow you to run your app using the Expo client app.
+A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app.
1. Plug in your device via USB
Connect your iOS device to your Mac using a USB to Lightning cable. Navigate to the ios folder in your project, then open the .xcodeproj file, or if you are using CocoaPods open .xcworkspace, within it using Xcode.
It's always a good idea to test your app on an actual device before releasing it to your users. This document will guide you through the necessary steps to run your React Native app on a device and to get it ready for production.
-If you used Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
+If you used Expo CLI or Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
- @@ -125,7 +125,7 @@ Windows
A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Create React Native App, which will allow you to run your app using the Expo client app.
+A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app.
1. Plug in your device via USB
Connect your iOS device to your Mac using a USB to Lightning cable. Navigate to the ios folder in your project, then open the .xcodeproj file, or if you are using CocoaPods open .xcworkspace, within it using Xcode.
-Note: Make sure gradle.properties does not include org.gradle.configureondemand=true as that will make the release build skip bundling JS and assets into the APK.
The generated APK can be found under android/app/build/outputs/apk/app-release.apk, and is ready to be distributed.
The generated APK can be found under android/app/build/outputs/apk/release/app-release.apk, and is ready to be distributed.
Testing the release build of your app
Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using:
$ react-native run-android --variant=release
diff --git a/docs/0.30/signed-apk-android/index.html b/docs/0.30/signed-apk-android/index.html
index acb871cef44..ce9ed331890 100644
--- a/docs/0.30/signed-apk-android/index.html
+++ b/docs/0.30/signed-apk-android/index.html
@@ -102,7 +102,7 @@ $ ./gradlew assembleRelease
Note: Make sure gradle.properties does not include org.gradle.configureondemand=true as that will make the release build skip bundling JS and assets into the APK.
-The generated APK can be found under android/app/build/outputs/apk/app-release.apk, and is ready to be distributed.
+The generated APK can be found under android/app/build/outputs/apk/release/app-release.apk, and is ready to be distributed.
Testing the release build of your app
Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using:
$ react-native run-android --variant=release
diff --git a/docs/0.30/understanding-cli.html b/docs/0.30/understanding-cli.html
index 6a081b18a75..c1a5bc25c72 100644
--- a/docs/0.30/understanding-cli.html
+++ b/docs/0.30/understanding-cli.html
@@ -76,7 +76,7 @@
CLI Configs
When using react-native start, its platform derivatives, and react-native bundle you can use a file to define the CLI options used by React Native by default. If you create a file rn-cli.config.js in the root of your project, it will be evaluated and options for the commands will come from there.
You can see the options for the CLI config file inside the source code for Metro here, and here is a common rn-cli.config.js used for supporting TypeScript in React Native projects:
You can see the options for the CLI config on the metro website. Here's a common rn-cli.config.js used for supporting TypeScript in React Native projects:
module.exports = {
getTransformModulePath() {
return require.resolve('react-native-typescript-transformer');
diff --git a/docs/0.30/understanding-cli/index.html b/docs/0.30/understanding-cli/index.html
index 6a081b18a75..c1a5bc25c72 100644
--- a/docs/0.30/understanding-cli/index.html
+++ b/docs/0.30/understanding-cli/index.html
@@ -76,7 +76,7 @@
CLI Configs
When using react-native start, its platform derivatives, and react-native bundle you can use a file to define the CLI options used by React Native by default. If you create a file rn-cli.config.js in the root of your project, it will be evaluated and options for the commands will come from there.
You can see the options for the CLI config file inside the source code for Metro here, and here is a common rn-cli.config.js used for supporting TypeScript in React Native projects:
You can see the options for the CLI config on the metro website. Here's a common rn-cli.config.js used for supporting TypeScript in React Native projects:
module.exports = {
getTransformModulePath() {
return require.resolve('react-native-typescript-transformer');
diff --git a/docs/0.31/debugging.html b/docs/0.31/debugging.html
index 019b6deedc7..c7b6e6a394e 100644
--- a/docs/0.31/debugging.html
+++ b/docs/0.31/debugging.html
@@ -113,7 +113,7 @@ YellowBox.ignoreWarnings(['Warning: ...']);
Projects with Native Code Only
The remainder of this guide only applies to projects made with react-native init
- or to those made with Create React Native App which have since ejected. For
+ or to those made with expo init or Create React Native App which have since ejected. For
more information about ejecting, please see
the guide on
the Create React Native App repository.
@@ -126,11 +126,11 @@ YellowBox.ignoreWarnings(['Warning: ...']);
You may also access these through Debug → Open System Log... in the iOS Simulator or by running adb logcat *:S ReactNative:V ReactNativeJS:V in a terminal while an Android app is running on a device or emulator.
-If you're using Create React Native App, console logs already appear in the same terminal output as the packager.
+If you're using Create React Native App or Expo CLI, console logs already appear in the same terminal output as the packager.
Debugging on a device with Chrome Developer Tools
-If you're using Create React Native App, this is configured for you already.
+If you're using Create React Native App or Expo CLI, this is configured for you already.
On iOS devices, open the file RCTWebSocketExecutor.m and change "localhost" to the IP address of your computer, then select "Debug JS Remotely" from the Developer Menu.
On Android 5.0+ devices connected via USB, you can use the adb command line tool to setup port forwarding from the device to your computer:
Projects with Native Code Only
The remainder of this guide only applies to projects made with react-native init
- or to those made with Create React Native App which have since ejected. For
+ or to those made with expo init or Create React Native App which have since ejected. For
more information about ejecting, please see
the guide on
the Create React Native App repository.
@@ -126,11 +126,11 @@ YellowBox.ignoreWarnings(['Warning: ...']);
You may also access these through Debug → Open System Log... in the iOS Simulator or by running adb logcat *:S ReactNative:V ReactNativeJS:V in a terminal while an Android app is running on a device or emulator.
-If you're using Create React Native App, console logs already appear in the same terminal output as the packager.
+If you're using Create React Native App or Expo CLI, console logs already appear in the same terminal output as the packager.
Debugging on a device with Chrome Developer Tools
-If you're using Create React Native App, this is configured for you already.
+If you're using Create React Native App or Expo CLI, this is configured for you already.
On iOS devices, open the file RCTWebSocketExecutor.m and change "localhost" to the IP address of your computer, then select "Debug JS Remotely" from the Developer Menu.
On Android 5.0+ devices connected via USB, you can use the adb command line tool to setup port forwarding from the device to your computer:
Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.
2. Install the Android SDK
-Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.0 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.1 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".
-The SDK Manager can also be found within the Android Studio "Preferences" dialog, under Appearance & Behavior → System Settings → Android SDK.
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.0 (Oreo) entry, then make sure the following items are all checked:
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.1 (Oreo) entry, then make sure the following items are all checked:
-
-
Android SDK Platform 26
+Android SDK Platform 27Google APIs Intel x86 Atom_64 System Image
Add the following lines to your $HOME/.bash_profile config file:
export ANDROID_HOME=$HOME/Library/Android/sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
export ANDROID_HOME=$HOME/Android/Sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
diff --git a/docs/0.31/getting-started/index.html b/docs/0.31/getting-started/index.html index b4f7cca7f78..657e2de0267 100644 --- a/docs/0.31/getting-started/index.html +++ b/docs/0.31/getting-started/index.html @@ -260,7 +260,7 @@ npm start
Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.
2. Install the Android SDK
-Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.0 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.1 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".
-The SDK Manager can also be found within the Android Studio "Preferences" dialog, under Appearance & Behavior → System Settings → Android SDK.
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.0 (Oreo) entry, then make sure the following items are all checked:
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.1 (Oreo) entry, then make sure the following items are all checked:
-
-
Android SDK Platform 26
+Android SDK Platform 27Google APIs Intel x86 Atom_64 System Image
Add the following lines to your $HOME/.bash_profile config file:
export ANDROID_HOME=$HOME/Library/Android/sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
export ANDROID_HOME=$HOME/Android/Sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
diff --git a/docs/0.31/images.html b/docs/0.31/images.html index c4df834c869..6a891361417 100644 --- a/docs/0.31/images.html +++ b/docs/0.31/images.html @@ -77,7 +77,7 @@ var icon = this.props.activeNote that image sources required this way include size (width, height) info for the Image. If you need to scale the image dynamically (i.e. via flex), you may need to manually set
{ width: undefined, height: undefined }on the style attribute.Static Non-Image Resources
The
-requiresyntax described above can be used to statically include audio, video or document files in your project as well. Most common file types are supported including.mp3,.wav,.mp4,.mov,.htmlandYou can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
+You can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
A caveat is that videos must use absolute positioning instead of
flexGrow, since size info is not currently passed for non-image assets. This limitation doesn't occur for videos that are linked directly into Xcode or the Assets folder for Android.Images From Hybrid App's Resources
If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app.
diff --git a/docs/0.31/images/index.html b/docs/0.31/images/index.html index c4df834c869..6a891361417 100644 --- a/docs/0.31/images/index.html +++ b/docs/0.31/images/index.html @@ -77,7 +77,7 @@ var icon = this.props.activeNote that image sources required this way include size (width, height) info for the Image. If you need to scale the image dynamically (i.e. via flex), you may need to manually set
{ width: undefined, height: undefined }on the style attribute.Static Non-Image Resources
The
-requiresyntax described above can be used to statically include audio, video or document files in your project as well. Most common file types are supported including.mp3,.wav,.mp4,.mov,.htmlandYou can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
+You can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
A caveat is that videos must use absolute positioning instead of
flexGrow, since size info is not currently passed for non-image assets. This limitation doesn't occur for videos that are linked directly into Xcode or the Assets folder for Android.Images From Hybrid App's Resources
If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app.
diff --git a/docs/0.31/navigation.html b/docs/0.31/navigation.html index 8ed715e3955..4f18f011f58 100644 --- a/docs/0.31/navigation.html +++ b/docs/0.31/navigation.html @@ -36,7 +36,7 @@
Navigating Between Screens
Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.
This guide covers the various navigation components available in React Native. If you are just getting started with navigation, you will probably want to use React Navigation. React Navigation provides an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android.
If you're only targeting iOS, you may want to also check out NavigatorIOS as a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native UINavigationController class. This component will not work on Android, however.
If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms:react-native-navigation.
+If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: react-native-navigation.
React Navigation
The community solution to navigation is a standalone library that allows developers to set up the screens of an app with just a few lines of code.
The first step is to install in your project:
diff --git a/docs/0.31/navigation/index.html b/docs/0.31/navigation/index.html index 8ed715e3955..4f18f011f58 100644 --- a/docs/0.31/navigation/index.html +++ b/docs/0.31/navigation/index.html @@ -36,7 +36,7 @@Navigating Between Screens
Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.
This guide covers the various navigation components available in React Native. If you are just getting started with navigation, you will probably want to use React Navigation. React Navigation provides an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android.
If you're only targeting iOS, you may want to also check out NavigatorIOS as a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native UINavigationController class. This component will not work on Android, however.
If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms:react-native-navigation.
+If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: react-native-navigation.
React Navigation
The community solution to navigation is a standalone library that allows developers to set up the screens of an app with just a few lines of code.
The first step is to install in your project:
diff --git a/docs/0.31/running-on-device.html b/docs/0.31/running-on-device.html index 053782c0a61..4d962952751 100644 --- a/docs/0.31/running-on-device.html +++ b/docs/0.31/running-on-device.html @@ -102,7 +102,7 @@ }It's always a good idea to test your app on an actual device before releasing it to your users. This document will guide you through the necessary steps to run your React Native app on a device and to get it ready for production.
-If you used Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
+If you used Expo CLI or Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
- @@ -125,7 +125,7 @@ Windows
A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Create React Native App, which will allow you to run your app using the Expo client app.
+A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app.
1. Plug in your device via USB
Connect your iOS device to your Mac using a USB to Lightning cable. Navigate to the ios folder in your project, then open the .xcodeproj file, or if you are using CocoaPods open .xcworkspace, within it using Xcode.
It's always a good idea to test your app on an actual device before releasing it to your users. This document will guide you through the necessary steps to run your React Native app on a device and to get it ready for production.
-If you used Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
+If you used Expo CLI or Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
- @@ -125,7 +125,7 @@ Windows
A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Create React Native App, which will allow you to run your app using the Expo client app.
+A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app.
1. Plug in your device via USB
Connect your iOS device to your Mac using a USB to Lightning cable. Navigate to the ios folder in your project, then open the .xcodeproj file, or if you are using CocoaPods open .xcworkspace, within it using Xcode.
-Note: Make sure gradle.properties does not include org.gradle.configureondemand=true as that will make the release build skip bundling JS and assets into the APK.
The generated APK can be found under android/app/build/outputs/apk/app-release.apk, and is ready to be distributed.
The generated APK can be found under android/app/build/outputs/apk/release/app-release.apk, and is ready to be distributed.
Testing the release build of your app
Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using:
$ react-native run-android --variant=release
diff --git a/docs/0.31/signed-apk-android/index.html b/docs/0.31/signed-apk-android/index.html
index 46e887c7196..68cf1b4bc71 100644
--- a/docs/0.31/signed-apk-android/index.html
+++ b/docs/0.31/signed-apk-android/index.html
@@ -102,7 +102,7 @@ $ ./gradlew assembleRelease
Note: Make sure gradle.properties does not include org.gradle.configureondemand=true as that will make the release build skip bundling JS and assets into the APK.
-The generated APK can be found under android/app/build/outputs/apk/app-release.apk, and is ready to be distributed.
+The generated APK can be found under android/app/build/outputs/apk/release/app-release.apk, and is ready to be distributed.
Testing the release build of your app
Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using:
$ react-native run-android --variant=release
diff --git a/docs/0.31/understanding-cli.html b/docs/0.31/understanding-cli.html
index 68e7bd89f59..019dcd2cbe3 100644
--- a/docs/0.31/understanding-cli.html
+++ b/docs/0.31/understanding-cli.html
@@ -76,7 +76,7 @@
CLI Configs
When using react-native start, its platform derivatives, and react-native bundle you can use a file to define the CLI options used by React Native by default. If you create a file rn-cli.config.js in the root of your project, it will be evaluated and options for the commands will come from there.
You can see the options for the CLI config file inside the source code for Metro here, and here is a common rn-cli.config.js used for supporting TypeScript in React Native projects:
You can see the options for the CLI config on the metro website. Here's a common rn-cli.config.js used for supporting TypeScript in React Native projects:
module.exports = {
getTransformModulePath() {
return require.resolve('react-native-typescript-transformer');
diff --git a/docs/0.31/understanding-cli/index.html b/docs/0.31/understanding-cli/index.html
index 68e7bd89f59..019dcd2cbe3 100644
--- a/docs/0.31/understanding-cli/index.html
+++ b/docs/0.31/understanding-cli/index.html
@@ -76,7 +76,7 @@
CLI Configs
When using react-native start, its platform derivatives, and react-native bundle you can use a file to define the CLI options used by React Native by default. If you create a file rn-cli.config.js in the root of your project, it will be evaluated and options for the commands will come from there.
You can see the options for the CLI config file inside the source code for Metro here, and here is a common rn-cli.config.js used for supporting TypeScript in React Native projects:
You can see the options for the CLI config on the metro website. Here's a common rn-cli.config.js used for supporting TypeScript in React Native projects:
module.exports = {
getTransformModulePath() {
return require.resolve('react-native-typescript-transformer');
diff --git a/docs/0.32/debugging.html b/docs/0.32/debugging.html
index 9eaac8b77b0..573e2e3de7c 100644
--- a/docs/0.32/debugging.html
+++ b/docs/0.32/debugging.html
@@ -113,7 +113,7 @@ YellowBox.ignoreWarnings(['Warning: ...']);
Projects with Native Code Only
The remainder of this guide only applies to projects made with react-native init
- or to those made with Create React Native App which have since ejected. For
+ or to those made with expo init or Create React Native App which have since ejected. For
more information about ejecting, please see
the guide on
the Create React Native App repository.
@@ -126,11 +126,11 @@ YellowBox.ignoreWarnings(['Warning: ...']);
You may also access these through Debug → Open System Log... in the iOS Simulator or by running adb logcat *:S ReactNative:V ReactNativeJS:V in a terminal while an Android app is running on a device or emulator.
-If you're using Create React Native App, console logs already appear in the same terminal output as the packager.
+If you're using Create React Native App or Expo CLI, console logs already appear in the same terminal output as the packager.
Debugging on a device with Chrome Developer Tools
-If you're using Create React Native App, this is configured for you already.
+If you're using Create React Native App or Expo CLI, this is configured for you already.
On iOS devices, open the file RCTWebSocketExecutor.m and change "localhost" to the IP address of your computer, then select "Debug JS Remotely" from the Developer Menu.
On Android 5.0+ devices connected via USB, you can use the adb command line tool to setup port forwarding from the device to your computer:
Projects with Native Code Only
The remainder of this guide only applies to projects made with react-native init
- or to those made with Create React Native App which have since ejected. For
+ or to those made with expo init or Create React Native App which have since ejected. For
more information about ejecting, please see
the guide on
the Create React Native App repository.
@@ -126,11 +126,11 @@ YellowBox.ignoreWarnings(['Warning: ...']);
You may also access these through Debug → Open System Log... in the iOS Simulator or by running adb logcat *:S ReactNative:V ReactNativeJS:V in a terminal while an Android app is running on a device or emulator.
-If you're using Create React Native App, console logs already appear in the same terminal output as the packager.
+If you're using Create React Native App or Expo CLI, console logs already appear in the same terminal output as the packager.
Debugging on a device with Chrome Developer Tools
-If you're using Create React Native App, this is configured for you already.
+If you're using Create React Native App or Expo CLI, this is configured for you already.
On iOS devices, open the file RCTWebSocketExecutor.m and change "localhost" to the IP address of your computer, then select "Debug JS Remotely" from the Developer Menu.
On Android 5.0+ devices connected via USB, you can use the adb command line tool to setup port forwarding from the device to your computer:
Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.
2. Install the Android SDK
-Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.0 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.1 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".
-The SDK Manager can also be found within the Android Studio "Preferences" dialog, under Appearance & Behavior → System Settings → Android SDK.
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.0 (Oreo) entry, then make sure the following items are all checked:
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.1 (Oreo) entry, then make sure the following items are all checked:
-
-
Android SDK Platform 26
+Android SDK Platform 27Google APIs Intel x86 Atom_64 System Image
Add the following lines to your $HOME/.bash_profile config file:
export ANDROID_HOME=$HOME/Library/Android/sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
export ANDROID_HOME=$HOME/Android/Sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
diff --git a/docs/0.32/getting-started/index.html b/docs/0.32/getting-started/index.html index 70ce5f8b3fa..6cf30cfc4c9 100644 --- a/docs/0.32/getting-started/index.html +++ b/docs/0.32/getting-started/index.html @@ -260,7 +260,7 @@ npm start
Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.
2. Install the Android SDK
-Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.0 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.1 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".
-The SDK Manager can also be found within the Android Studio "Preferences" dialog, under Appearance & Behavior → System Settings → Android SDK.
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.0 (Oreo) entry, then make sure the following items are all checked:
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.1 (Oreo) entry, then make sure the following items are all checked:
-
-
Android SDK Platform 26
+Android SDK Platform 27Google APIs Intel x86 Atom_64 System Image
Add the following lines to your $HOME/.bash_profile config file:
export ANDROID_HOME=$HOME/Library/Android/sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
export ANDROID_HOME=$HOME/Android/Sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
diff --git a/docs/0.32/images.html b/docs/0.32/images.html index 8d9908ea607..9550be0c3fe 100644 --- a/docs/0.32/images.html +++ b/docs/0.32/images.html @@ -77,7 +77,7 @@ var icon = this.props.activeNote that image sources required this way include size (width, height) info for the Image. If you need to scale the image dynamically (i.e. via flex), you may need to manually set
{ width: undefined, height: undefined }on the style attribute.Static Non-Image Resources
The
-requiresyntax described above can be used to statically include audio, video or document files in your project as well. Most common file types are supported including.mp3,.wav,.mp4,.mov,.htmlandYou can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
+You can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
A caveat is that videos must use absolute positioning instead of
flexGrow, since size info is not currently passed for non-image assets. This limitation doesn't occur for videos that are linked directly into Xcode or the Assets folder for Android.Images From Hybrid App's Resources
If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app.
diff --git a/docs/0.32/images/index.html b/docs/0.32/images/index.html index 8d9908ea607..9550be0c3fe 100644 --- a/docs/0.32/images/index.html +++ b/docs/0.32/images/index.html @@ -77,7 +77,7 @@ var icon = this.props.activeNote that image sources required this way include size (width, height) info for the Image. If you need to scale the image dynamically (i.e. via flex), you may need to manually set
{ width: undefined, height: undefined }on the style attribute.Static Non-Image Resources
The
-requiresyntax described above can be used to statically include audio, video or document files in your project as well. Most common file types are supported including.mp3,.wav,.mp4,.mov,.htmlandYou can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
+You can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
A caveat is that videos must use absolute positioning instead of
flexGrow, since size info is not currently passed for non-image assets. This limitation doesn't occur for videos that are linked directly into Xcode or the Assets folder for Android.Images From Hybrid App's Resources
If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app.
diff --git a/docs/0.32/navigation.html b/docs/0.32/navigation.html index 44cde931451..e6391c2cbbd 100644 --- a/docs/0.32/navigation.html +++ b/docs/0.32/navigation.html @@ -36,7 +36,7 @@
Navigating Between Screens
Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.
This guide covers the various navigation components available in React Native. If you are just getting started with navigation, you will probably want to use React Navigation. React Navigation provides an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android.
If you're only targeting iOS, you may want to also check out NavigatorIOS as a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native UINavigationController class. This component will not work on Android, however.
If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms:react-native-navigation.
+If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: react-native-navigation.
React Navigation
The community solution to navigation is a standalone library that allows developers to set up the screens of an app with just a few lines of code.
The first step is to install in your project:
diff --git a/docs/0.32/navigation/index.html b/docs/0.32/navigation/index.html index 44cde931451..e6391c2cbbd 100644 --- a/docs/0.32/navigation/index.html +++ b/docs/0.32/navigation/index.html @@ -36,7 +36,7 @@Navigating Between Screens
Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.
This guide covers the various navigation components available in React Native. If you are just getting started with navigation, you will probably want to use React Navigation. React Navigation provides an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android.
If you're only targeting iOS, you may want to also check out NavigatorIOS as a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native UINavigationController class. This component will not work on Android, however.
If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms:react-native-navigation.
+If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: react-native-navigation.
React Navigation
The community solution to navigation is a standalone library that allows developers to set up the screens of an app with just a few lines of code.
The first step is to install in your project:
diff --git a/docs/0.32/running-on-device.html b/docs/0.32/running-on-device.html index fdbb01cd4bb..205104e93af 100644 --- a/docs/0.32/running-on-device.html +++ b/docs/0.32/running-on-device.html @@ -102,7 +102,7 @@ }It's always a good idea to test your app on an actual device before releasing it to your users. This document will guide you through the necessary steps to run your React Native app on a device and to get it ready for production.
-If you used Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
+If you used Expo CLI or Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
- @@ -125,7 +125,7 @@ Windows
A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Create React Native App, which will allow you to run your app using the Expo client app.
+A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app.
1. Plug in your device via USB
Connect your iOS device to your Mac using a USB to Lightning cable. Navigate to the ios folder in your project, then open the .xcodeproj file, or if you are using CocoaPods open .xcworkspace, within it using Xcode.
It's always a good idea to test your app on an actual device before releasing it to your users. This document will guide you through the necessary steps to run your React Native app on a device and to get it ready for production.
-If you used Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
+If you used Expo CLI or Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
- @@ -125,7 +125,7 @@ Windows
A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Create React Native App, which will allow you to run your app using the Expo client app.
+A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app.
1. Plug in your device via USB
Connect your iOS device to your Mac using a USB to Lightning cable. Navigate to the ios folder in your project, then open the .xcodeproj file, or if you are using CocoaPods open .xcworkspace, within it using Xcode.
-Note: Make sure gradle.properties does not include org.gradle.configureondemand=true as that will make the release build skip bundling JS and assets into the APK.
The generated APK can be found under android/app/build/outputs/apk/app-release.apk, and is ready to be distributed.
The generated APK can be found under android/app/build/outputs/apk/release/app-release.apk, and is ready to be distributed.
Testing the release build of your app
Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using:
$ react-native run-android --variant=release
diff --git a/docs/0.32/signed-apk-android/index.html b/docs/0.32/signed-apk-android/index.html
index aa86abcf98c..0fe6d6b48e3 100644
--- a/docs/0.32/signed-apk-android/index.html
+++ b/docs/0.32/signed-apk-android/index.html
@@ -102,7 +102,7 @@ $ ./gradlew assembleRelease
Note: Make sure gradle.properties does not include org.gradle.configureondemand=true as that will make the release build skip bundling JS and assets into the APK.
-The generated APK can be found under android/app/build/outputs/apk/app-release.apk, and is ready to be distributed.
+The generated APK can be found under android/app/build/outputs/apk/release/app-release.apk, and is ready to be distributed.
Testing the release build of your app
Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using:
$ react-native run-android --variant=release
diff --git a/docs/0.32/understanding-cli.html b/docs/0.32/understanding-cli.html
index 458bfb2789d..42d68905c69 100644
--- a/docs/0.32/understanding-cli.html
+++ b/docs/0.32/understanding-cli.html
@@ -76,7 +76,7 @@
CLI Configs
When using react-native start, its platform derivatives, and react-native bundle you can use a file to define the CLI options used by React Native by default. If you create a file rn-cli.config.js in the root of your project, it will be evaluated and options for the commands will come from there.
You can see the options for the CLI config file inside the source code for Metro here, and here is a common rn-cli.config.js used for supporting TypeScript in React Native projects:
You can see the options for the CLI config on the metro website. Here's a common rn-cli.config.js used for supporting TypeScript in React Native projects:
module.exports = {
getTransformModulePath() {
return require.resolve('react-native-typescript-transformer');
diff --git a/docs/0.32/understanding-cli/index.html b/docs/0.32/understanding-cli/index.html
index 458bfb2789d..42d68905c69 100644
--- a/docs/0.32/understanding-cli/index.html
+++ b/docs/0.32/understanding-cli/index.html
@@ -76,7 +76,7 @@
CLI Configs
When using react-native start, its platform derivatives, and react-native bundle you can use a file to define the CLI options used by React Native by default. If you create a file rn-cli.config.js in the root of your project, it will be evaluated and options for the commands will come from there.
You can see the options for the CLI config file inside the source code for Metro here, and here is a common rn-cli.config.js used for supporting TypeScript in React Native projects:
You can see the options for the CLI config on the metro website. Here's a common rn-cli.config.js used for supporting TypeScript in React Native projects:
module.exports = {
getTransformModulePath() {
return require.resolve('react-native-typescript-transformer');
diff --git a/docs/0.33/debugging.html b/docs/0.33/debugging.html
index b9a5c11707c..7c006640cbb 100644
--- a/docs/0.33/debugging.html
+++ b/docs/0.33/debugging.html
@@ -113,7 +113,7 @@ YellowBox.ignoreWarnings(['Warning: ...']);
Projects with Native Code Only
The remainder of this guide only applies to projects made with react-native init
- or to those made with Create React Native App which have since ejected. For
+ or to those made with expo init or Create React Native App which have since ejected. For
more information about ejecting, please see
the guide on
the Create React Native App repository.
@@ -126,11 +126,11 @@ YellowBox.ignoreWarnings(['Warning: ...']);
You may also access these through Debug → Open System Log... in the iOS Simulator or by running adb logcat *:S ReactNative:V ReactNativeJS:V in a terminal while an Android app is running on a device or emulator.
-If you're using Create React Native App, console logs already appear in the same terminal output as the packager.
+If you're using Create React Native App or Expo CLI, console logs already appear in the same terminal output as the packager.
Debugging on a device with Chrome Developer Tools
-If you're using Create React Native App, this is configured for you already.
+If you're using Create React Native App or Expo CLI, this is configured for you already.
On iOS devices, open the file RCTWebSocketExecutor.m and change "localhost" to the IP address of your computer, then select "Debug JS Remotely" from the Developer Menu.
On Android 5.0+ devices connected via USB, you can use the adb command line tool to setup port forwarding from the device to your computer:
Projects with Native Code Only
The remainder of this guide only applies to projects made with react-native init
- or to those made with Create React Native App which have since ejected. For
+ or to those made with expo init or Create React Native App which have since ejected. For
more information about ejecting, please see
the guide on
the Create React Native App repository.
@@ -126,11 +126,11 @@ YellowBox.ignoreWarnings(['Warning: ...']);
You may also access these through Debug → Open System Log... in the iOS Simulator or by running adb logcat *:S ReactNative:V ReactNativeJS:V in a terminal while an Android app is running on a device or emulator.
-If you're using Create React Native App, console logs already appear in the same terminal output as the packager.
+If you're using Create React Native App or Expo CLI, console logs already appear in the same terminal output as the packager.
Debugging on a device with Chrome Developer Tools
-If you're using Create React Native App, this is configured for you already.
+If you're using Create React Native App or Expo CLI, this is configured for you already.
On iOS devices, open the file RCTWebSocketExecutor.m and change "localhost" to the IP address of your computer, then select "Debug JS Remotely" from the Developer Menu.
On Android 5.0+ devices connected via USB, you can use the adb command line tool to setup port forwarding from the device to your computer:
Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.
2. Install the Android SDK
-Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.0 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.1 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".
-The SDK Manager can also be found within the Android Studio "Preferences" dialog, under Appearance & Behavior → System Settings → Android SDK.
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.0 (Oreo) entry, then make sure the following items are all checked:
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.1 (Oreo) entry, then make sure the following items are all checked:
-
-
Android SDK Platform 26
+Android SDK Platform 27Google APIs Intel x86 Atom_64 System Image
Add the following lines to your $HOME/.bash_profile config file:
export ANDROID_HOME=$HOME/Library/Android/sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
export ANDROID_HOME=$HOME/Android/Sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
diff --git a/docs/0.33/getting-started/index.html b/docs/0.33/getting-started/index.html index f63485692c2..467e30346bf 100644 --- a/docs/0.33/getting-started/index.html +++ b/docs/0.33/getting-started/index.html @@ -260,7 +260,7 @@ npm start
Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.
2. Install the Android SDK
-Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.0 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.1 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".
-The SDK Manager can also be found within the Android Studio "Preferences" dialog, under Appearance & Behavior → System Settings → Android SDK.
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.0 (Oreo) entry, then make sure the following items are all checked:
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.1 (Oreo) entry, then make sure the following items are all checked:
-
-
Android SDK Platform 26
+Android SDK Platform 27Google APIs Intel x86 Atom_64 System Image
Add the following lines to your $HOME/.bash_profile config file:
export ANDROID_HOME=$HOME/Library/Android/sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
export ANDROID_HOME=$HOME/Android/Sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
diff --git a/docs/0.33/images.html b/docs/0.33/images.html index f8a0be938a9..8e64f790b84 100644 --- a/docs/0.33/images.html +++ b/docs/0.33/images.html @@ -77,7 +77,7 @@ var icon = this.props.activeNote that image sources required this way include size (width, height) info for the Image. If you need to scale the image dynamically (i.e. via flex), you may need to manually set
{ width: undefined, height: undefined }on the style attribute.Static Non-Image Resources
The
-requiresyntax described above can be used to statically include audio, video or document files in your project as well. Most common file types are supported including.mp3,.wav,.mp4,.mov,.htmlandYou can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
+You can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
A caveat is that videos must use absolute positioning instead of
flexGrow, since size info is not currently passed for non-image assets. This limitation doesn't occur for videos that are linked directly into Xcode or the Assets folder for Android.Images From Hybrid App's Resources
If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app.
diff --git a/docs/0.33/images/index.html b/docs/0.33/images/index.html index f8a0be938a9..8e64f790b84 100644 --- a/docs/0.33/images/index.html +++ b/docs/0.33/images/index.html @@ -77,7 +77,7 @@ var icon = this.props.activeNote that image sources required this way include size (width, height) info for the Image. If you need to scale the image dynamically (i.e. via flex), you may need to manually set
{ width: undefined, height: undefined }on the style attribute.Static Non-Image Resources
The
-requiresyntax described above can be used to statically include audio, video or document files in your project as well. Most common file types are supported including.mp3,.wav,.mp4,.mov,.htmlandYou can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
+You can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
A caveat is that videos must use absolute positioning instead of
flexGrow, since size info is not currently passed for non-image assets. This limitation doesn't occur for videos that are linked directly into Xcode or the Assets folder for Android.Images From Hybrid App's Resources
If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app.
diff --git a/docs/0.33/navigation.html b/docs/0.33/navigation.html index e1088cc3846..47ea6d7fcfb 100644 --- a/docs/0.33/navigation.html +++ b/docs/0.33/navigation.html @@ -36,7 +36,7 @@
Navigating Between Screens
Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.
This guide covers the various navigation components available in React Native. If you are just getting started with navigation, you will probably want to use React Navigation. React Navigation provides an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android.
If you're only targeting iOS, you may want to also check out NavigatorIOS as a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native UINavigationController class. This component will not work on Android, however.
If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms:react-native-navigation.
+If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: react-native-navigation.
React Navigation
The community solution to navigation is a standalone library that allows developers to set up the screens of an app with just a few lines of code.
The first step is to install in your project:
diff --git a/docs/0.33/navigation/index.html b/docs/0.33/navigation/index.html index e1088cc3846..47ea6d7fcfb 100644 --- a/docs/0.33/navigation/index.html +++ b/docs/0.33/navigation/index.html @@ -36,7 +36,7 @@Navigating Between Screens
Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.
This guide covers the various navigation components available in React Native. If you are just getting started with navigation, you will probably want to use React Navigation. React Navigation provides an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android.
If you're only targeting iOS, you may want to also check out NavigatorIOS as a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native UINavigationController class. This component will not work on Android, however.
If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms:react-native-navigation.
+If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: react-native-navigation.
React Navigation
The community solution to navigation is a standalone library that allows developers to set up the screens of an app with just a few lines of code.
The first step is to install in your project:
diff --git a/docs/0.33/running-on-device.html b/docs/0.33/running-on-device.html index 1f69e90918d..13818bd0e7e 100644 --- a/docs/0.33/running-on-device.html +++ b/docs/0.33/running-on-device.html @@ -102,7 +102,7 @@ }It's always a good idea to test your app on an actual device before releasing it to your users. This document will guide you through the necessary steps to run your React Native app on a device and to get it ready for production.
-If you used Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
+If you used Expo CLI or Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
- @@ -125,7 +125,7 @@ Windows
A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Create React Native App, which will allow you to run your app using the Expo client app.
+A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app.
1. Plug in your device via USB
Connect your iOS device to your Mac using a USB to Lightning cable. Navigate to the ios folder in your project, then open the .xcodeproj file, or if you are using CocoaPods open .xcworkspace, within it using Xcode.
It's always a good idea to test your app on an actual device before releasing it to your users. This document will guide you through the necessary steps to run your React Native app on a device and to get it ready for production.
-If you used Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
+If you used Expo CLI or Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
- @@ -125,7 +125,7 @@ Windows
A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Create React Native App, which will allow you to run your app using the Expo client app.
+A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app.
1. Plug in your device via USB
Connect your iOS device to your Mac using a USB to Lightning cable. Navigate to the ios folder in your project, then open the .xcodeproj file, or if you are using CocoaPods open .xcworkspace, within it using Xcode.
-Note: Make sure gradle.properties does not include org.gradle.configureondemand=true as that will make the release build skip bundling JS and assets into the APK.
The generated APK can be found under android/app/build/outputs/apk/app-release.apk, and is ready to be distributed.
The generated APK can be found under android/app/build/outputs/apk/release/app-release.apk, and is ready to be distributed.
Testing the release build of your app
Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using:
$ react-native run-android --variant=release
diff --git a/docs/0.33/signed-apk-android/index.html b/docs/0.33/signed-apk-android/index.html
index b6287b207c9..d3ddb377f5d 100644
--- a/docs/0.33/signed-apk-android/index.html
+++ b/docs/0.33/signed-apk-android/index.html
@@ -102,7 +102,7 @@ $ ./gradlew assembleRelease
Note: Make sure gradle.properties does not include org.gradle.configureondemand=true as that will make the release build skip bundling JS and assets into the APK.
-The generated APK can be found under android/app/build/outputs/apk/app-release.apk, and is ready to be distributed.
+The generated APK can be found under android/app/build/outputs/apk/release/app-release.apk, and is ready to be distributed.
Testing the release build of your app
Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using:
$ react-native run-android --variant=release
diff --git a/docs/0.33/understanding-cli.html b/docs/0.33/understanding-cli.html
index deecf55b0e5..fb48f5f6b12 100644
--- a/docs/0.33/understanding-cli.html
+++ b/docs/0.33/understanding-cli.html
@@ -76,7 +76,7 @@
CLI Configs
When using react-native start, its platform derivatives, and react-native bundle you can use a file to define the CLI options used by React Native by default. If you create a file rn-cli.config.js in the root of your project, it will be evaluated and options for the commands will come from there.
You can see the options for the CLI config file inside the source code for Metro here, and here is a common rn-cli.config.js used for supporting TypeScript in React Native projects:
You can see the options for the CLI config on the metro website. Here's a common rn-cli.config.js used for supporting TypeScript in React Native projects:
module.exports = {
getTransformModulePath() {
return require.resolve('react-native-typescript-transformer');
diff --git a/docs/0.33/understanding-cli/index.html b/docs/0.33/understanding-cli/index.html
index deecf55b0e5..fb48f5f6b12 100644
--- a/docs/0.33/understanding-cli/index.html
+++ b/docs/0.33/understanding-cli/index.html
@@ -76,7 +76,7 @@
CLI Configs
When using react-native start, its platform derivatives, and react-native bundle you can use a file to define the CLI options used by React Native by default. If you create a file rn-cli.config.js in the root of your project, it will be evaluated and options for the commands will come from there.
You can see the options for the CLI config file inside the source code for Metro here, and here is a common rn-cli.config.js used for supporting TypeScript in React Native projects:
You can see the options for the CLI config on the metro website. Here's a common rn-cli.config.js used for supporting TypeScript in React Native projects:
module.exports = {
getTransformModulePath() {
return require.resolve('react-native-typescript-transformer');
diff --git a/docs/0.34/debugging.html b/docs/0.34/debugging.html
index d19960e59bb..d97c88fdb3a 100644
--- a/docs/0.34/debugging.html
+++ b/docs/0.34/debugging.html
@@ -113,7 +113,7 @@ YellowBox.ignoreWarnings(['Warning: ...']);
Projects with Native Code Only
The remainder of this guide only applies to projects made with react-native init
- or to those made with Create React Native App which have since ejected. For
+ or to those made with expo init or Create React Native App which have since ejected. For
more information about ejecting, please see
the guide on
the Create React Native App repository.
@@ -126,11 +126,11 @@ YellowBox.ignoreWarnings(['Warning: ...']);
You may also access these through Debug → Open System Log... in the iOS Simulator or by running adb logcat *:S ReactNative:V ReactNativeJS:V in a terminal while an Android app is running on a device or emulator.
-If you're using Create React Native App, console logs already appear in the same terminal output as the packager.
+If you're using Create React Native App or Expo CLI, console logs already appear in the same terminal output as the packager.
Debugging on a device with Chrome Developer Tools
-If you're using Create React Native App, this is configured for you already.
+If you're using Create React Native App or Expo CLI, this is configured for you already.
On iOS devices, open the file RCTWebSocketExecutor.m and change "localhost" to the IP address of your computer, then select "Debug JS Remotely" from the Developer Menu.
On Android 5.0+ devices connected via USB, you can use the adb command line tool to setup port forwarding from the device to your computer:
Projects with Native Code Only
The remainder of this guide only applies to projects made with react-native init
- or to those made with Create React Native App which have since ejected. For
+ or to those made with expo init or Create React Native App which have since ejected. For
more information about ejecting, please see
the guide on
the Create React Native App repository.
@@ -126,11 +126,11 @@ YellowBox.ignoreWarnings(['Warning: ...']);
You may also access these through Debug → Open System Log... in the iOS Simulator or by running adb logcat *:S ReactNative:V ReactNativeJS:V in a terminal while an Android app is running on a device or emulator.
-If you're using Create React Native App, console logs already appear in the same terminal output as the packager.
+If you're using Create React Native App or Expo CLI, console logs already appear in the same terminal output as the packager.
Debugging on a device with Chrome Developer Tools
-If you're using Create React Native App, this is configured for you already.
+If you're using Create React Native App or Expo CLI, this is configured for you already.
On iOS devices, open the file RCTWebSocketExecutor.m and change "localhost" to the IP address of your computer, then select "Debug JS Remotely" from the Developer Menu.
On Android 5.0+ devices connected via USB, you can use the adb command line tool to setup port forwarding from the device to your computer:
Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.
2. Install the Android SDK
-Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.0 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.1 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".
-The SDK Manager can also be found within the Android Studio "Preferences" dialog, under Appearance & Behavior → System Settings → Android SDK.
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.0 (Oreo) entry, then make sure the following items are all checked:
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.1 (Oreo) entry, then make sure the following items are all checked:
-
-
Android SDK Platform 26
+Android SDK Platform 27Google APIs Intel x86 Atom_64 System Image
Add the following lines to your $HOME/.bash_profile config file:
export ANDROID_HOME=$HOME/Library/Android/sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
export ANDROID_HOME=$HOME/Android/Sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
diff --git a/docs/0.34/getting-started/index.html b/docs/0.34/getting-started/index.html index 3e936a49448..9e1a93ec71e 100644 --- a/docs/0.34/getting-started/index.html +++ b/docs/0.34/getting-started/index.html @@ -260,7 +260,7 @@ npm start
Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.
2. Install the Android SDK
-Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.0 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.1 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".
-The SDK Manager can also be found within the Android Studio "Preferences" dialog, under Appearance & Behavior → System Settings → Android SDK.
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.0 (Oreo) entry, then make sure the following items are all checked:
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.1 (Oreo) entry, then make sure the following items are all checked:
-
-
Android SDK Platform 26
+Android SDK Platform 27Google APIs Intel x86 Atom_64 System Image
Add the following lines to your $HOME/.bash_profile config file:
export ANDROID_HOME=$HOME/Library/Android/sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
export ANDROID_HOME=$HOME/Android/Sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
diff --git a/docs/0.34/images.html b/docs/0.34/images.html index bc9ccedf34f..8e8ee1bb47f 100644 --- a/docs/0.34/images.html +++ b/docs/0.34/images.html @@ -77,7 +77,7 @@ var icon = this.props.activeNote that image sources required this way include size (width, height) info for the Image. If you need to scale the image dynamically (i.e. via flex), you may need to manually set
{ width: undefined, height: undefined }on the style attribute.Static Non-Image Resources
The
-requiresyntax described above can be used to statically include audio, video or document files in your project as well. Most common file types are supported including.mp3,.wav,.mp4,.mov,.htmlandYou can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
+You can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
A caveat is that videos must use absolute positioning instead of
flexGrow, since size info is not currently passed for non-image assets. This limitation doesn't occur for videos that are linked directly into Xcode or the Assets folder for Android.Images From Hybrid App's Resources
If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app.
diff --git a/docs/0.34/images/index.html b/docs/0.34/images/index.html index bc9ccedf34f..8e8ee1bb47f 100644 --- a/docs/0.34/images/index.html +++ b/docs/0.34/images/index.html @@ -77,7 +77,7 @@ var icon = this.props.activeNote that image sources required this way include size (width, height) info for the Image. If you need to scale the image dynamically (i.e. via flex), you may need to manually set
{ width: undefined, height: undefined }on the style attribute.Static Non-Image Resources
The
-requiresyntax described above can be used to statically include audio, video or document files in your project as well. Most common file types are supported including.mp3,.wav,.mp4,.mov,.htmlandYou can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
+You can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
A caveat is that videos must use absolute positioning instead of
flexGrow, since size info is not currently passed for non-image assets. This limitation doesn't occur for videos that are linked directly into Xcode or the Assets folder for Android.Images From Hybrid App's Resources
If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app.
diff --git a/docs/0.34/navigation.html b/docs/0.34/navigation.html index e50bf197033..bfc55eff283 100644 --- a/docs/0.34/navigation.html +++ b/docs/0.34/navigation.html @@ -36,7 +36,7 @@
Navigating Between Screens
Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.
This guide covers the various navigation components available in React Native. If you are just getting started with navigation, you will probably want to use React Navigation. React Navigation provides an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android.
If you're only targeting iOS, you may want to also check out NavigatorIOS as a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native UINavigationController class. This component will not work on Android, however.
If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms:react-native-navigation.
+If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: react-native-navigation.
React Navigation
The community solution to navigation is a standalone library that allows developers to set up the screens of an app with just a few lines of code.
The first step is to install in your project:
diff --git a/docs/0.34/navigation/index.html b/docs/0.34/navigation/index.html index e50bf197033..bfc55eff283 100644 --- a/docs/0.34/navigation/index.html +++ b/docs/0.34/navigation/index.html @@ -36,7 +36,7 @@Navigating Between Screens
Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.
This guide covers the various navigation components available in React Native. If you are just getting started with navigation, you will probably want to use React Navigation. React Navigation provides an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android.
If you're only targeting iOS, you may want to also check out NavigatorIOS as a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native UINavigationController class. This component will not work on Android, however.
If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms:react-native-navigation.
+If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: react-native-navigation.
React Navigation
The community solution to navigation is a standalone library that allows developers to set up the screens of an app with just a few lines of code.
The first step is to install in your project:
diff --git a/docs/0.34/running-on-device.html b/docs/0.34/running-on-device.html index cd9d154bcb0..b4ae51b067e 100644 --- a/docs/0.34/running-on-device.html +++ b/docs/0.34/running-on-device.html @@ -102,7 +102,7 @@ }It's always a good idea to test your app on an actual device before releasing it to your users. This document will guide you through the necessary steps to run your React Native app on a device and to get it ready for production.
-If you used Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
+If you used Expo CLI or Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
- @@ -125,7 +125,7 @@ Windows
A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Create React Native App, which will allow you to run your app using the Expo client app.
+A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app.
1. Plug in your device via USB
Connect your iOS device to your Mac using a USB to Lightning cable. Navigate to the ios folder in your project, then open the .xcodeproj file, or if you are using CocoaPods open .xcworkspace, within it using Xcode.
It's always a good idea to test your app on an actual device before releasing it to your users. This document will guide you through the necessary steps to run your React Native app on a device and to get it ready for production.
-If you used Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
+If you used Expo CLI or Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
- @@ -125,7 +125,7 @@ Windows
A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Create React Native App, which will allow you to run your app using the Expo client app.
+A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app.
1. Plug in your device via USB
Connect your iOS device to your Mac using a USB to Lightning cable. Navigate to the ios folder in your project, then open the .xcodeproj file, or if you are using CocoaPods open .xcworkspace, within it using Xcode.
-Note: Make sure gradle.properties does not include org.gradle.configureondemand=true as that will make the release build skip bundling JS and assets into the APK.
The generated APK can be found under android/app/build/outputs/apk/app-release.apk, and is ready to be distributed.
The generated APK can be found under android/app/build/outputs/apk/release/app-release.apk, and is ready to be distributed.
Testing the release build of your app
Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using:
$ react-native run-android --variant=release
diff --git a/docs/0.34/signed-apk-android/index.html b/docs/0.34/signed-apk-android/index.html
index 5f7404351fe..759dc686a11 100644
--- a/docs/0.34/signed-apk-android/index.html
+++ b/docs/0.34/signed-apk-android/index.html
@@ -102,7 +102,7 @@ $ ./gradlew assembleRelease
Note: Make sure gradle.properties does not include org.gradle.configureondemand=true as that will make the release build skip bundling JS and assets into the APK.
-The generated APK can be found under android/app/build/outputs/apk/app-release.apk, and is ready to be distributed.
+The generated APK can be found under android/app/build/outputs/apk/release/app-release.apk, and is ready to be distributed.
Testing the release build of your app
Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using:
$ react-native run-android --variant=release
diff --git a/docs/0.34/understanding-cli.html b/docs/0.34/understanding-cli.html
index d8607f76607..af106075deb 100644
--- a/docs/0.34/understanding-cli.html
+++ b/docs/0.34/understanding-cli.html
@@ -76,7 +76,7 @@
CLI Configs
When using react-native start, its platform derivatives, and react-native bundle you can use a file to define the CLI options used by React Native by default. If you create a file rn-cli.config.js in the root of your project, it will be evaluated and options for the commands will come from there.
You can see the options for the CLI config file inside the source code for Metro here, and here is a common rn-cli.config.js used for supporting TypeScript in React Native projects:
You can see the options for the CLI config on the metro website. Here's a common rn-cli.config.js used for supporting TypeScript in React Native projects:
module.exports = {
getTransformModulePath() {
return require.resolve('react-native-typescript-transformer');
diff --git a/docs/0.34/understanding-cli/index.html b/docs/0.34/understanding-cli/index.html
index d8607f76607..af106075deb 100644
--- a/docs/0.34/understanding-cli/index.html
+++ b/docs/0.34/understanding-cli/index.html
@@ -76,7 +76,7 @@
CLI Configs
When using react-native start, its platform derivatives, and react-native bundle you can use a file to define the CLI options used by React Native by default. If you create a file rn-cli.config.js in the root of your project, it will be evaluated and options for the commands will come from there.
You can see the options for the CLI config file inside the source code for Metro here, and here is a common rn-cli.config.js used for supporting TypeScript in React Native projects:
You can see the options for the CLI config on the metro website. Here's a common rn-cli.config.js used for supporting TypeScript in React Native projects:
module.exports = {
getTransformModulePath() {
return require.resolve('react-native-typescript-transformer');
diff --git a/docs/0.35/debugging.html b/docs/0.35/debugging.html
index 3912c639d84..6a34d81977a 100644
--- a/docs/0.35/debugging.html
+++ b/docs/0.35/debugging.html
@@ -113,7 +113,7 @@ YellowBox.ignoreWarnings(['Warning: ...']);
Projects with Native Code Only
The remainder of this guide only applies to projects made with react-native init
- or to those made with Create React Native App which have since ejected. For
+ or to those made with expo init or Create React Native App which have since ejected. For
more information about ejecting, please see
the guide on
the Create React Native App repository.
@@ -126,11 +126,11 @@ YellowBox.ignoreWarnings(['Warning: ...']);
You may also access these through Debug → Open System Log... in the iOS Simulator or by running adb logcat *:S ReactNative:V ReactNativeJS:V in a terminal while an Android app is running on a device or emulator.
-If you're using Create React Native App, console logs already appear in the same terminal output as the packager.
+If you're using Create React Native App or Expo CLI, console logs already appear in the same terminal output as the packager.
Debugging on a device with Chrome Developer Tools
-If you're using Create React Native App, this is configured for you already.
+If you're using Create React Native App or Expo CLI, this is configured for you already.
On iOS devices, open the file RCTWebSocketExecutor.m and change "localhost" to the IP address of your computer, then select "Debug JS Remotely" from the Developer Menu.
On Android 5.0+ devices connected via USB, you can use the adb command line tool to setup port forwarding from the device to your computer:
Projects with Native Code Only
The remainder of this guide only applies to projects made with react-native init
- or to those made with Create React Native App which have since ejected. For
+ or to those made with expo init or Create React Native App which have since ejected. For
more information about ejecting, please see
the guide on
the Create React Native App repository.
@@ -126,11 +126,11 @@ YellowBox.ignoreWarnings(['Warning: ...']);
You may also access these through Debug → Open System Log... in the iOS Simulator or by running adb logcat *:S ReactNative:V ReactNativeJS:V in a terminal while an Android app is running on a device or emulator.
-If you're using Create React Native App, console logs already appear in the same terminal output as the packager.
+If you're using Create React Native App or Expo CLI, console logs already appear in the same terminal output as the packager.
Debugging on a device with Chrome Developer Tools
-If you're using Create React Native App, this is configured for you already.
+If you're using Create React Native App or Expo CLI, this is configured for you already.
On iOS devices, open the file RCTWebSocketExecutor.m and change "localhost" to the IP address of your computer, then select "Debug JS Remotely" from the Developer Menu.
On Android 5.0+ devices connected via USB, you can use the adb command line tool to setup port forwarding from the device to your computer:
Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.
2. Install the Android SDK
-Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.0 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.1 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".
-The SDK Manager can also be found within the Android Studio "Preferences" dialog, under Appearance & Behavior → System Settings → Android SDK.
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.0 (Oreo) entry, then make sure the following items are all checked:
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.1 (Oreo) entry, then make sure the following items are all checked:
-
-
Android SDK Platform 26
+Android SDK Platform 27Google APIs Intel x86 Atom_64 System Image
Add the following lines to your $HOME/.bash_profile config file:
export ANDROID_HOME=$HOME/Library/Android/sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
export ANDROID_HOME=$HOME/Android/Sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
diff --git a/docs/0.35/getting-started/index.html b/docs/0.35/getting-started/index.html index 959128264d1..3bb33cf5f9e 100644 --- a/docs/0.35/getting-started/index.html +++ b/docs/0.35/getting-started/index.html @@ -260,7 +260,7 @@ npm start
Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.
2. Install the Android SDK
-Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.0 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.1 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".
-The SDK Manager can also be found within the Android Studio "Preferences" dialog, under Appearance & Behavior → System Settings → Android SDK.
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.0 (Oreo) entry, then make sure the following items are all checked:
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.1 (Oreo) entry, then make sure the following items are all checked:
-
-
Android SDK Platform 26
+Android SDK Platform 27Google APIs Intel x86 Atom_64 System Image
Add the following lines to your $HOME/.bash_profile config file:
export ANDROID_HOME=$HOME/Library/Android/sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
export ANDROID_HOME=$HOME/Android/Sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
diff --git a/docs/0.35/images.html b/docs/0.35/images.html index 24f62df16da..dbf74f0fd17 100644 --- a/docs/0.35/images.html +++ b/docs/0.35/images.html @@ -77,7 +77,7 @@ var icon = this.props.activeNote that image sources required this way include size (width, height) info for the Image. If you need to scale the image dynamically (i.e. via flex), you may need to manually set
{ width: undefined, height: undefined }on the style attribute.Static Non-Image Resources
The
-requiresyntax described above can be used to statically include audio, video or document files in your project as well. Most common file types are supported including.mp3,.wav,.mp4,.mov,.htmlandYou can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
+You can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
A caveat is that videos must use absolute positioning instead of
flexGrow, since size info is not currently passed for non-image assets. This limitation doesn't occur for videos that are linked directly into Xcode or the Assets folder for Android.Images From Hybrid App's Resources
If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app.
diff --git a/docs/0.35/images/index.html b/docs/0.35/images/index.html index 24f62df16da..dbf74f0fd17 100644 --- a/docs/0.35/images/index.html +++ b/docs/0.35/images/index.html @@ -77,7 +77,7 @@ var icon = this.props.activeNote that image sources required this way include size (width, height) info for the Image. If you need to scale the image dynamically (i.e. via flex), you may need to manually set
{ width: undefined, height: undefined }on the style attribute.Static Non-Image Resources
The
-requiresyntax described above can be used to statically include audio, video or document files in your project as well. Most common file types are supported including.mp3,.wav,.mp4,.mov,.htmlandYou can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
+You can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
A caveat is that videos must use absolute positioning instead of
flexGrow, since size info is not currently passed for non-image assets. This limitation doesn't occur for videos that are linked directly into Xcode or the Assets folder for Android.Images From Hybrid App's Resources
If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app.
diff --git a/docs/0.35/navigation.html b/docs/0.35/navigation.html index 62091b76a56..d4ef422ff12 100644 --- a/docs/0.35/navigation.html +++ b/docs/0.35/navigation.html @@ -36,7 +36,7 @@
Navigating Between Screens
Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.
This guide covers the various navigation components available in React Native. If you are just getting started with navigation, you will probably want to use React Navigation. React Navigation provides an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android.
If you're only targeting iOS, you may want to also check out NavigatorIOS as a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native UINavigationController class. This component will not work on Android, however.
If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms:react-native-navigation.
+If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: react-native-navigation.
React Navigation
The community solution to navigation is a standalone library that allows developers to set up the screens of an app with just a few lines of code.
The first step is to install in your project:
diff --git a/docs/0.35/navigation/index.html b/docs/0.35/navigation/index.html index 62091b76a56..d4ef422ff12 100644 --- a/docs/0.35/navigation/index.html +++ b/docs/0.35/navigation/index.html @@ -36,7 +36,7 @@Navigating Between Screens
Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.
This guide covers the various navigation components available in React Native. If you are just getting started with navigation, you will probably want to use React Navigation. React Navigation provides an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android.
If you're only targeting iOS, you may want to also check out NavigatorIOS as a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native UINavigationController class. This component will not work on Android, however.
If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms:react-native-navigation.
+If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: react-native-navigation.
React Navigation
The community solution to navigation is a standalone library that allows developers to set up the screens of an app with just a few lines of code.
The first step is to install in your project:
diff --git a/docs/0.35/running-on-device.html b/docs/0.35/running-on-device.html index 777aa47c21e..0461c17bdb6 100644 --- a/docs/0.35/running-on-device.html +++ b/docs/0.35/running-on-device.html @@ -102,7 +102,7 @@ }It's always a good idea to test your app on an actual device before releasing it to your users. This document will guide you through the necessary steps to run your React Native app on a device and to get it ready for production.
-If you used Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
+If you used Expo CLI or Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
- @@ -125,7 +125,7 @@ Windows
A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Create React Native App, which will allow you to run your app using the Expo client app.
+A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app.
1. Plug in your device via USB
Connect your iOS device to your Mac using a USB to Lightning cable. Navigate to the ios folder in your project, then open the .xcodeproj file, or if you are using CocoaPods open .xcworkspace, within it using Xcode.
It's always a good idea to test your app on an actual device before releasing it to your users. This document will guide you through the necessary steps to run your React Native app on a device and to get it ready for production.
-If you used Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
+If you used Expo CLI or Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
- @@ -125,7 +125,7 @@ Windows
A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Create React Native App, which will allow you to run your app using the Expo client app.
+A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app.
1. Plug in your device via USB
Connect your iOS device to your Mac using a USB to Lightning cable. Navigate to the ios folder in your project, then open the .xcodeproj file, or if you are using CocoaPods open .xcworkspace, within it using Xcode.
-Note: Make sure gradle.properties does not include org.gradle.configureondemand=true as that will make the release build skip bundling JS and assets into the APK.
The generated APK can be found under android/app/build/outputs/apk/app-release.apk, and is ready to be distributed.
The generated APK can be found under android/app/build/outputs/apk/release/app-release.apk, and is ready to be distributed.
Testing the release build of your app
Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using:
$ react-native run-android --variant=release
diff --git a/docs/0.35/signed-apk-android/index.html b/docs/0.35/signed-apk-android/index.html
index 99f2956972c..e5dd476b90f 100644
--- a/docs/0.35/signed-apk-android/index.html
+++ b/docs/0.35/signed-apk-android/index.html
@@ -102,7 +102,7 @@ $ ./gradlew assembleRelease
Note: Make sure gradle.properties does not include org.gradle.configureondemand=true as that will make the release build skip bundling JS and assets into the APK.
-The generated APK can be found under android/app/build/outputs/apk/app-release.apk, and is ready to be distributed.
+The generated APK can be found under android/app/build/outputs/apk/release/app-release.apk, and is ready to be distributed.
Testing the release build of your app
Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using:
$ react-native run-android --variant=release
diff --git a/docs/0.35/understanding-cli.html b/docs/0.35/understanding-cli.html
index 9196ed01e09..0a122736fe0 100644
--- a/docs/0.35/understanding-cli.html
+++ b/docs/0.35/understanding-cli.html
@@ -76,7 +76,7 @@
CLI Configs
When using react-native start, its platform derivatives, and react-native bundle you can use a file to define the CLI options used by React Native by default. If you create a file rn-cli.config.js in the root of your project, it will be evaluated and options for the commands will come from there.
You can see the options for the CLI config file inside the source code for Metro here, and here is a common rn-cli.config.js used for supporting TypeScript in React Native projects:
You can see the options for the CLI config on the metro website. Here's a common rn-cli.config.js used for supporting TypeScript in React Native projects:
module.exports = {
getTransformModulePath() {
return require.resolve('react-native-typescript-transformer');
diff --git a/docs/0.35/understanding-cli/index.html b/docs/0.35/understanding-cli/index.html
index 9196ed01e09..0a122736fe0 100644
--- a/docs/0.35/understanding-cli/index.html
+++ b/docs/0.35/understanding-cli/index.html
@@ -76,7 +76,7 @@
CLI Configs
When using react-native start, its platform derivatives, and react-native bundle you can use a file to define the CLI options used by React Native by default. If you create a file rn-cli.config.js in the root of your project, it will be evaluated and options for the commands will come from there.
You can see the options for the CLI config file inside the source code for Metro here, and here is a common rn-cli.config.js used for supporting TypeScript in React Native projects:
You can see the options for the CLI config on the metro website. Here's a common rn-cli.config.js used for supporting TypeScript in React Native projects:
module.exports = {
getTransformModulePath() {
return require.resolve('react-native-typescript-transformer');
diff --git a/docs/0.36/debugging.html b/docs/0.36/debugging.html
index 5a83fd32ac4..416d4b780d6 100644
--- a/docs/0.36/debugging.html
+++ b/docs/0.36/debugging.html
@@ -113,7 +113,7 @@ YellowBox.ignoreWarnings(['Warning: ...']);
Projects with Native Code Only
The remainder of this guide only applies to projects made with react-native init
- or to those made with Create React Native App which have since ejected. For
+ or to those made with expo init or Create React Native App which have since ejected. For
more information about ejecting, please see
the guide on
the Create React Native App repository.
@@ -126,11 +126,11 @@ YellowBox.ignoreWarnings(['Warning: ...']);
You may also access these through Debug → Open System Log... in the iOS Simulator or by running adb logcat *:S ReactNative:V ReactNativeJS:V in a terminal while an Android app is running on a device or emulator.
-If you're using Create React Native App, console logs already appear in the same terminal output as the packager.
+If you're using Create React Native App or Expo CLI, console logs already appear in the same terminal output as the packager.
Debugging on a device with Chrome Developer Tools
-If you're using Create React Native App, this is configured for you already.
+If you're using Create React Native App or Expo CLI, this is configured for you already.
On iOS devices, open the file RCTWebSocketExecutor.m and change "localhost" to the IP address of your computer, then select "Debug JS Remotely" from the Developer Menu.
On Android 5.0+ devices connected via USB, you can use the adb command line tool to setup port forwarding from the device to your computer:
Projects with Native Code Only
The remainder of this guide only applies to projects made with react-native init
- or to those made with Create React Native App which have since ejected. For
+ or to those made with expo init or Create React Native App which have since ejected. For
more information about ejecting, please see
the guide on
the Create React Native App repository.
@@ -126,11 +126,11 @@ YellowBox.ignoreWarnings(['Warning: ...']);
You may also access these through Debug → Open System Log... in the iOS Simulator or by running adb logcat *:S ReactNative:V ReactNativeJS:V in a terminal while an Android app is running on a device or emulator.
-If you're using Create React Native App, console logs already appear in the same terminal output as the packager.
+If you're using Create React Native App or Expo CLI, console logs already appear in the same terminal output as the packager.
Debugging on a device with Chrome Developer Tools
-If you're using Create React Native App, this is configured for you already.
+If you're using Create React Native App or Expo CLI, this is configured for you already.
On iOS devices, open the file RCTWebSocketExecutor.m and change "localhost" to the IP address of your computer, then select "Debug JS Remotely" from the Developer Menu.
On Android 5.0+ devices connected via USB, you can use the adb command line tool to setup port forwarding from the device to your computer:
Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.
2. Install the Android SDK
-Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.0 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.1 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".
-The SDK Manager can also be found within the Android Studio "Preferences" dialog, under Appearance & Behavior → System Settings → Android SDK.
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.0 (Oreo) entry, then make sure the following items are all checked:
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.1 (Oreo) entry, then make sure the following items are all checked:
-
-
Android SDK Platform 26
+Android SDK Platform 27Google APIs Intel x86 Atom_64 System Image
Add the following lines to your $HOME/.bash_profile config file:
export ANDROID_HOME=$HOME/Library/Android/sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
export ANDROID_HOME=$HOME/Android/Sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
diff --git a/docs/0.36/getting-started/index.html b/docs/0.36/getting-started/index.html index 977bbb9da36..55872642d51 100644 --- a/docs/0.36/getting-started/index.html +++ b/docs/0.36/getting-started/index.html @@ -260,7 +260,7 @@ npm start
Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.
2. Install the Android SDK
-Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.0 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.1 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".
-The SDK Manager can also be found within the Android Studio "Preferences" dialog, under Appearance & Behavior → System Settings → Android SDK.
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.0 (Oreo) entry, then make sure the following items are all checked:
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.1 (Oreo) entry, then make sure the following items are all checked:
-
-
Android SDK Platform 26
+Android SDK Platform 27Google APIs Intel x86 Atom_64 System Image
Add the following lines to your $HOME/.bash_profile config file:
export ANDROID_HOME=$HOME/Library/Android/sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
export ANDROID_HOME=$HOME/Android/Sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
diff --git a/docs/0.36/images.html b/docs/0.36/images.html index 70e92d48ac4..e59375cf0fc 100644 --- a/docs/0.36/images.html +++ b/docs/0.36/images.html @@ -77,7 +77,7 @@ var icon = this.props.activeNote that image sources required this way include size (width, height) info for the Image. If you need to scale the image dynamically (i.e. via flex), you may need to manually set
{ width: undefined, height: undefined }on the style attribute.Static Non-Image Resources
The
-requiresyntax described above can be used to statically include audio, video or document files in your project as well. Most common file types are supported including.mp3,.wav,.mp4,.mov,.htmlandYou can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
+You can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
A caveat is that videos must use absolute positioning instead of
flexGrow, since size info is not currently passed for non-image assets. This limitation doesn't occur for videos that are linked directly into Xcode or the Assets folder for Android.Images From Hybrid App's Resources
If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app.
diff --git a/docs/0.36/images/index.html b/docs/0.36/images/index.html index 70e92d48ac4..e59375cf0fc 100644 --- a/docs/0.36/images/index.html +++ b/docs/0.36/images/index.html @@ -77,7 +77,7 @@ var icon = this.props.activeNote that image sources required this way include size (width, height) info for the Image. If you need to scale the image dynamically (i.e. via flex), you may need to manually set
{ width: undefined, height: undefined }on the style attribute.Static Non-Image Resources
The
-requiresyntax described above can be used to statically include audio, video or document files in your project as well. Most common file types are supported including.mp3,.wav,.mp4,.mov,.htmlandYou can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
+You can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
A caveat is that videos must use absolute positioning instead of
flexGrow, since size info is not currently passed for non-image assets. This limitation doesn't occur for videos that are linked directly into Xcode or the Assets folder for Android.Images From Hybrid App's Resources
If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app.
diff --git a/docs/0.36/navigation.html b/docs/0.36/navigation.html index e8ad522e63e..fb4325054c2 100644 --- a/docs/0.36/navigation.html +++ b/docs/0.36/navigation.html @@ -36,7 +36,7 @@
Navigating Between Screens
Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.
This guide covers the various navigation components available in React Native. If you are just getting started with navigation, you will probably want to use React Navigation. React Navigation provides an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android.
If you're only targeting iOS, you may want to also check out NavigatorIOS as a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native UINavigationController class. This component will not work on Android, however.
If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms:react-native-navigation.
+If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: react-native-navigation.
React Navigation
The community solution to navigation is a standalone library that allows developers to set up the screens of an app with just a few lines of code.
The first step is to install in your project:
diff --git a/docs/0.36/navigation/index.html b/docs/0.36/navigation/index.html index e8ad522e63e..fb4325054c2 100644 --- a/docs/0.36/navigation/index.html +++ b/docs/0.36/navigation/index.html @@ -36,7 +36,7 @@Navigating Between Screens
Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.
This guide covers the various navigation components available in React Native. If you are just getting started with navigation, you will probably want to use React Navigation. React Navigation provides an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android.
If you're only targeting iOS, you may want to also check out NavigatorIOS as a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native UINavigationController class. This component will not work on Android, however.
If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms:react-native-navigation.
+If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: react-native-navigation.
React Navigation
The community solution to navigation is a standalone library that allows developers to set up the screens of an app with just a few lines of code.
The first step is to install in your project:
diff --git a/docs/0.36/running-on-device.html b/docs/0.36/running-on-device.html index 097bc18a64d..409aa471e54 100644 --- a/docs/0.36/running-on-device.html +++ b/docs/0.36/running-on-device.html @@ -102,7 +102,7 @@ }It's always a good idea to test your app on an actual device before releasing it to your users. This document will guide you through the necessary steps to run your React Native app on a device and to get it ready for production.
-If you used Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
+If you used Expo CLI or Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
- @@ -125,7 +125,7 @@ Windows
A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Create React Native App, which will allow you to run your app using the Expo client app.
+A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app.
1. Plug in your device via USB
Connect your iOS device to your Mac using a USB to Lightning cable. Navigate to the ios folder in your project, then open the .xcodeproj file, or if you are using CocoaPods open .xcworkspace, within it using Xcode.
It's always a good idea to test your app on an actual device before releasing it to your users. This document will guide you through the necessary steps to run your React Native app on a device and to get it ready for production.
-If you used Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
+If you used Expo CLI or Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
- @@ -125,7 +125,7 @@ Windows
A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Create React Native App, which will allow you to run your app using the Expo client app.
+A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app.
1. Plug in your device via USB
Connect your iOS device to your Mac using a USB to Lightning cable. Navigate to the ios folder in your project, then open the .xcodeproj file, or if you are using CocoaPods open .xcworkspace, within it using Xcode.
-Note: Make sure gradle.properties does not include org.gradle.configureondemand=true as that will make the release build skip bundling JS and assets into the APK.
The generated APK can be found under android/app/build/outputs/apk/app-release.apk, and is ready to be distributed.
The generated APK can be found under android/app/build/outputs/apk/release/app-release.apk, and is ready to be distributed.
Testing the release build of your app
Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using:
$ react-native run-android --variant=release
diff --git a/docs/0.36/signed-apk-android/index.html b/docs/0.36/signed-apk-android/index.html
index c723eefbf25..2b67224474f 100644
--- a/docs/0.36/signed-apk-android/index.html
+++ b/docs/0.36/signed-apk-android/index.html
@@ -102,7 +102,7 @@ $ ./gradlew assembleRelease
Note: Make sure gradle.properties does not include org.gradle.configureondemand=true as that will make the release build skip bundling JS and assets into the APK.
-The generated APK can be found under android/app/build/outputs/apk/app-release.apk, and is ready to be distributed.
+The generated APK can be found under android/app/build/outputs/apk/release/app-release.apk, and is ready to be distributed.
Testing the release build of your app
Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using:
$ react-native run-android --variant=release
diff --git a/docs/0.36/understanding-cli.html b/docs/0.36/understanding-cli.html
index 63328884d03..c5b30c075b7 100644
--- a/docs/0.36/understanding-cli.html
+++ b/docs/0.36/understanding-cli.html
@@ -76,7 +76,7 @@
CLI Configs
When using react-native start, its platform derivatives, and react-native bundle you can use a file to define the CLI options used by React Native by default. If you create a file rn-cli.config.js in the root of your project, it will be evaluated and options for the commands will come from there.
You can see the options for the CLI config file inside the source code for Metro here, and here is a common rn-cli.config.js used for supporting TypeScript in React Native projects:
You can see the options for the CLI config on the metro website. Here's a common rn-cli.config.js used for supporting TypeScript in React Native projects:
module.exports = {
getTransformModulePath() {
return require.resolve('react-native-typescript-transformer');
diff --git a/docs/0.36/understanding-cli/index.html b/docs/0.36/understanding-cli/index.html
index 63328884d03..c5b30c075b7 100644
--- a/docs/0.36/understanding-cli/index.html
+++ b/docs/0.36/understanding-cli/index.html
@@ -76,7 +76,7 @@
CLI Configs
When using react-native start, its platform derivatives, and react-native bundle you can use a file to define the CLI options used by React Native by default. If you create a file rn-cli.config.js in the root of your project, it will be evaluated and options for the commands will come from there.
You can see the options for the CLI config file inside the source code for Metro here, and here is a common rn-cli.config.js used for supporting TypeScript in React Native projects:
You can see the options for the CLI config on the metro website. Here's a common rn-cli.config.js used for supporting TypeScript in React Native projects:
module.exports = {
getTransformModulePath() {
return require.resolve('react-native-typescript-transformer');
diff --git a/docs/0.37/debugging.html b/docs/0.37/debugging.html
index 35b80e08f1e..8e64c834cd3 100644
--- a/docs/0.37/debugging.html
+++ b/docs/0.37/debugging.html
@@ -113,7 +113,7 @@ YellowBox.ignoreWarnings(['Warning: ...']);
Projects with Native Code Only
The remainder of this guide only applies to projects made with react-native init
- or to those made with Create React Native App which have since ejected. For
+ or to those made with expo init or Create React Native App which have since ejected. For
more information about ejecting, please see
the guide on
the Create React Native App repository.
@@ -126,11 +126,11 @@ YellowBox.ignoreWarnings(['Warning: ...']);
You may also access these through Debug → Open System Log... in the iOS Simulator or by running adb logcat *:S ReactNative:V ReactNativeJS:V in a terminal while an Android app is running on a device or emulator.
-If you're using Create React Native App, console logs already appear in the same terminal output as the packager.
+If you're using Create React Native App or Expo CLI, console logs already appear in the same terminal output as the packager.
Debugging on a device with Chrome Developer Tools
-If you're using Create React Native App, this is configured for you already.
+If you're using Create React Native App or Expo CLI, this is configured for you already.
On iOS devices, open the file RCTWebSocketExecutor.m and change "localhost" to the IP address of your computer, then select "Debug JS Remotely" from the Developer Menu.
On Android 5.0+ devices connected via USB, you can use the adb command line tool to setup port forwarding from the device to your computer:
Projects with Native Code Only
The remainder of this guide only applies to projects made with react-native init
- or to those made with Create React Native App which have since ejected. For
+ or to those made with expo init or Create React Native App which have since ejected. For
more information about ejecting, please see
the guide on
the Create React Native App repository.
@@ -126,11 +126,11 @@ YellowBox.ignoreWarnings(['Warning: ...']);
You may also access these through Debug → Open System Log... in the iOS Simulator or by running adb logcat *:S ReactNative:V ReactNativeJS:V in a terminal while an Android app is running on a device or emulator.
-If you're using Create React Native App, console logs already appear in the same terminal output as the packager.
+If you're using Create React Native App or Expo CLI, console logs already appear in the same terminal output as the packager.
Debugging on a device with Chrome Developer Tools
-If you're using Create React Native App, this is configured for you already.
+If you're using Create React Native App or Expo CLI, this is configured for you already.
On iOS devices, open the file RCTWebSocketExecutor.m and change "localhost" to the IP address of your computer, then select "Debug JS Remotely" from the Developer Menu.
On Android 5.0+ devices connected via USB, you can use the adb command line tool to setup port forwarding from the device to your computer:
Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.
2. Install the Android SDK
-Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.0 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.1 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".
-The SDK Manager can also be found within the Android Studio "Preferences" dialog, under Appearance & Behavior → System Settings → Android SDK.
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.0 (Oreo) entry, then make sure the following items are all checked:
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.1 (Oreo) entry, then make sure the following items are all checked:
-
-
Android SDK Platform 26
+Android SDK Platform 27Google APIs Intel x86 Atom_64 System Image
Add the following lines to your $HOME/.bash_profile config file:
export ANDROID_HOME=$HOME/Library/Android/sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
export ANDROID_HOME=$HOME/Android/Sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
diff --git a/docs/0.37/getting-started/index.html b/docs/0.37/getting-started/index.html index 9647757654c..deeee1f135d 100644 --- a/docs/0.37/getting-started/index.html +++ b/docs/0.37/getting-started/index.html @@ -260,7 +260,7 @@ npm start
Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.
2. Install the Android SDK
-Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.0 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.1 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".
-The SDK Manager can also be found within the Android Studio "Preferences" dialog, under Appearance & Behavior → System Settings → Android SDK.
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.0 (Oreo) entry, then make sure the following items are all checked:
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.1 (Oreo) entry, then make sure the following items are all checked:
-
-
Android SDK Platform 26
+Android SDK Platform 27Google APIs Intel x86 Atom_64 System Image
Add the following lines to your $HOME/.bash_profile config file:
export ANDROID_HOME=$HOME/Library/Android/sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
export ANDROID_HOME=$HOME/Android/Sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
diff --git a/docs/0.37/images.html b/docs/0.37/images.html index 505e43d4fb0..6c24106610a 100644 --- a/docs/0.37/images.html +++ b/docs/0.37/images.html @@ -77,7 +77,7 @@ var icon = this.props.activeNote that image sources required this way include size (width, height) info for the Image. If you need to scale the image dynamically (i.e. via flex), you may need to manually set
{ width: undefined, height: undefined }on the style attribute.Static Non-Image Resources
The
-requiresyntax described above can be used to statically include audio, video or document files in your project as well. Most common file types are supported including.mp3,.wav,.mp4,.mov,.htmlandYou can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
+You can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
A caveat is that videos must use absolute positioning instead of
flexGrow, since size info is not currently passed for non-image assets. This limitation doesn't occur for videos that are linked directly into Xcode or the Assets folder for Android.Images From Hybrid App's Resources
If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app.
diff --git a/docs/0.37/images/index.html b/docs/0.37/images/index.html index 505e43d4fb0..6c24106610a 100644 --- a/docs/0.37/images/index.html +++ b/docs/0.37/images/index.html @@ -77,7 +77,7 @@ var icon = this.props.activeNote that image sources required this way include size (width, height) info for the Image. If you need to scale the image dynamically (i.e. via flex), you may need to manually set
{ width: undefined, height: undefined }on the style attribute.Static Non-Image Resources
The
-requiresyntax described above can be used to statically include audio, video or document files in your project as well. Most common file types are supported including.mp3,.wav,.mp4,.mov,.htmlandYou can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
+You can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
A caveat is that videos must use absolute positioning instead of
flexGrow, since size info is not currently passed for non-image assets. This limitation doesn't occur for videos that are linked directly into Xcode or the Assets folder for Android.Images From Hybrid App's Resources
If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app.
diff --git a/docs/0.37/navigation.html b/docs/0.37/navigation.html index ee0bfe2ca02..097c57779b8 100644 --- a/docs/0.37/navigation.html +++ b/docs/0.37/navigation.html @@ -36,7 +36,7 @@
Navigating Between Screens
Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.
This guide covers the various navigation components available in React Native. If you are just getting started with navigation, you will probably want to use React Navigation. React Navigation provides an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android.
If you're only targeting iOS, you may want to also check out NavigatorIOS as a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native UINavigationController class. This component will not work on Android, however.
If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms:react-native-navigation.
+If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: react-native-navigation.
React Navigation
The community solution to navigation is a standalone library that allows developers to set up the screens of an app with just a few lines of code.
The first step is to install in your project:
diff --git a/docs/0.37/navigation/index.html b/docs/0.37/navigation/index.html index ee0bfe2ca02..097c57779b8 100644 --- a/docs/0.37/navigation/index.html +++ b/docs/0.37/navigation/index.html @@ -36,7 +36,7 @@Navigating Between Screens
Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.
This guide covers the various navigation components available in React Native. If you are just getting started with navigation, you will probably want to use React Navigation. React Navigation provides an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android.
If you're only targeting iOS, you may want to also check out NavigatorIOS as a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native UINavigationController class. This component will not work on Android, however.
If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms:react-native-navigation.
+If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: react-native-navigation.
React Navigation
The community solution to navigation is a standalone library that allows developers to set up the screens of an app with just a few lines of code.
The first step is to install in your project:
diff --git a/docs/0.37/running-on-device.html b/docs/0.37/running-on-device.html index fe47f4cd446..0f507d157cf 100644 --- a/docs/0.37/running-on-device.html +++ b/docs/0.37/running-on-device.html @@ -102,7 +102,7 @@ }It's always a good idea to test your app on an actual device before releasing it to your users. This document will guide you through the necessary steps to run your React Native app on a device and to get it ready for production.
-If you used Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
+If you used Expo CLI or Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
- @@ -125,7 +125,7 @@ Windows
A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Create React Native App, which will allow you to run your app using the Expo client app.
+A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app.
1. Plug in your device via USB
Connect your iOS device to your Mac using a USB to Lightning cable. Navigate to the ios folder in your project, then open the .xcodeproj file, or if you are using CocoaPods open .xcworkspace, within it using Xcode.
It's always a good idea to test your app on an actual device before releasing it to your users. This document will guide you through the necessary steps to run your React Native app on a device and to get it ready for production.
-If you used Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
+If you used Expo CLI or Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
- @@ -125,7 +125,7 @@ Windows
A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Create React Native App, which will allow you to run your app using the Expo client app.
+A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app.
1. Plug in your device via USB
Connect your iOS device to your Mac using a USB to Lightning cable. Navigate to the ios folder in your project, then open the .xcodeproj file, or if you are using CocoaPods open .xcworkspace, within it using Xcode.
-Note: Make sure gradle.properties does not include org.gradle.configureondemand=true as that will make the release build skip bundling JS and assets into the APK.
The generated APK can be found under android/app/build/outputs/apk/app-release.apk, and is ready to be distributed.
The generated APK can be found under android/app/build/outputs/apk/release/app-release.apk, and is ready to be distributed.
Testing the release build of your app
Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using:
$ react-native run-android --variant=release
diff --git a/docs/0.37/signed-apk-android/index.html b/docs/0.37/signed-apk-android/index.html
index 9fd9fe1fe4c..cda8e18b2ef 100644
--- a/docs/0.37/signed-apk-android/index.html
+++ b/docs/0.37/signed-apk-android/index.html
@@ -102,7 +102,7 @@ $ ./gradlew assembleRelease
Note: Make sure gradle.properties does not include org.gradle.configureondemand=true as that will make the release build skip bundling JS and assets into the APK.
-The generated APK can be found under android/app/build/outputs/apk/app-release.apk, and is ready to be distributed.
+The generated APK can be found under android/app/build/outputs/apk/release/app-release.apk, and is ready to be distributed.
Testing the release build of your app
Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using:
$ react-native run-android --variant=release
diff --git a/docs/0.37/understanding-cli.html b/docs/0.37/understanding-cli.html
index ca5027868c0..8918c5ec8a6 100644
--- a/docs/0.37/understanding-cli.html
+++ b/docs/0.37/understanding-cli.html
@@ -76,7 +76,7 @@
CLI Configs
When using react-native start, its platform derivatives, and react-native bundle you can use a file to define the CLI options used by React Native by default. If you create a file rn-cli.config.js in the root of your project, it will be evaluated and options for the commands will come from there.
You can see the options for the CLI config file inside the source code for Metro here, and here is a common rn-cli.config.js used for supporting TypeScript in React Native projects:
You can see the options for the CLI config on the metro website. Here's a common rn-cli.config.js used for supporting TypeScript in React Native projects:
module.exports = {
getTransformModulePath() {
return require.resolve('react-native-typescript-transformer');
diff --git a/docs/0.37/understanding-cli/index.html b/docs/0.37/understanding-cli/index.html
index ca5027868c0..8918c5ec8a6 100644
--- a/docs/0.37/understanding-cli/index.html
+++ b/docs/0.37/understanding-cli/index.html
@@ -76,7 +76,7 @@
CLI Configs
When using react-native start, its platform derivatives, and react-native bundle you can use a file to define the CLI options used by React Native by default. If you create a file rn-cli.config.js in the root of your project, it will be evaluated and options for the commands will come from there.
You can see the options for the CLI config file inside the source code for Metro here, and here is a common rn-cli.config.js used for supporting TypeScript in React Native projects:
You can see the options for the CLI config on the metro website. Here's a common rn-cli.config.js used for supporting TypeScript in React Native projects:
module.exports = {
getTransformModulePath() {
return require.resolve('react-native-typescript-transformer');
diff --git a/docs/0.38/debugging.html b/docs/0.38/debugging.html
index 1813ea671e5..f4f46d33fc0 100644
--- a/docs/0.38/debugging.html
+++ b/docs/0.38/debugging.html
@@ -113,7 +113,7 @@ YellowBox.ignoreWarnings(['Warning: ...']);
Projects with Native Code Only
The remainder of this guide only applies to projects made with react-native init
- or to those made with Create React Native App which have since ejected. For
+ or to those made with expo init or Create React Native App which have since ejected. For
more information about ejecting, please see
the guide on
the Create React Native App repository.
@@ -126,11 +126,11 @@ YellowBox.ignoreWarnings(['Warning: ...']);
You may also access these through Debug → Open System Log... in the iOS Simulator or by running adb logcat *:S ReactNative:V ReactNativeJS:V in a terminal while an Android app is running on a device or emulator.
-If you're using Create React Native App, console logs already appear in the same terminal output as the packager.
+If you're using Create React Native App or Expo CLI, console logs already appear in the same terminal output as the packager.
Debugging on a device with Chrome Developer Tools
-If you're using Create React Native App, this is configured for you already.
+If you're using Create React Native App or Expo CLI, this is configured for you already.
On iOS devices, open the file RCTWebSocketExecutor.m and change "localhost" to the IP address of your computer, then select "Debug JS Remotely" from the Developer Menu.
On Android 5.0+ devices connected via USB, you can use the adb command line tool to setup port forwarding from the device to your computer:
Projects with Native Code Only
The remainder of this guide only applies to projects made with react-native init
- or to those made with Create React Native App which have since ejected. For
+ or to those made with expo init or Create React Native App which have since ejected. For
more information about ejecting, please see
the guide on
the Create React Native App repository.
@@ -126,11 +126,11 @@ YellowBox.ignoreWarnings(['Warning: ...']);
You may also access these through Debug → Open System Log... in the iOS Simulator or by running adb logcat *:S ReactNative:V ReactNativeJS:V in a terminal while an Android app is running on a device or emulator.
-If you're using Create React Native App, console logs already appear in the same terminal output as the packager.
+If you're using Create React Native App or Expo CLI, console logs already appear in the same terminal output as the packager.
Debugging on a device with Chrome Developer Tools
-If you're using Create React Native App, this is configured for you already.
+If you're using Create React Native App or Expo CLI, this is configured for you already.
On iOS devices, open the file RCTWebSocketExecutor.m and change "localhost" to the IP address of your computer, then select "Debug JS Remotely" from the Developer Menu.
On Android 5.0+ devices connected via USB, you can use the adb command line tool to setup port forwarding from the device to your computer:
Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.
2. Install the Android SDK
-Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.0 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.1 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".
-The SDK Manager can also be found within the Android Studio "Preferences" dialog, under Appearance & Behavior → System Settings → Android SDK.
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.0 (Oreo) entry, then make sure the following items are all checked:
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.1 (Oreo) entry, then make sure the following items are all checked:
-
-
Android SDK Platform 26
+Android SDK Platform 27Google APIs Intel x86 Atom_64 System Image
Add the following lines to your $HOME/.bash_profile config file:
export ANDROID_HOME=$HOME/Library/Android/sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
export ANDROID_HOME=$HOME/Android/Sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
diff --git a/docs/0.38/getting-started/index.html b/docs/0.38/getting-started/index.html index d0c99d895c7..280f422a18d 100644 --- a/docs/0.38/getting-started/index.html +++ b/docs/0.38/getting-started/index.html @@ -260,7 +260,7 @@ npm start
Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.
2. Install the Android SDK
-Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.0 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.1 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".
-The SDK Manager can also be found within the Android Studio "Preferences" dialog, under Appearance & Behavior → System Settings → Android SDK.
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.0 (Oreo) entry, then make sure the following items are all checked:
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.1 (Oreo) entry, then make sure the following items are all checked:
-
-
Android SDK Platform 26
+Android SDK Platform 27Google APIs Intel x86 Atom_64 System Image
Add the following lines to your $HOME/.bash_profile config file:
export ANDROID_HOME=$HOME/Library/Android/sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
export ANDROID_HOME=$HOME/Android/Sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
diff --git a/docs/0.38/images.html b/docs/0.38/images.html index b9427eee935..48a310a9076 100644 --- a/docs/0.38/images.html +++ b/docs/0.38/images.html @@ -77,7 +77,7 @@ var icon = this.props.activeNote that image sources required this way include size (width, height) info for the Image. If you need to scale the image dynamically (i.e. via flex), you may need to manually set
{ width: undefined, height: undefined }on the style attribute.Static Non-Image Resources
The
-requiresyntax described above can be used to statically include audio, video or document files in your project as well. Most common file types are supported including.mp3,.wav,.mp4,.mov,.htmlandYou can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
+You can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
A caveat is that videos must use absolute positioning instead of
flexGrow, since size info is not currently passed for non-image assets. This limitation doesn't occur for videos that are linked directly into Xcode or the Assets folder for Android.Images From Hybrid App's Resources
If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app.
diff --git a/docs/0.38/images/index.html b/docs/0.38/images/index.html index b9427eee935..48a310a9076 100644 --- a/docs/0.38/images/index.html +++ b/docs/0.38/images/index.html @@ -77,7 +77,7 @@ var icon = this.props.activeNote that image sources required this way include size (width, height) info for the Image. If you need to scale the image dynamically (i.e. via flex), you may need to manually set
{ width: undefined, height: undefined }on the style attribute.Static Non-Image Resources
The
-requiresyntax described above can be used to statically include audio, video or document files in your project as well. Most common file types are supported including.mp3,.wav,.mp4,.mov,.htmlandYou can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
+You can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
A caveat is that videos must use absolute positioning instead of
flexGrow, since size info is not currently passed for non-image assets. This limitation doesn't occur for videos that are linked directly into Xcode or the Assets folder for Android.Images From Hybrid App's Resources
If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app.
diff --git a/docs/0.38/navigation.html b/docs/0.38/navigation.html index 88cb6b119a8..b1eb2fa8ad9 100644 --- a/docs/0.38/navigation.html +++ b/docs/0.38/navigation.html @@ -36,7 +36,7 @@
Navigating Between Screens
Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.
This guide covers the various navigation components available in React Native. If you are just getting started with navigation, you will probably want to use React Navigation. React Navigation provides an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android.
If you're only targeting iOS, you may want to also check out NavigatorIOS as a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native UINavigationController class. This component will not work on Android, however.
If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms:react-native-navigation.
+If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: react-native-navigation.
React Navigation
The community solution to navigation is a standalone library that allows developers to set up the screens of an app with just a few lines of code.
The first step is to install in your project:
diff --git a/docs/0.38/navigation/index.html b/docs/0.38/navigation/index.html index 88cb6b119a8..b1eb2fa8ad9 100644 --- a/docs/0.38/navigation/index.html +++ b/docs/0.38/navigation/index.html @@ -36,7 +36,7 @@Navigating Between Screens
Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.
This guide covers the various navigation components available in React Native. If you are just getting started with navigation, you will probably want to use React Navigation. React Navigation provides an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android.
If you're only targeting iOS, you may want to also check out NavigatorIOS as a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native UINavigationController class. This component will not work on Android, however.
If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms:react-native-navigation.
+If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: react-native-navigation.
React Navigation
The community solution to navigation is a standalone library that allows developers to set up the screens of an app with just a few lines of code.
The first step is to install in your project:
diff --git a/docs/0.38/running-on-device.html b/docs/0.38/running-on-device.html index 5af57bd1c1d..908ffcb178c 100644 --- a/docs/0.38/running-on-device.html +++ b/docs/0.38/running-on-device.html @@ -102,7 +102,7 @@ }It's always a good idea to test your app on an actual device before releasing it to your users. This document will guide you through the necessary steps to run your React Native app on a device and to get it ready for production.
-If you used Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
+If you used Expo CLI or Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
- @@ -125,7 +125,7 @@ Windows
A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Create React Native App, which will allow you to run your app using the Expo client app.
+A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app.
1. Plug in your device via USB
Connect your iOS device to your Mac using a USB to Lightning cable. Navigate to the ios folder in your project, then open the .xcodeproj file, or if you are using CocoaPods open .xcworkspace, within it using Xcode.
It's always a good idea to test your app on an actual device before releasing it to your users. This document will guide you through the necessary steps to run your React Native app on a device and to get it ready for production.
-If you used Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
+If you used Expo CLI or Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
- @@ -125,7 +125,7 @@ Windows
A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Create React Native App, which will allow you to run your app using the Expo client app.
+A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app.
1. Plug in your device via USB
Connect your iOS device to your Mac using a USB to Lightning cable. Navigate to the ios folder in your project, then open the .xcodeproj file, or if you are using CocoaPods open .xcworkspace, within it using Xcode.
-Note: Make sure gradle.properties does not include org.gradle.configureondemand=true as that will make the release build skip bundling JS and assets into the APK.
The generated APK can be found under android/app/build/outputs/apk/app-release.apk, and is ready to be distributed.
The generated APK can be found under android/app/build/outputs/apk/release/app-release.apk, and is ready to be distributed.
Testing the release build of your app
Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using:
$ react-native run-android --variant=release
diff --git a/docs/0.38/signed-apk-android/index.html b/docs/0.38/signed-apk-android/index.html
index c527617ca98..3737174d40e 100644
--- a/docs/0.38/signed-apk-android/index.html
+++ b/docs/0.38/signed-apk-android/index.html
@@ -102,7 +102,7 @@ $ ./gradlew assembleRelease
Note: Make sure gradle.properties does not include org.gradle.configureondemand=true as that will make the release build skip bundling JS and assets into the APK.
-The generated APK can be found under android/app/build/outputs/apk/app-release.apk, and is ready to be distributed.
+The generated APK can be found under android/app/build/outputs/apk/release/app-release.apk, and is ready to be distributed.
Testing the release build of your app
Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using:
$ react-native run-android --variant=release
diff --git a/docs/0.38/understanding-cli.html b/docs/0.38/understanding-cli.html
index fa98e1a27e9..6c59fed6a3b 100644
--- a/docs/0.38/understanding-cli.html
+++ b/docs/0.38/understanding-cli.html
@@ -76,7 +76,7 @@
CLI Configs
When using react-native start, its platform derivatives, and react-native bundle you can use a file to define the CLI options used by React Native by default. If you create a file rn-cli.config.js in the root of your project, it will be evaluated and options for the commands will come from there.
You can see the options for the CLI config file inside the source code for Metro here, and here is a common rn-cli.config.js used for supporting TypeScript in React Native projects:
You can see the options for the CLI config on the metro website. Here's a common rn-cli.config.js used for supporting TypeScript in React Native projects:
module.exports = {
getTransformModulePath() {
return require.resolve('react-native-typescript-transformer');
diff --git a/docs/0.38/understanding-cli/index.html b/docs/0.38/understanding-cli/index.html
index fa98e1a27e9..6c59fed6a3b 100644
--- a/docs/0.38/understanding-cli/index.html
+++ b/docs/0.38/understanding-cli/index.html
@@ -76,7 +76,7 @@
CLI Configs
When using react-native start, its platform derivatives, and react-native bundle you can use a file to define the CLI options used by React Native by default. If you create a file rn-cli.config.js in the root of your project, it will be evaluated and options for the commands will come from there.
You can see the options for the CLI config file inside the source code for Metro here, and here is a common rn-cli.config.js used for supporting TypeScript in React Native projects:
You can see the options for the CLI config on the metro website. Here's a common rn-cli.config.js used for supporting TypeScript in React Native projects:
module.exports = {
getTransformModulePath() {
return require.resolve('react-native-typescript-transformer');
diff --git a/docs/0.39/debugging.html b/docs/0.39/debugging.html
index f7cc9a16959..11e79452e54 100644
--- a/docs/0.39/debugging.html
+++ b/docs/0.39/debugging.html
@@ -113,7 +113,7 @@ YellowBox.ignoreWarnings(['Warning: ...']);
Projects with Native Code Only
The remainder of this guide only applies to projects made with react-native init
- or to those made with Create React Native App which have since ejected. For
+ or to those made with expo init or Create React Native App which have since ejected. For
more information about ejecting, please see
the guide on
the Create React Native App repository.
@@ -126,11 +126,11 @@ YellowBox.ignoreWarnings(['Warning: ...']);
You may also access these through Debug → Open System Log... in the iOS Simulator or by running adb logcat *:S ReactNative:V ReactNativeJS:V in a terminal while an Android app is running on a device or emulator.
-If you're using Create React Native App, console logs already appear in the same terminal output as the packager.
+If you're using Create React Native App or Expo CLI, console logs already appear in the same terminal output as the packager.
Debugging on a device with Chrome Developer Tools
-If you're using Create React Native App, this is configured for you already.
+If you're using Create React Native App or Expo CLI, this is configured for you already.
On iOS devices, open the file RCTWebSocketExecutor.m and change "localhost" to the IP address of your computer, then select "Debug JS Remotely" from the Developer Menu.
On Android 5.0+ devices connected via USB, you can use the adb command line tool to setup port forwarding from the device to your computer:
Projects with Native Code Only
The remainder of this guide only applies to projects made with react-native init
- or to those made with Create React Native App which have since ejected. For
+ or to those made with expo init or Create React Native App which have since ejected. For
more information about ejecting, please see
the guide on
the Create React Native App repository.
@@ -126,11 +126,11 @@ YellowBox.ignoreWarnings(['Warning: ...']);
You may also access these through Debug → Open System Log... in the iOS Simulator or by running adb logcat *:S ReactNative:V ReactNativeJS:V in a terminal while an Android app is running on a device or emulator.
-If you're using Create React Native App, console logs already appear in the same terminal output as the packager.
+If you're using Create React Native App or Expo CLI, console logs already appear in the same terminal output as the packager.
Debugging on a device with Chrome Developer Tools
-If you're using Create React Native App, this is configured for you already.
+If you're using Create React Native App or Expo CLI, this is configured for you already.
On iOS devices, open the file RCTWebSocketExecutor.m and change "localhost" to the IP address of your computer, then select "Debug JS Remotely" from the Developer Menu.
On Android 5.0+ devices connected via USB, you can use the adb command line tool to setup port forwarding from the device to your computer:
Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.
2. Install the Android SDK
-Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.0 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.1 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".
-The SDK Manager can also be found within the Android Studio "Preferences" dialog, under Appearance & Behavior → System Settings → Android SDK.
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.0 (Oreo) entry, then make sure the following items are all checked:
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.1 (Oreo) entry, then make sure the following items are all checked:
-
-
Android SDK Platform 26
+Android SDK Platform 27Google APIs Intel x86 Atom_64 System Image
Add the following lines to your $HOME/.bash_profile config file:
export ANDROID_HOME=$HOME/Library/Android/sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
export ANDROID_HOME=$HOME/Android/Sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
diff --git a/docs/0.39/getting-started/index.html b/docs/0.39/getting-started/index.html index e0beeed86d6..bb799915253 100644 --- a/docs/0.39/getting-started/index.html +++ b/docs/0.39/getting-started/index.html @@ -260,7 +260,7 @@ npm start
Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.
2. Install the Android SDK
-Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.0 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.1 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".
-The SDK Manager can also be found within the Android Studio "Preferences" dialog, under Appearance & Behavior → System Settings → Android SDK.
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.0 (Oreo) entry, then make sure the following items are all checked:
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.1 (Oreo) entry, then make sure the following items are all checked:
-
-
Android SDK Platform 26
+Android SDK Platform 27Google APIs Intel x86 Atom_64 System Image
Add the following lines to your $HOME/.bash_profile config file:
export ANDROID_HOME=$HOME/Library/Android/sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
export ANDROID_HOME=$HOME/Android/Sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
diff --git a/docs/0.39/images.html b/docs/0.39/images.html index 8133e440645..8ee4f8a3e82 100644 --- a/docs/0.39/images.html +++ b/docs/0.39/images.html @@ -77,7 +77,7 @@ var icon = this.props.activeNote that image sources required this way include size (width, height) info for the Image. If you need to scale the image dynamically (i.e. via flex), you may need to manually set
{ width: undefined, height: undefined }on the style attribute.Static Non-Image Resources
The
-requiresyntax described above can be used to statically include audio, video or document files in your project as well. Most common file types are supported including.mp3,.wav,.mp4,.mov,.htmlandYou can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
+You can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
A caveat is that videos must use absolute positioning instead of
flexGrow, since size info is not currently passed for non-image assets. This limitation doesn't occur for videos that are linked directly into Xcode or the Assets folder for Android.Images From Hybrid App's Resources
If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app.
diff --git a/docs/0.39/images/index.html b/docs/0.39/images/index.html index 8133e440645..8ee4f8a3e82 100644 --- a/docs/0.39/images/index.html +++ b/docs/0.39/images/index.html @@ -77,7 +77,7 @@ var icon = this.props.activeNote that image sources required this way include size (width, height) info for the Image. If you need to scale the image dynamically (i.e. via flex), you may need to manually set
{ width: undefined, height: undefined }on the style attribute.Static Non-Image Resources
The
-requiresyntax described above can be used to statically include audio, video or document files in your project as well. Most common file types are supported including.mp3,.wav,.mp4,.mov,.htmlandYou can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
+You can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
A caveat is that videos must use absolute positioning instead of
flexGrow, since size info is not currently passed for non-image assets. This limitation doesn't occur for videos that are linked directly into Xcode or the Assets folder for Android.Images From Hybrid App's Resources
If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app.
diff --git a/docs/0.39/navigation.html b/docs/0.39/navigation.html index a0f1209fc04..819e83549ef 100644 --- a/docs/0.39/navigation.html +++ b/docs/0.39/navigation.html @@ -36,7 +36,7 @@
Navigating Between Screens
Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.
This guide covers the various navigation components available in React Native. If you are just getting started with navigation, you will probably want to use React Navigation. React Navigation provides an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android.
If you're only targeting iOS, you may want to also check out NavigatorIOS as a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native UINavigationController class. This component will not work on Android, however.
If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms:react-native-navigation.
+If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: react-native-navigation.
React Navigation
The community solution to navigation is a standalone library that allows developers to set up the screens of an app with just a few lines of code.
The first step is to install in your project:
diff --git a/docs/0.39/navigation/index.html b/docs/0.39/navigation/index.html index a0f1209fc04..819e83549ef 100644 --- a/docs/0.39/navigation/index.html +++ b/docs/0.39/navigation/index.html @@ -36,7 +36,7 @@Navigating Between Screens
Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.
This guide covers the various navigation components available in React Native. If you are just getting started with navigation, you will probably want to use React Navigation. React Navigation provides an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android.
If you're only targeting iOS, you may want to also check out NavigatorIOS as a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native UINavigationController class. This component will not work on Android, however.
If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms:react-native-navigation.
+If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: react-native-navigation.
React Navigation
The community solution to navigation is a standalone library that allows developers to set up the screens of an app with just a few lines of code.
The first step is to install in your project:
diff --git a/docs/0.39/running-on-device.html b/docs/0.39/running-on-device.html index 2b348387bb6..2f98e5dffa6 100644 --- a/docs/0.39/running-on-device.html +++ b/docs/0.39/running-on-device.html @@ -102,7 +102,7 @@ }It's always a good idea to test your app on an actual device before releasing it to your users. This document will guide you through the necessary steps to run your React Native app on a device and to get it ready for production.
-If you used Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
+If you used Expo CLI or Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
- @@ -125,7 +125,7 @@ Windows
A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Create React Native App, which will allow you to run your app using the Expo client app.
+A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app.
1. Plug in your device via USB
Connect your iOS device to your Mac using a USB to Lightning cable. Navigate to the ios folder in your project, then open the .xcodeproj file, or if you are using CocoaPods open .xcworkspace, within it using Xcode.
It's always a good idea to test your app on an actual device before releasing it to your users. This document will guide you through the necessary steps to run your React Native app on a device and to get it ready for production.
-If you used Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
+If you used Expo CLI or Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the Getting Started guide.
- @@ -125,7 +125,7 @@ Windows
A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Create React Native App, which will allow you to run your app using the Expo client app.
+A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the Quick Start instructions to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app.
1. Plug in your device via USB
Connect your iOS device to your Mac using a USB to Lightning cable. Navigate to the ios folder in your project, then open the .xcodeproj file, or if you are using CocoaPods open .xcworkspace, within it using Xcode.
-Note: Make sure gradle.properties does not include org.gradle.configureondemand=true as that will make the release build skip bundling JS and assets into the APK.
The generated APK can be found under android/app/build/outputs/apk/app-release.apk, and is ready to be distributed.
The generated APK can be found under android/app/build/outputs/apk/release/app-release.apk, and is ready to be distributed.
Testing the release build of your app
Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using:
$ react-native run-android --variant=release
diff --git a/docs/0.39/signed-apk-android/index.html b/docs/0.39/signed-apk-android/index.html
index 592dc29c95c..b840062376b 100644
--- a/docs/0.39/signed-apk-android/index.html
+++ b/docs/0.39/signed-apk-android/index.html
@@ -102,7 +102,7 @@ $ ./gradlew assembleRelease
Note: Make sure gradle.properties does not include org.gradle.configureondemand=true as that will make the release build skip bundling JS and assets into the APK.
-The generated APK can be found under android/app/build/outputs/apk/app-release.apk, and is ready to be distributed.
+The generated APK can be found under android/app/build/outputs/apk/release/app-release.apk, and is ready to be distributed.
Testing the release build of your app
Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using:
$ react-native run-android --variant=release
diff --git a/docs/0.39/understanding-cli.html b/docs/0.39/understanding-cli.html
index 571dd50cf24..e951f6f20d7 100644
--- a/docs/0.39/understanding-cli.html
+++ b/docs/0.39/understanding-cli.html
@@ -76,7 +76,7 @@
CLI Configs
When using react-native start, its platform derivatives, and react-native bundle you can use a file to define the CLI options used by React Native by default. If you create a file rn-cli.config.js in the root of your project, it will be evaluated and options for the commands will come from there.
You can see the options for the CLI config file inside the source code for Metro here, and here is a common rn-cli.config.js used for supporting TypeScript in React Native projects:
You can see the options for the CLI config on the metro website. Here's a common rn-cli.config.js used for supporting TypeScript in React Native projects:
module.exports = {
getTransformModulePath() {
return require.resolve('react-native-typescript-transformer');
diff --git a/docs/0.39/understanding-cli/index.html b/docs/0.39/understanding-cli/index.html
index 571dd50cf24..e951f6f20d7 100644
--- a/docs/0.39/understanding-cli/index.html
+++ b/docs/0.39/understanding-cli/index.html
@@ -76,7 +76,7 @@
CLI Configs
When using react-native start, its platform derivatives, and react-native bundle you can use a file to define the CLI options used by React Native by default. If you create a file rn-cli.config.js in the root of your project, it will be evaluated and options for the commands will come from there.
You can see the options for the CLI config file inside the source code for Metro here, and here is a common rn-cli.config.js used for supporting TypeScript in React Native projects:
You can see the options for the CLI config on the metro website. Here's a common rn-cli.config.js used for supporting TypeScript in React Native projects:
module.exports = {
getTransformModulePath() {
return require.resolve('react-native-typescript-transformer');
diff --git a/docs/0.40/debugging.html b/docs/0.40/debugging.html
index f9f35a8d6e8..895436a4a2f 100644
--- a/docs/0.40/debugging.html
+++ b/docs/0.40/debugging.html
@@ -113,7 +113,7 @@ YellowBox.ignoreWarnings(['Warning: ...']);
Projects with Native Code Only
The remainder of this guide only applies to projects made with react-native init
- or to those made with Create React Native App which have since ejected. For
+ or to those made with expo init or Create React Native App which have since ejected. For
more information about ejecting, please see
the guide on
the Create React Native App repository.
@@ -126,11 +126,11 @@ YellowBox.ignoreWarnings(['Warning: ...']);
You may also access these through Debug → Open System Log... in the iOS Simulator or by running adb logcat *:S ReactNative:V ReactNativeJS:V in a terminal while an Android app is running on a device or emulator.
-If you're using Create React Native App, console logs already appear in the same terminal output as the packager.
+If you're using Create React Native App or Expo CLI, console logs already appear in the same terminal output as the packager.
Debugging on a device with Chrome Developer Tools
-If you're using Create React Native App, this is configured for you already.
+If you're using Create React Native App or Expo CLI, this is configured for you already.
On iOS devices, open the file RCTWebSocketExecutor.m and change "localhost" to the IP address of your computer, then select "Debug JS Remotely" from the Developer Menu.
On Android 5.0+ devices connected via USB, you can use the adb command line tool to setup port forwarding from the device to your computer:
Projects with Native Code Only
The remainder of this guide only applies to projects made with react-native init
- or to those made with Create React Native App which have since ejected. For
+ or to those made with expo init or Create React Native App which have since ejected. For
more information about ejecting, please see
the guide on
the Create React Native App repository.
@@ -126,11 +126,11 @@ YellowBox.ignoreWarnings(['Warning: ...']);
You may also access these through Debug → Open System Log... in the iOS Simulator or by running adb logcat *:S ReactNative:V ReactNativeJS:V in a terminal while an Android app is running on a device or emulator.
-If you're using Create React Native App, console logs already appear in the same terminal output as the packager.
+If you're using Create React Native App or Expo CLI, console logs already appear in the same terminal output as the packager.
Debugging on a device with Chrome Developer Tools
-If you're using Create React Native App, this is configured for you already.
+If you're using Create React Native App or Expo CLI, this is configured for you already.
On iOS devices, open the file RCTWebSocketExecutor.m and change "localhost" to the IP address of your computer, then select "Debug JS Remotely" from the Developer Menu.
On Android 5.0+ devices connected via USB, you can use the adb command line tool to setup port forwarding from the device to your computer:
Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.
2. Install the Android SDK
-Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.0 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.1 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".
-The SDK Manager can also be found within the Android Studio "Preferences" dialog, under Appearance & Behavior → System Settings → Android SDK.
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.0 (Oreo) entry, then make sure the following items are all checked:
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.1 (Oreo) entry, then make sure the following items are all checked:
-
-
Android SDK Platform 26
+Android SDK Platform 27Google APIs Intel x86 Atom_64 System Image
Add the following lines to your $HOME/.bash_profile config file:
export ANDROID_HOME=$HOME/Library/Android/sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
export ANDROID_HOME=$HOME/Android/Sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
diff --git a/docs/0.40/getting-started/index.html b/docs/0.40/getting-started/index.html index a93eeda29e0..57cc3c6c41b 100644 --- a/docs/0.40/getting-started/index.html +++ b/docs/0.40/getting-started/index.html @@ -260,7 +260,7 @@ npm start
Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.
2. Install the Android SDK
-Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.0 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.1 (Oreo) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".
-The SDK Manager can also be found within the Android Studio "Preferences" dialog, under Appearance & Behavior → System Settings → Android SDK.
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.0 (Oreo) entry, then make sure the following items are all checked:
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 8.1 (Oreo) entry, then make sure the following items are all checked:
-
-
Android SDK Platform 26
+Android SDK Platform 27Google APIs Intel x86 Atom_64 System Image
Add the following lines to your $HOME/.bash_profile config file:
export ANDROID_HOME=$HOME/Library/Android/sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
export ANDROID_HOME=$HOME/Android/Sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
-export PATH=$PATH:$ANDROID_HOME/emulator
diff --git a/docs/0.40/images.html b/docs/0.40/images.html index 63ecbfc078c..9ffaa2e23c1 100644 --- a/docs/0.40/images.html +++ b/docs/0.40/images.html @@ -77,7 +77,7 @@ var icon = this.props.activeNote that image sources required this way include size (width, height) info for the Image. If you need to scale the image dynamically (i.e. via flex), you may need to manually set
{ width: undefined, height: undefined }on the style attribute.Static Non-Image Resources
The
-requiresyntax described above can be used to statically include audio, video or document files in your project as well. Most common file types are supported including.mp3,.wav,.mp4,.mov,.htmlandYou can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
+You can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
A caveat is that videos must use absolute positioning instead of
flexGrow, since size info is not currently passed for non-image assets. This limitation doesn't occur for videos that are linked directly into Xcode or the Assets folder for Android.Images From Hybrid App's Resources
If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app.
diff --git a/docs/0.40/images/index.html b/docs/0.40/images/index.html index 63ecbfc078c..9ffaa2e23c1 100644 --- a/docs/0.40/images/index.html +++ b/docs/0.40/images/index.html @@ -77,7 +77,7 @@ var icon = this.props.activeNote that image sources required this way include size (width, height) info for the Image. If you need to scale the image dynamically (i.e. via flex), you may need to manually set
{ width: undefined, height: undefined }on the style attribute.Static Non-Image Resources
The
-requiresyntax described above can be used to statically include audio, video or document files in your project as well. Most common file types are supported including.mp3,.wav,.mp4,.mov,.htmlandYou can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
+You can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).
A caveat is that videos must use absolute positioning instead of
flexGrow, since size info is not currently passed for non-image assets. This limitation doesn't occur for videos that are linked directly into Xcode or the Assets folder for Android.Images From Hybrid App's Resources
If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app.
diff --git a/docs/0.40/navigation.html b/docs/0.40/navigation.html index ed90854c765..941dc4a1162 100644 --- a/docs/0.40/navigation.html +++ b/docs/0.40/navigation.html @@ -36,7 +36,7 @@
Navigating Between Screens
Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.
This guide covers the various navigation components available in React Native. If you are just getting started with navigation, you will probably want to use React Navigation. React Navigation provides an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android.
If you're only targeting iOS, you may want to also check out NavigatorIOS as a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native UINavigationController class. This component will not work on Android, however.
If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms:react-native-navigation.
+If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: react-native-navigation.
React Navigation
The community solution to navigation is a standalone library that allows developers to set up the screens of an app with just a few lines of code.
The first step is to install in your project:
diff --git a/docs/0.40/navigation/index.html b/docs/0.40/navigation/index.html index ed90854c765..941dc4a1162 100644 --- a/docs/0.40/navigation/index.html +++ b/docs/0.40/navigation/index.html @@ -36,7 +36,7 @@Navigating Between Screens
Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.
This guide covers the various navigation components available in React Native. If you are just getting started with navigation, you will probably want to use React Navigation. React Navigation provides an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android.
If you're only targeting iOS, you may want to also check out NavigatorIOS as a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native UINavigationController class. This component will not work on Android, however.
If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms:react-native-navigation.
+If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: react-native-navigation.