From f93553ff14c4c4ad9b172af87920674b02c7e109 Mon Sep 17 00:00:00 2001 From: Pranav Yadav Date: Wed, 24 May 2023 11:13:38 +0530 Subject: [PATCH] [FEAT] Separate Tabs for `npm` and `yarn` commands --- docs/_getting-started-linux-android.md | 35 ++++++-- docs/_getting-started-macos-android.md | 35 ++++++-- docs/_getting-started-macos-ios.md | 35 ++++++-- docs/_getting-started-windows-android.md | 35 ++++++-- docs/_integration-with-existing-apps-java.md | 59 ++++++++++++-- .../_integration-with-existing-apps-kotlin.md | 57 +++++++++++-- docs/_integration-with-existing-apps-objc.md | 16 +++- docs/_integration-with-existing-apps-swift.md | 67 ++++++++++++++-- docs/hermes.md | 77 ++++++++++++++++-- docs/libraries.md | 34 +++++++- docs/native-debugging.md | 6 +- docs/native-modules-android.md | 17 +++- docs/native-modules-ios.md | 18 ++++- docs/publishing-to-app-store.md | 2 +- docs/running-on-device.md | 65 ++++++++++++--- docs/running-on-simulator-ios.md | 80 ++++++++++++++++++- docs/signed-apk-android.md | 33 ++++++-- docs/troubleshooting.md | 38 +++++++-- 18 files changed, 615 insertions(+), 94 deletions(-) diff --git a/docs/_getting-started-linux-android.md b/docs/_getting-started-linux-android.md index 94fa7d84a4b..9aaafcbef06 100644 --- a/docs/_getting-started-linux-android.md +++ b/docs/_getting-started-linux-android.md @@ -1,4 +1,5 @@ import RemoveGlobalCLI from './\_remove-global-cli.md'; +import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants'; ## Installing dependencies @@ -127,15 +128,24 @@ Click "Next" then "Finish" to create your AVD. At this point you should be able First, you will need to start Metro, the JavaScript bundler that ships with React Native. Metro "takes in an entry file and various options, and returns a single JavaScript file that includes all your code and its dependencies."—[Metro Docs](https://facebook.github.io/metro/docs/concepts) -To start Metro, run `npx react-native start` inside your React Native project folder: +To start Metro, run following command inside your React Native project folder: + + + ```shell -npx react-native start +npm start ``` -`react-native start` starts Metro Bundler. + + -> If you use the Yarn package manager, you can use `yarn` instead of `npx` when running React Native commands inside an existing project. +```shell +yarn start +``` + + + > If you're familiar with web development, Metro is a lot like webpack—for React Native apps. Unlike Kotlin or Java, JavaScript isn't compiled—and neither is React Native. Bundling isn't the same as compiling, but it can help improve startup performance and translate some platform-specific JavaScript into more widely supported JavaScript. @@ -143,13 +153,26 @@ npx react-native start Let Metro Bundler run in its own terminal. Open a new terminal inside your React Native project folder. Run the following: + + + ```shell -npx react-native run-android +npm run android ``` + + + +```shell +yarn android +``` + + + + If everything is set up correctly, you should see your new app running in your Android emulator shortly. -`npx react-native run-android` is one way to run your app - you can also run it directly from within Android Studio. +This is one way to run your app - you can also run it directly from within Android Studio. > If you can't get this to work, see the [Troubleshooting](troubleshooting.md) page. diff --git a/docs/_getting-started-macos-android.md b/docs/_getting-started-macos-android.md index 1d87f706d17..23f9941b1f3 100644 --- a/docs/_getting-started-macos-android.md +++ b/docs/_getting-started-macos-android.md @@ -1,4 +1,5 @@ import RemoveGlobalCLI from './\_remove-global-cli.md'; +import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants'; ## Installing dependencies @@ -142,31 +143,51 @@ Click "Next" then "Finish" to create your AVD. At this point you should be able First, you will need to start Metro, the JavaScript bundler that ships with React Native. Metro "takes in an entry file and various options, and returns a single JavaScript file that includes all your code and its dependencies."—[Metro Docs](https://facebook.github.io/metro/docs/concepts) -To start Metro, run `npx react-native start` inside your React Native project folder: +To start Metro, run following command inside your React Native project folder: + + + ```shell -npx react-native start +npm start ``` -`react-native start` starts Metro Bundler. + + -> If you use the Yarn package manager, you can use `yarn` instead of `npx` when running React Native commands inside an existing project. +```shell +yarn start +``` + + + > If you're familiar with web development, Metro is a lot like webpack—for React Native apps. Unlike Kotlin or Java, JavaScript isn't compiled—and neither is React Native. Bundling isn't the same as compiling, but it can help improve startup performance and translate some platform-specific JavaScript into more widely supported JavaScript.

