|
| 1 | +This is a new [**React Native**](https://reactnative.dev) project, bootstrapped using [`@react-native-community/cli`](https://github.com/react-native-community/cli). |
| 2 | + |
| 3 | +# Getting Started |
| 4 | + |
| 5 | +> **Note**: Make sure you have completed the [Set Up Your Environment](https://reactnative.dev/docs/set-up-your-environment) guide before proceeding. |
| 6 | +
|
| 7 | +## Step 1: Start Metro |
| 8 | + |
| 9 | +First, you will need to run **Metro**, the JavaScript build tool for React Native. |
| 10 | + |
| 11 | +To start the Metro dev server, run the following command from the root of your React Native project: |
| 12 | + |
| 13 | +```sh |
| 14 | +# Using npm |
| 15 | +npm start |
| 16 | + |
| 17 | +# OR using Yarn |
| 18 | +yarn start |
| 19 | +``` |
| 20 | + |
| 21 | +## Step 2: Build and run your app |
| 22 | + |
| 23 | +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: |
| 24 | + |
| 25 | +### Android |
| 26 | + |
| 27 | +```sh |
| 28 | +# Using npm |
| 29 | +npm run android |
| 30 | + |
| 31 | +# OR using Yarn |
| 32 | +yarn android |
| 33 | +``` |
| 34 | + |
| 35 | +### iOS |
| 36 | + |
| 37 | +For iOS, remember to install CocoaPods dependencies (this only needs to be run on first clone or after updating native deps). |
| 38 | + |
| 39 | +The first time you create a new project, run the Ruby bundler to install CocoaPods itself: |
| 40 | + |
| 41 | +```sh |
| 42 | +bundle install |
| 43 | +``` |
| 44 | + |
| 45 | +Then, and every time you update your native dependencies, run: |
| 46 | + |
| 47 | +```sh |
| 48 | +bundle exec pod install |
| 49 | +``` |
| 50 | + |
| 51 | +For more information, please visit [CocoaPods Getting Started guide](https://guides.cocoapods.org/using/getting-started.html). |
| 52 | + |
| 53 | +```sh |
| 54 | +# Using npm |
| 55 | +npm run ios |
| 56 | + |
| 57 | +# OR using Yarn |
| 58 | +yarn ios |
| 59 | +``` |
| 60 | + |
| 61 | +If everything is set up correctly, you should see your new app running in the Android Emulator, iOS Simulator, or your connected device. |
| 62 | + |
| 63 | +This is one way to run your app — you can also build it directly from Android Studio or Xcode. |
| 64 | + |
| 65 | +## Step 3: Modify your app |
| 66 | + |
| 67 | +Now that you have successfully run the app, let's make changes! |
| 68 | + |
| 69 | +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). |
| 70 | + |
| 71 | +When you want to forcefully reload, for example to reset the state of your app, you can perform a full reload: |
| 72 | + |
| 73 | +- **Android**: Press the <kbd>R</kbd> key twice or select **"Reload"** from the **Dev Menu**, accessed via <kbd>Ctrl</kbd> + <kbd>M</kbd> (Windows/Linux) or <kbd>Cmd ⌘</kbd> + <kbd>M</kbd> (macOS). |
| 74 | +- **iOS**: Press <kbd>R</kbd> in iOS Simulator. |
| 75 | + |
| 76 | +## Congratulations! :tada: |
| 77 | + |
| 78 | +You've successfully run and modified your React Native App. :partying_face: |
| 79 | + |
| 80 | +### Now what? |
| 81 | + |
| 82 | +- 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). |
| 83 | +- If you're curious to learn more about React Native, check out the [docs](https://reactnative.dev/docs/getting-started). |
| 84 | + |
| 85 | +# Troubleshooting |
| 86 | + |
| 87 | +If you're having issues getting the above steps to work, see the [Troubleshooting](https://reactnative.dev/docs/troubleshooting) page. |
| 88 | + |
| 89 | +# Learn More |
| 90 | + |
| 91 | +To learn more about React Native, take a look at the following resources: |
| 92 | + |
| 93 | +- [React Native Website](https://reactnative.dev) - learn more about React Native. |
| 94 | +- [Getting Started](https://reactnative.dev/docs/environment-setup) - an **overview** of React Native and how setup your environment. |
| 95 | +- [Learn the Basics](https://reactnative.dev/docs/getting-started) - a **guided tour** of the React Native **basics**. |
| 96 | +- [Blog](https://reactnative.dev/blog) - read the latest official React Native **Blog** posts. |
| 97 | +- [`@facebook/react-native`](https://github.com/facebook/react-native) - the Open Source; GitHub **repository** for React Native. |
0 commit comments