diff --git a/template/README.md b/template/README.md index 12470c3..3e2c3f8 100644 --- a/template/README.md +++ b/template/README.md @@ -2,58 +2,76 @@ This is a new [**React Native**](https://reactnative.dev) project, bootstrapped # Getting Started ->**Note**: Make sure you have completed the [React Native - Environment Setup](https://reactnative.dev/docs/environment-setup) instructions till "Creating a new application" step, before proceeding. +> **Note**: Make sure you have completed the [Set Up Your Environment](https://reactnative.dev/docs/set-up-your-environment) guide before proceeding. -## Step 1: Start the Metro Server +## Step 1: Start Metro -First, you will need to start **Metro**, the JavaScript _bundler_ that ships _with_ React Native. +First, you will need to run **Metro**, the JavaScript build tool for React Native. -To start Metro, run the following command from the _root_ of your React Native project: +To start the Metro dev server, run the following command from the root of your React Native project: -```bash -# using npm +```sh +# Using npm npm start # OR using Yarn yarn start ``` -## Step 2: Start your Application +## Step 2: Build and run your app -Let Metro Bundler run in its _own_ terminal. Open a _new_ terminal from the _root_ of your React Native project. Run the following command to start your _Android_ or _iOS_ app: +With Metro running, open a new terminal window/pane from the root of your React Native project, and use one of the following commands to build and run your Android or iOS app: -### For Android +### Android -```bash -# using npm +```sh +# Using npm npm run android # OR using Yarn yarn android ``` -### For iOS +### iOS -```bash -# using npm +For iOS, remember to install CocoaPods dependencies (this only needs to be run on first clone or after updating native deps). + +The first time you create a new project, run the Ruby bundler to install CocoaPods itself: + +```sh +bundle install +``` + +Then, and every time you update your native dependencies, run: + +```sh +bundle exec pod install +``` + +For more information, please visit [CocoaPods Getting Started guide](https://guides.cocoapods.org/using/getting-started.html). + +```sh +# Using npm npm run ios # OR using Yarn yarn ios ``` -If everything is set up _correctly_, you should see your new app running in your _Android Emulator_ or _iOS Simulator_ shortly provided you have set up your emulator/simulator correctly. +If everything is set up correctly, you should see your new app running in the Android Emulator, iOS Simulator, or your connected device. + +This is one way to run your app — you can also build it directly from Android Studio or Xcode. -This is one way to run your app — you can also run it directly from within Android Studio and Xcode respectively. +## Step 3: Modify your app -## Step 3: Modifying your App +Now that you have successfully run the app, let's make changes! -Now that you have successfully run the app, let's modify it. +Open `App.tsx` in your text editor of choice and make some changes. When you save, your app will automatically update and reflect these changes — this is powered by [Fast Refresh](https://reactnative.dev/docs/fast-refresh). -1. Open `App.tsx` in your text editor of choice and edit some lines. -2. For **Android**: Press the R key twice or select **"Reload"** from the **Developer Menu** (Ctrl + M (on Window and Linux) or Cmd ⌘ + M (on macOS)) to see your changes! +When you want to forcefully reload, for example to reset the state of your app, you can perform a full reload: - For **iOS**: Hit Cmd ⌘ + R in your iOS Simulator to reload the app and see your changes! +- **Android**: Press the R key twice or select **"Reload"** from the **Dev Menu**, accessed via Ctrl + M (Windows/Linux) or Cmd ⌘ + M (macOS). +- **iOS**: Press R in iOS Simulator. ## Congratulations! :tada: @@ -62,11 +80,11 @@ You've successfully run and modified your React Native App. :partying_face: ### Now what? - If you want to add this new React Native code to an existing application, check out the [Integration guide](https://reactnative.dev/docs/integration-with-existing-apps). -- If you're curious to learn more about React Native, check out the [Introduction to React Native](https://reactnative.dev/docs/getting-started). +- If you're curious to learn more about React Native, check out the [docs](https://reactnative.dev/docs/getting-started). # Troubleshooting -If you can't get this to work, see the [Troubleshooting](https://reactnative.dev/docs/troubleshooting) page. +If you're having issues getting the above steps to work, see the [Troubleshooting](https://reactnative.dev/docs/troubleshooting) page. # Learn More