Step 2: Start your application

-Let Metro Bundler run in its own terminal. Open a new terminal inside your React Native project folder. Run the following: + + ```shell -npx react-native run-android +npm run android ``` + + + +```shell +yarn android +``` + + + + If everything is set up correctly, you should see your new app running in your Android emulator shortly. ![AwesomeProject on Android](/docs/assets/GettingStartedAndroidSuccessMacOS.png) -`npx react-native run-android` is one way to run your app - you can also run it directly from within Android Studio. +This is one way to run your app - you can also run it directly from within Android Studio. > If you can't get this to work, see the [Troubleshooting](troubleshooting.md) page. diff --git a/docs/_getting-started-macos-ios.md b/docs/_getting-started-macos-ios.md index 8974857a57c..392b34aa00f 100644 --- a/docs/_getting-started-macos-ios.md +++ b/docs/_getting-started-macos-ios.md @@ -1,4 +1,5 @@ import RemoveGlobalCLI from './\_remove-global-cli.md'; +import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants'; ## Installing dependencies @@ -105,15 +106,24 @@ You might also want to ensure that all "shell script build phase" of your Xcode First, you will need to start Metro, the JavaScript bundler that ships with React Native. Metro "takes in an entry file and various options, and returns a single JavaScript file that includes all your code and its dependencies."—[Metro Docs](https://facebook.github.io/metro/docs/concepts) -To start Metro, run `npx react-native start` inside your React Native project folder: +To start Metro, run following command inside your React Native project folder: + + + ```shell -npx react-native start +npm start ``` -`react-native start` starts Metro Bundler. + + -> If you use the Yarn package manager, you can use `yarn` instead of `npx` when running React Native commands inside an existing project. +```shell +yarn start +``` + + + > If you're familiar with web development, Metro is a lot like webpack—for React Native apps. Unlike Swift or Objective-C, JavaScript isn't compiled—and neither is React Native. Bundling isn't the same as compiling, but it can help improve startup performance and translate some platform-specific JavaScript into more widely supported JavaScript. @@ -121,15 +131,28 @@ npx react-native start Let Metro Bundler run in its own terminal. Open a new terminal inside your React Native project folder. Run the following: + + + ```shell -npx react-native run-ios +npm run ios ``` + + + +```shell +yarn ios +``` + + + + You should see your new app running in the iOS Simulator shortly. ![AwesomeProject on iOS](/docs/assets/GettingStartediOSSuccess.png) -`npx react-native run-ios` is one way to run your app. You can also run it directly from within Xcode. +This is one way to run your app. You can also run it directly from within Xcode. > If you can't get this to work, see the [Troubleshooting](troubleshooting.md) page. diff --git a/docs/_getting-started-windows-android.md b/docs/_getting-started-windows-android.md index cc0f32d300a..2c113e944c7 100644 --- a/docs/_getting-started-windows-android.md +++ b/docs/_getting-started-windows-android.md @@ -1,4 +1,5 @@ import RemoveGlobalCLI from './\_remove-global-cli.md'; +import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';

Installing dependencies

