|
1 | | -# HelloWorld |
| 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 | 2 |
|
3 | | -## get started |
| 3 | +# Getting Started |
4 | 4 |
|
5 | | -1. install dependencies |
| 5 | +>**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. |
6 | 6 |
|
7 | | -```zsh |
8 | | -yarn install |
9 | | -npx pod-install |
10 | | -``` |
| 7 | +## Step 1: Start the Metro Server |
| 8 | + |
| 9 | +First, you will need to start **Metro**, the JavaScript _bundler_ that ships _with_ React Native. |
11 | 10 |
|
12 | | -2. start metro |
| 11 | +To start Metro, run the following command from the _root_ of your React Native project: |
13 | 12 |
|
14 | | -```zsh |
| 13 | +```bash |
| 14 | +# using npm |
| 15 | +npm start |
| 16 | + |
| 17 | +# OR using Yarn |
15 | 18 | yarn start |
16 | 19 | ``` |
17 | 20 |
|
18 | | -3. run emulators |
| 21 | +## Step 2: Start your Application |
19 | 22 |
|
20 | | -```zsh |
21 | | -yarn ios |
22 | | -# or |
| 23 | +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: |
| 24 | + |
| 25 | +### For Android |
| 26 | + |
| 27 | +```bash |
| 28 | +# using npm |
| 29 | +npm run android |
| 30 | + |
| 31 | +# OR using Yarn |
23 | 32 | yarn android |
24 | 33 | ``` |
25 | 34 |
|
26 | | -## Docs |
| 35 | +### For iOS |
| 36 | + |
| 37 | +```bash |
| 38 | +# using npm |
| 39 | +npm run ios |
| 40 | + |
| 41 | +# OR using Yarn |
| 42 | +yarn ios |
| 43 | +``` |
| 44 | + |
| 45 | +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. |
| 46 | + |
| 47 | +This is one way to run your app â you can also run it directly from within Android Studio and Xcode respectively. |
| 48 | + |
| 49 | +## Step 3: Modifying your App |
| 50 | + |
| 51 | +Now that you have successfully run the app, let's modify it. |
| 52 | + |
| 53 | +1. Open `App.tsx` in your text editor of choice and edit some lines. |
| 54 | +2. For **Android**: Press the <kbd>R</kbd> key twice or select **"Reload"** from the **Developer Menu** (<kbd>Ctrl</kbd> + <kbd>M</kbd> (on Window and Linux) or <kbd>Cmd â</kbd> + <kbd>M</kbd> (on macOS)) to see your changes! |
| 55 | + |
| 56 | + For **iOS**: Hit <kbd>Cmd â</kbd> + <kbd>R</kbd> in your iOS Simulator to reload the app and see your changes! |
| 57 | + |
| 58 | +## Congratulations! :tada: |
| 59 | + |
| 60 | +You've successfully run and modified your React Native App. :partying_face: |
| 61 | + |
| 62 | +### Now what? |
| 63 | + |
| 64 | +- 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). |
| 65 | +- If you're curious to learn more about React Native, check out the [Introduction to React Native](https://reactnative.dev/docs/getting-started). |
| 66 | + |
| 67 | +# Troubleshooting |
| 68 | + |
| 69 | +If you can't get this to work, see the [Troubleshooting](https://reactnative.dev/docs/troubleshooting) page. |
| 70 | + |
| 71 | +# Learn More |
| 72 | + |
| 73 | +To learn more about React Native, take a look at the following resources: |
| 74 | + |
| 75 | +- [React Native Website](https://reactnative.dev) - learn more about React Native. |
| 76 | +- [Getting Started](https://reactnative.dev/docs/environment-setup) - an **overview** of React Native and how setup your environment. |
| 77 | +- [Learn the Basics](https://reactnative.dev/docs/getting-started) - a **guided tour** of the React Native **basics**. |
| 78 | +- [Blog](https://reactnative.dev/blog) - read the latest official React Native **Blog** posts. |
| 79 | +- [`@facebook/react-native`](https://github.com/facebook/react-native) - the Open Source; GitHub **repository** for React Native. |
| 80 | + |
| 81 | +## Documentation |
27 | 82 | [React Native](https://reactnative.dev/docs/environment-setup) |
28 | 83 | [React Native Directory](https://reactnative.directory/) |
29 | 84 | [React Navigation](https://reactnavigation.org/) |
|
0 commit comments