@@ -158,15 +159,24 @@ Click "Next" then "Finish" to create your AVD. At this point you should be able First, you will need to start Metro, the JavaScript bundler that ships with React Native. Metro "takes in an entry file and various options, and returns a single JavaScript file that includes all your code and its dependencies."—[Metro Docs](https://facebook.github.io/metro/docs/concepts) -To start Metro, run `npx react-native start` inside your React Native project folder: +To start Metro, run following command inside your React Native project folder: + + + ```shell -npx react-native start +npm start ``` -`react-native start` starts Metro Bundler. + + -> If you use the Yarn package manager, you can use `yarn` instead of `npx` when running React Native commands inside an existing project. +```shell +yarn start +``` + + + > If you're familiar with web development, Metro is a lot like webpack—for React Native apps. Unlike Kotlin or Java, JavaScript isn't compiled—and neither is React Native. Bundling isn't the same as compiling, but it can help improve startup performance and translate some platform-specific JavaScript into more widely supported JavaScript. @@ -174,15 +184,28 @@ npx react-native start Let Metro Bundler run in its own terminal. Open a new terminal inside your React Native project folder. Run the following: + + + ```shell -npx react-native run-android +npm run android ``` + + + +```shell +yarn android +``` + + + + If everything is set up correctly, you should see your new app running in your Android emulator shortly. ![AwesomeProject on Android](/docs/assets/GettingStartedAndroidSuccessWindows.png) -`npx react-native run-android` is one way to run your app - you can also run it directly from within Android Studio. +This is one way to run your app - you can also run it directly from within Android Studio. > If you can't get this to work, see the [Troubleshooting](troubleshooting.md) page. diff --git a/docs/_integration-with-existing-apps-java.md b/docs/_integration-with-existing-apps-java.md index 76273cdff1c..103e4a8a397 100644 --- a/docs/_integration-with-existing-apps-java.md +++ b/docs/_integration-with-existing-apps-java.md @@ -1,3 +1,5 @@ +import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants'; + ## Key Concepts The keys to integrating React Native components into your Android application are to: @@ -26,29 +28,53 @@ Go to the root directory for your project and create a new `package.json` file w "version": "0.0.1", "private": true, "scripts": { - "start": "yarn react-native start" + "start": "react-native start" } } ``` -Next, make sure you have [installed the yarn package manager](https://yarnpkg.com/lang/en/docs/install/). +Next, install the `react` and `react-native` packages. Open a terminal or command prompt, then navigate to the directory with your `package.json` file and run: + + + + +```shell +npm install react-native +``` -Install the `react` and `react-native` packages. Open a terminal or command prompt, then navigate to the directory with your `package.json` file and run: + + ```shell -$ yarn add react-native +yarn add react-native ``` + + + This will print a message similar to the following (scroll up in the yarn output to see it): > warning "react-native@0.70.5" has unmet peer dependency "react@18.1.0" This is OK, it means we also need to install React: + + + +```shell +npm install react@version_printed_above +``` + + + + ```shell -$ yarn add react@version_printed_above +yarn add react@version_printed_above ``` + + + Yarn has created a new `/node_modules` folder. This folder stores all the JavaScript dependencies required to build your project. Add `node_modules/` to your `.gitignore` file. @@ -122,11 +148,15 @@ apply from: file("../../node_modules/@react-native-community/cli-platform-androi Next, make sure you have the Internet permission in your `AndroidManifest.xml`: - +```xml + +``` If you need to access to the `DevSettingsActivity` add to your `AndroidManifest.xml`: - +```xml + +``` This is only used in dev mode when reloading JavaScript from the development server, so you can strip this in release builds if you need to. @@ -365,10 +395,23 @@ You have now done all the basic steps to integrate React Native with your curren To run your app, you need to first start the development server. To do this, run the following command in the root directory of your React Native project: + + + ```shell -$ yarn start +npm start ``` + + + +```shell +yarn start +``` + + + + ##### 2. Run the app Now build and run your Android app as normal. diff --git a/docs/_integration-with-existing-apps-kotlin.md b/docs/_integration-with-existing-apps-kotlin.md index f0187aa8c43..c48ae83564a 100644 --- a/docs/_integration-with-existing-apps-kotlin.md +++ b/docs/_integration-with-existing-apps-kotlin.md @@ -1,3 +1,5 @@ +import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants'; + ## Key Concepts The keys to integrating React Native components into your Android application are to: @@ -31,24 +33,48 @@ Go to the root directory for your project and create a new `package.json` file w } ``` -Next, make sure you have [installed the yarn package manager](https://yarnpkg.com/lang/en/docs/install/). +Next, install the `react` and `react-native` packages. Open a terminal or command prompt, then navigate to the directory with your `package.json` file and run: + + + + +```shell +npm install react-native +``` -Install the `react` and `react-native` packages. Open a terminal or command prompt, then navigate to the directory with your `package.json` file and run: + + ```shell -$ yarn add react-native +yarn add react-native ``` + + + This will print a message similar to the following (scroll up in the yarn output to see it): > warning "react-native@0.70.5" has unmet peer dependency "react@18.1.0" This is OK, it means we also need to install React: + + + +```shell +npm install react@version_printed_above +``` + + + + ```shell -$ yarn add react@version_printed_above +yarn add react@version_printed_above ``` + + + Yarn has created a new `/node_modules` folder. This folder stores all the JavaScript dependencies required to build your project. Add `node_modules/` to your `.gitignore` file. @@ -122,11 +148,15 @@ apply from: file("../../node_modules/@react-native-community/cli-platform-androi Next, make sure you have the Internet permission in your `AndroidManifest.xml`: - +```xml + +``` If you need to access to the `DevSettingsActivity` add to your `AndroidManifest.xml`: - +```xml + +``` This is only used in dev mode when reloading JavaScript from the development server, so you can strip this in release builds if you need to. @@ -341,10 +371,23 @@ You have now done all the basic steps to integrate React Native with your curren To run your app, you need to first start the development server. To do this, run the following command in the root directory of your React Native project: + + + ```shell -$ yarn start +npm start ``` + + + +```shell +yarn start +``` + + + + ##### 2. Run the app Now build and run your Android app as normal. diff --git a/docs/_integration-with-existing-apps-objc.md b/docs/_integration-with-existing-apps-objc.md index 2545e5ba2b2..6d3201568ed 100644 --- a/docs/_integration-with-existing-apps-objc.md +++ b/docs/_integration-with-existing-apps-objc.md @@ -367,11 +367,23 @@ yarn start If you are using Xcode or your favorite editor, build and run your native iOS application as normal. Alternatively, you can run the app from the command line using: + + + +```shell +npm run ios ``` -# From the root of your project -$ npx react-native run-ios + + + + +```shell +yarn ios ``` + + + In our sample application, you should see the link to the "High Scores" and then when you click on that you will see the rendering of your React Native component. Here is the _native_ application home screen: diff --git a/docs/_integration-with-existing-apps-swift.md b/docs/_integration-with-existing-apps-swift.md index ffcca44eb0c..0d1556d40b2 100644 --- a/docs/_integration-with-existing-apps-swift.md +++ b/docs/_integration-with-existing-apps-swift.md @@ -1,3 +1,5 @@ +import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants'; + ## Key Concepts The keys to integrating React Native components into your iOS application are to: @@ -33,24 +35,48 @@ Go to the root directory for your project and create a new `package.json` file w } ``` -Next, make sure you have [installed the yarn package manager](https://yarnpkg.com/lang/en/docs/install/). +Next, install the `react` and `react-native` packages. Open a terminal or command prompt, then navigate to the directory with your `package.json` file and run: + + + + +```shell +npm install react-native +``` -Install the `react` and `react-native` packages. Open a terminal or command prompt, then navigate to the directory with your `package.json` file and run: + + ```shell -$ yarn add react-native +yarn add react-native ``` + + + This will print a message similar to the following (scroll up in the yarn output to see it): > warning "react-native@0.52.2" has unmet peer dependency "react@16.2.0". This is OK, it means we also need to install React: + + + +```shell +npm install react@version_printed_above +``` + + + + ```shell -$ yarn add react@version_printed_above +yarn add react@version_printed_above ``` + + + Yarn has created a new `/node_modules` folder. This folder stores all the JavaScript dependencies required to build your project. Add `node_modules/` to your `.gitignore` file. @@ -298,19 +324,44 @@ Apple has blocked implicit cleartext HTTP resource loading. So we need to add th To run your app, you need to first start the development server. To do this, run the following command in the root directory of your React Native project: + + + +```shell +npm start +``` + + + + ```shell -$ npm start +yarn start ``` + + + ##### 3. Run the app -If you are using Xcode or your favorite editor, build and run your native iOS application as normal. Alternatively, you can run the app from the command line using: +If you are using Xcode or your favorite editor, build and run your native iOS application as normal. Alternatively, you can run the app from the command line using following command from the root directory of your React Native project: + + + +```shell +npm run ios ``` -# From the root of your project -$ npx react-native run-ios + + + + +```shell +yarn ios ``` + + + In our sample application, you should see the link to the "High Scores" and then when you click on that you will see the rendering of your React Native component. Here is the _native_ application home screen: diff --git a/docs/hermes.md b/docs/hermes.md index 9d1d885ceba..e8a401bb80a 100644 --- a/docs/hermes.md +++ b/docs/hermes.md @@ -3,6 +3,8 @@ id: hermes title: Using Hermes --- +import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants'; + @@ -37,18 +39,55 @@ If you are using a non-standard way of loading the JS bundle, it is possible tha Confirm that you are using the `.hbc` file and also benchmark the before/after as detailed below. ::: -To see the benefits of Hermes, try making a release build/deployment of your app to compare. For example: +To see the benefits of Hermes, try making a release build/deployment of your app to compare. For example; from the root of your project: + + + + +[//]: # 'Android' + + + + +```shell +npm run android -- --mode="release" +``` + + + + +```shell +yarn android --mode release +``` + + + + + + + +[//]: # 'iOS' + + + ```shell -$ npx react-native run-android --mode release +npm run ios -- --mode="Release" ``` -or for iOS: + + ```shell -$ npx react-native run-ios --mode Release +yarn ios --mode Release ``` + + + + + + This will compile JavaScript to bytecode during build time which will improve your app's startup speed on device. ## Debugging JS on Hermes using Google Chrome's DevTools @@ -120,10 +159,23 @@ $ cd android && ./gradlew clean That's it! You should now be able to develop and deploy your app as usual: + + + +```shell +npm run android +``` + + + + ```shell -$ npx react-native run-android +yarn android ``` + + + ### iOS Since React Native 0.64, Hermes also runs on iOS. To enable Hermes for iOS, edit your `ios/Podfile` file and make the change illustrated below: @@ -150,10 +202,23 @@ $ cd ios && pod install That's it! You should now be able to develop and deploy your app as usual: + + + ```shell -$ npx react-native run-ios +npm run ios ``` + + + +```shell +yarn ios +``` + + + + ## Switching back to JavaScriptCore React Native also supports using JavaScriptCore as the [JavaScript engine](javascript-environment). Follow these instructions to opt-out of Hermes. diff --git a/docs/libraries.md b/docs/libraries.md index fb6897d4521..8713df32244 100644 --- a/docs/libraries.md +++ b/docs/libraries.md @@ -53,18 +53,44 @@ npx pod-install Once this is complete, re-build the app binary to start using your new library: -```bash -npx react-native run-ios + + + +```shell +npm run ios +``` + + + + +```shell +yarn ios ``` + + + ## Linking Native Code on Android React Native uses Gradle to manage Android project dependencies. After you install a library with native dependencies, you will need to re-build the app binary to use your new library: -```bash -npx react-native run-android + + + +```shell +npm run android +``` + + + + +```shell +yarn android ``` + + + ## Finding Libraries [React Native Directory](https://reactnative.directory) is a searchable database of libraries built specifically for React Native. This is the first place to look for a library for your React Native app. diff --git a/docs/native-debugging.md b/docs/native-debugging.md index d0c1278f612..5bcdc7b3b66 100644 --- a/docs/native-debugging.md +++ b/docs/native-debugging.md @@ -16,9 +16,11 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con You can display the console logs for an iOS or Android app by using the following commands in a terminal while the app is running: -```sh -npx react-native log-ios +```shell +# For Android: npx react-native log-android +# Or, for iOS: +npx react-native log-ios ``` 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. diff --git a/docs/native-modules-android.md b/docs/native-modules-android.md index fdbb7e7a6a7..0429511c656 100644 --- a/docs/native-modules-android.md +++ b/docs/native-modules-android.md @@ -353,13 +353,26 @@ const onPress = () => { The final step is to rebuild the React Native app so that you can have the latest native code (with your new native module!) available. In your command line, where the react native application is located, run the following: + + + ```shell -npx react-native run-android +npm run android ``` + + + +```shell +yarn android +``` + + + + ### Building as You Iterate -As you work through these guides and iterate on your native module, you will need to do a native rebuild of your application to access your most recent changes from JavaScript. This is because the code that you are writing sits within the native part of your application. While React Native’s metro bundler can watch for changes in JavaScript and rebuild on the fly for you, it will not do so for native code. So if you want to test your latest native changes you need to rebuild by using the `npx react-native run-android` command. +As you work through these guides and iterate on your native module, you will need to do a native rebuild of your application to access your most recent changes from JavaScript. This is because the code that you are writing sits within the native part of your application. While React Native’s metro bundler can watch for changes in JavaScript and rebuild on the fly for you, it will not do so for native code. So if you want to test your latest native changes you need to rebuild by using the above command. ### Recap✨ diff --git a/docs/native-modules-ios.md b/docs/native-modules-ios.md index faa37b580d9..d6a035da945 100644 --- a/docs/native-modules-ios.md +++ b/docs/native-modules-ios.md @@ -4,6 +4,7 @@ title: iOS Native Modules --- import NativeDeprecated from './the-new-architecture/\_markdown_native_deprecation.mdx' +import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants'; @@ -180,13 +181,26 @@ const onPress = () => { The final step is to rebuild the React Native app so that you can have the latest native code (with your new native module!) available. In your command line, where the react native application is located, run the following : + + + +```shell +npm run ios +``` + + + + ```shell -npx react-native run-ios +yarn ios ``` + + + ### Building as You Iterate -As you work through these guides and iterate on your native module, you will need to do a native rebuild of your application to access your most recent changes from JavaScript. This is because the code that you are writing sits within the native part of your application. While React Native’s metro bundler can watch for changes in JavaScript and rebuild JS bundle on the fly for you, it will not do so for native code. So if you want to test your latest native changes you need to rebuild by using the `npx react-native run-ios` command. +As you work through these guides and iterate on your native module, you will need to do a native rebuild of your application to access your most recent changes from JavaScript. This is because the code that you are writing sits within the native part of your application. While React Native’s metro bundler can watch for changes in JavaScript and rebuild JS bundle on the fly for you, it will not do so for native code. So if you want to test your latest native changes you need to rebuild by using the above command. ### Recap✨ diff --git a/docs/publishing-to-app-store.md b/docs/publishing-to-app-store.md index 5f874a9704c..a5dca5f4da6 100644 --- a/docs/publishing-to-app-store.md +++ b/docs/publishing-to-app-store.md @@ -51,7 +51,7 @@ The static bundle is built every time you target a physical device, even in Debu You can now build your app for release by tapping `⌘B` or selecting **Product** → **Build** from the menu bar. Once built for release, you'll be able to distribute the app to beta testers and submit the app to the App Store. :::info -You can also use the `React Native CLI` to perform this operation using the option `--mode` with the value `Release` (e.g. `npx react-native run-ios --mode Release`). +You can also use the `React Native CLI` to perform this operation using the option `--mode` with the value `Release` (e.g. from the root of your project: `npm run ios -- --mode="Release"` or `yarn ios --mode Release`). ::: Once you are done with the testing and ready to publish to App Store, follow along with this guide. diff --git a/docs/running-on-device.md b/docs/running-on-device.md index a82ca3acb3a..fd7f4f262d0 100644 --- a/docs/running-on-device.md +++ b/docs/running-on-device.md @@ -51,15 +51,28 @@ If you see `unauthorized` in the list you will need to run `adb reverse tcp:8081 ### 3. Run your app -Type the following in your command prompt to install and launch your app on the device: +From the root of your project; type the following in your command prompt to install and launch your app on the device: + + + ```shell -$ npx react-native run-android +npm run android ``` + + + +```shell +yarn android +``` + + + + > If you get a "bridge configuration isn't available" error, see [Using adb reverse](running-on-device.md#method-1-using-adb-reverse-recommended). -> Hint: You can also use the `React Native CLI` to generate and run a `Release` build (e.g. `npx react-native run-android --mode=release`). +> Hint: You can also use the `React Native CLI` to generate and run a `release` build (e.g. from the root of your project: `yarn android --mode release`).

Connecting to the development server

@@ -94,7 +107,7 @@ You can find the IP address in **System Settings (or System Preferences)** → * 3. You'll see a [red screen with an error](debugging.md#in-app-errors-and-warnings). This is OK. The following steps will fix that. 4. Open the in-app [Dev Menu](debugging.md#accessing-the-dev-menu). 5. Go to **Dev Settings** → **Debug server host & port for device**. -6. Type in your machine's IP address and the port of the local dev server (e.g. 10.0.1.1:8081). +6. Type in your machine's IP address and the port of the local dev server (e.g. `10.0.1.1:8081`). 7. Go back to the **Dev Menu** and select **Reload JS**. You can now enable Live reloading from the [Dev Menu](debugging.md#accessing-the-dev-menu). Your app will reload whenever your JavaScript code has changed. @@ -131,13 +144,26 @@ Seeing `device` in the right column means the device is connected. You must have ### 3. Run your app -Type the following in your command prompt to install and launch your app on the device: +From the root of your project, run the following in your command prompt to install and launch your app on the device: + + + ```shell -$ npx react-native run-android +npm run android ``` -> Hint: You can also use the `React Native CLI` to generate and run a `Release` build (e.g. `npx react-native run-android --mode=release`). + + + +```shell +yarn android +``` + + + + +> Hint: You can also use the `React Native CLI` to generate and run a `release` build (e.g. from the root of your project: `yarn android --mode release`).

Connecting to the development server

@@ -172,7 +198,7 @@ Open the command prompt and type `ipconfig` to find your machine's IP address ([ 3. You'll see a [red screen with an error](debugging.md#in-app-errors-and-warnings). This is OK. The following steps will fix that. 4. Open the in-app [Dev Menu](debugging.md#accessing-the-dev-menu). 5. Go to **Dev Settings** → **Debug server host & port for device**. -6. Type in your machine's IP address and the port of the local dev server (e.g. 10.0.1.1:8081). +6. Type in your machine's IP address and the port of the local dev server (e.g. `10.0.1.1:8081`). 7. Go back to the **Dev Menu** and select **Reload JS**. You can now enable Live reloading from the [Dev Menu](debugging.md#accessing-the-dev-menu). Your app will reload whenever your JavaScript code has changed. @@ -254,15 +280,28 @@ Seeing `device` in the right column means the device is connected. You must have ### 3. Run your app -Type the following in your command prompt to install and launch your app on the device: +From the root of your project, type the following in your command prompt to install and launch your app on the device: + + + ```shell -$ npx react-native run-android +npm run android ``` + + + +```shell +yarn android +``` + + + + > If you get a "bridge configuration isn't available" error, see [Using adb reverse](running-on-device.md#method-1-using-adb-reverse-recommended). -> Hint: You can also use the `React Native CLI` to generate and run a `Release` build (e.g. `npx react-native run-android --mode=release`). +> Hint: You can also use the `React Native CLI` to generate and run a `release` build (e.g. from the root of your project: `yarn android --mode release`).

Connecting to the development server

@@ -297,7 +336,7 @@ Open a terminal and type `/sbin/ifconfig` to find your machine's IP address. 3. You'll see a [red screen with an error](debugging.md#in-app-errors-and-warnings). This is OK. The following steps will fix that. 4. Open the in-app [Dev Menu](debugging.md#accessing-the-dev-menu). 5. Go to **Dev Settings** → **Debug server host & port for device**. -6. Type in your machine's IP address and the port of the local dev server (e.g. 10.0.1.1:8081). +6. Type in your machine's IP address and the port of the local dev server (e.g. `10.0.1.1:8081`). 7. Go back to the **Dev Menu** and select **Reload JS**. You can now enable Live reloading from the [Dev Menu](debugging.md#accessing-the-dev-menu). Your app will reload whenever your JavaScript code has changed. @@ -367,7 +406,7 @@ Make sure your laptop and your phone are on the **same** Wi-Fi network. #### 2. IP address -Make sure that the build script detected the IP address of your machine correctly (e.g. 10.0.1.123). +Make sure that the build script detected the IP address of your machine correctly (e.g. `10.0.1.123`). ![](/docs/assets/XcodeBuildIP.png) diff --git a/docs/running-on-simulator-ios.md b/docs/running-on-simulator-ios.md index f2bcfbf6f25..cf371cf29f2 100644 --- a/docs/running-on-simulator-ios.md +++ b/docs/running-on-simulator-ios.md @@ -3,20 +3,92 @@ id: running-on-simulator-ios title: Running On Simulator --- +import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants'; + ## Starting the simulator -Once you have your React Native project initialized, you can run `npx react-native run-ios` inside the newly created project directory. If everything is set up correctly, you should see your new app running in the iOS Simulator shortly. +Once you have your React Native project initialized, you can run the following command inside the newly created project directory. + + + + +```shell +npm run ios +``` + + + + +```shell +yarn ios +``` + + + + +If everything is set up correctly, you should see your new app running in the iOS Simulator shortly. ## Specifying a device -You can specify the device the simulator should run with the `--simulator` flag, followed by the device name as a string. The default is `"iPhone 14"`. If you wish to run your app on an iPhone SE (3rd generation), run `npx react-native run-ios --simulator='iPhone SE (3rd generation)'`. +You can specify the device the simulator should run with the `--simulator` flag, followed by the device name as a string. The default is `"iPhone 14"`. If you wish to run your app on an iPhone SE (3rd generation), run the following command: + + + + +```shell +npm run ios -- --simulator="iPhone SE (3rd generation)" +``` + + + + +```shell +yarn ios --simulator "iPhone SE (3rd generation)" +``` + + + The device names correspond to the list of devices available in Xcode. You can check your available devices by running `xcrun simctl list devices` from the console. ### Specifying a version of device -If you have multiple iOS versions installed, you also need to specify it's appropiate version. E.g. run `npx react-native run-ios --simulator='iPhone 14 Pro (16.0)'` in order to specify the iOS version. +If you have multiple iOS versions installed, you also need to specify it's appropiate version. E.g. To run your app on an iPhone 14 Pro (16.0) run the following command: + + + + +```shell +npm run ios -- --simulator="iPhone 14 Pro (16.0)" +``` + + + + +```shell +yarn ios --simulator "iPhone 14 Pro (16.0)" +``` + + + ## Specifying an UDID -You can specify the device UDID returned from `xcrun simctl list devices` command. E.g. run `npx react-native run-ios --udid='AAAAAAAA-AAAA-AAAA-AAAA-AAAAAAAAAAAA'`. +You can specify the device UDID returned from `xcrun simctl list devices` command. E.g. To run your app with UDID `AAAAAAAA-AAAA-AAAA-AAAA-AAAAAAAAAAAA` run the following command: + + + + +```shell +npm run ios -- --udid="AAAAAAAA-AAAA-AAAA-AAAA-AAAAAAAAAAAA" +``` + + + + +```shell +yarn ios --udid "AAAAAAAA-AAAA-AAAA-AAAA-AAAAAAAAAAAA" +``` + + + diff --git a/docs/signed-apk-android.md b/docs/signed-apk-android.md index 9d412eb77e6..d51ecd67bbe 100644 --- a/docs/signed-apk-android.md +++ b/docs/signed-apk-android.md @@ -3,6 +3,8 @@ id: signed-apk-android title: Publishing to Google Play Store --- +import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants'; + Android requires that all apps be digitally signed with a certificate before they can be installed. In order to distribute your Android application via [Google Play store](https://play.google.com/store) it needs to be signed with a release key that then needs to be used for all future updates. Since 2017 it is possible for Google Play to manage signing releases automatically thanks to [App Signing by Google Play](https://developer.android.com/studio/publish/app-signing#app-signing-google-play) functionality. However, before your application binary is uploaded to Google Play it needs to be signed with an upload key. The [Signing Your Applications](https://developer.android.com/tools/publishing/app-signing.html) page on Android Developers documentation describes the topic in detail. This guide covers the process in brief, as well as lists the steps required to package the JavaScript bundle. :::info @@ -17,7 +19,9 @@ You can generate a private signing key using `keytool`. On Windows `keytool` must be run from `C:\Program Files\Java\jdkx.x.x_x\bin`, as administrator. - keytool -genkeypair -v -storetype PKCS12 -keystore my-upload-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000 +```shell +keytool -genkeypair -v -storetype PKCS12 -keystore my-upload-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000 +``` This command prompts you for passwords for the keystore and key and for the Distinguished Name fields for your key. It then generates the keystore as a file called `my-upload-key.keystore`. @@ -27,15 +31,21 @@ The keystore contains a single key, valid for 10000 days. The alias is a name th On macOS, if you're not sure where your JDK bin folder is, then perform the following command to find it: - /usr/libexec/java_home +```shell +/usr/libexec/java_home +``` It will output the directory of the JDK, which will look something like this: - /Library/Java/JavaVirtualMachines/jdkX.X.X_XXX.jdk/Contents/Home +```shell +/Library/Java/JavaVirtualMachines/jdkX.X.X_XXX.jdk/Contents/Home +``` Navigate to that directory by using the command `cd /your/jdk/path` and use the keytool command with sudo permission as shown below. - sudo keytool -genkey -v -keystore my-upload-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000 +```shell +sudo keytool -genkey -v -keystore my-upload-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000 +``` :::caution Remember to keep the keystore file private. In case you've lost upload key or it's been compromised you should [follow these instructions](https://support.google.com/googleplay/android-developer/answer/7384423#reset). @@ -114,10 +124,23 @@ In order for Google Play to accept AAB format the App Signing by Google Play nee 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 the following command in the project root: + + + ```shell -npx react-native run-android --mode=release +npm run android -- --mode="release" ``` + + + +```shell +yarn android --mode release +``` + + + + Note that `--mode release` is only available if you've set up signing as described above. You can terminate any running bundler instances, since all your framework and JavaScript code is bundled in the APK's assets. diff --git a/docs/troubleshooting.md b/docs/troubleshooting.md index 4c73481d261..9341442e239 100644 --- a/docs/troubleshooting.md +++ b/docs/troubleshooting.md @@ -3,6 +3,8 @@ id: troubleshooting title: Troubleshooting --- +import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants'; + These are some common issues you may run into while setting up React Native. If you encounter something that is not listed here, try [searching for the issue in GitHub](https://github.com/facebook/react-native/issues/). ### Port already in use @@ -27,12 +29,25 @@ On Windows you can find the process using port 8081 using [Resource Monitor](htt #### Using a port other than 8081 -You can configure the bundler to use a port other than 8081 by using the `port` parameter: +You can configure the bundler to use a port other than 8081 by using the `port` parameter, from the root of your project run: + + + ```shell -npx react-native start --port=8088 +npm start -- --port=8088 ``` + + + +```shell +yarn start --port 8088 +``` + + + + You will also need to update your applications to load the JavaScript bundle from the new port. If running on device from Xcode, you can do this by updating occurrences of `8081` to your chosen port in the `ios/__App_Name__.xcodeproj/project.pbxproj` file. ### NPM locking error @@ -101,12 +116,25 @@ npx react-native init --verbose When you're debugging a process or need to know a little more about the error being thrown, you may want to use the verbose option to output more logs and information to nail down your issue. -Run the following command in your root directory. +Run the following command in your project's root directory. + + + + +```shell +npm run android -- --verbose +``` + + + ```shell -npx react-native run-android --verbose +yarn android --verbose ``` + + + ## Unable to start react-native package manager (on Linux) ### Case 1: Error "code":"ENOSPC","errno":"ENOSPC" @@ -119,6 +147,6 @@ echo fs.inotify.max_user_watches=582222 | sudo tee -a /etc/sysctl.conf && sudo s ### Error: spawnSync ./gradlew EACCES -If you run into issue where executing `npm run android` on macOS throws the above error, try to run `sudo chmod +x android/gradlew` command to make `gradlew` files into executable. +If you run into issue where executing `npm run android` or `yarn android` on macOS throws the above error, try to run `sudo chmod +x android/gradlew` command to make `gradlew` files into executable. [metro]: https://facebook.github.io/metro/