|
1 |
| -This is a new [**React Native**](https://reactnative.dev) project, bootstrapped using [`@react-native-community/cli`](https://github.com/react-native-community/cli). |
| 1 | +# Contributing |
2 | 2 |
|
3 |
| -# Getting Started |
| 3 | +Contributions are always welcome, no matter how large or small! |
4 | 4 |
|
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. |
| 5 | +We want this community to be friendly and respectful to each other. Please follow it in all your interactions with the project. Before contributing, please read the [code of conduct](./CODE_OF_CONDUCT.md). |
6 | 6 |
|
7 |
| -## Step 1: Start the Metro Server |
| 7 | +## Development workflow |
8 | 8 |
|
9 |
| -First, you will need to start **Metro**, the JavaScript _bundler_ that ships _with_ React Native. |
| 9 | +This project is a monorepo managed using [Yarn workspaces](https://yarnpkg.com/features/workspaces). It contains the following packages: |
10 | 10 |
|
11 |
| -To start Metro, run the following command from the _root_ of your React Native project: |
| 11 | +- The library package in the root directory. |
| 12 | +- The mobile android app is in the `example/` directory. |
| 13 | +- The Wear OS android app is in the `watch-example/` directory. |
12 | 14 |
|
13 |
| -```bash |
14 |
| -# using npm |
15 |
| -npm start |
| 15 | +To get started with the project, run `yarn` in the root directory to install the required dependencies for each package: |
16 | 16 |
|
17 |
| -# OR using Yarn |
18 |
| -yarn start |
| 17 | +```sh |
| 18 | +yarn |
19 | 19 | ```
|
20 | 20 |
|
21 |
| -## Step 2: Start your Application |
| 21 | +### Pair the Android and WearOS emulators |
22 | 22 |
|
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: |
| 23 | +- Create a new emulator of type [WearOS Large round][22]. |
| 24 | +- Pair the Android emulator with the Wear OS emulator. Follow this [instructions][21]. |
24 | 25 |
|
25 |
| -### For Android |
| 26 | +### Build the Mobile App |
26 | 27 |
|
27 |
| -```bash |
28 |
| -# using npm |
29 |
| -npm run android |
| 28 | +The first step is building the react-native Android mobile app. |
30 | 29 |
|
31 |
| -# OR using Yarn |
| 30 | +```bash |
| 31 | +cd example |
| 32 | +yarn install |
| 33 | +yarn start |
| 34 | +# Now build android |
32 | 35 | yarn android
|
33 | 36 | ```
|
34 | 37 |
|
35 |
| -### For iOS |
| 38 | +### Build the WearOS App |
36 | 39 |
|
37 | 40 | ```bash
|
38 |
| -# using npm |
39 |
| -npm run ios |
| 41 | +cd watch-example |
| 42 | +yarn install |
| 43 | +yarn start --port=8082 |
| 44 | +``` |
40 | 45 |
|
41 |
| -# OR using Yarn |
42 |
| -yarn ios |
| 46 | +Build the project with `yarn android`, open the [react native dev menu][23] and change the bundle location to `your-ip:8082` (for ex. `192.168.18.2:8082`). |
| 47 | +Now you can build the WearOS app with the command: |
| 48 | + |
| 49 | +```bash |
| 50 | +yarn android |
43 | 51 | ```
|
44 | 52 |
|
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. |
| 53 | +[20]: https://reactnative.dev/docs/next/signed-apk-android |
| 54 | +[21]: https://developer.android.com/training/wearables/get-started/connect-phone |
| 55 | +[22]: https://gist.github.com/assets/24992535/f6cb9f84-dc50-492b-963d-6d9e9396f451 'wear os large round' |
| 56 | +[23]: https://reactnative.dev/docs/debugging |
46 | 57 |
|
47 |
| -This is one way to run your app — you can also run it directly from within Android Studio and Xcode respectively. |
| 58 | +### Sending a pull request |
48 | 59 |
|
49 |
| -## Step 3: Modifying your App |
| 60 | +> **Working on your first pull request?** You can learn how from this _free_ series: [How to Contribute to an Open Source Project on GitHub](https://app.egghead.io/playlists/how-to-contribute-to-an-open-source-project-on-github). |
50 | 61 |
|
51 |
| -Now that you have successfully run the app, let's modify it. |
| 62 | +When you're sending a pull request: |
52 | 63 |
|
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! |
| 64 | +- Prefer small pull requests focused on one change. |
| 65 | +- Verify that linters and tests are passing. |
| 66 | +- Review the documentation to make sure it looks good. |
| 67 | +- Follow the pull request template when opening a pull request. |
| 68 | +- For pull requests that change the API or implementation, discuss with maintainers first by opening an issue. |
55 | 69 |
|
56 |
| - For **iOS**: Hit <kbd>Cmd ⌘</kbd> + <kbd>R</kbd> in your iOS Simulator to reload the app and see your changes! |
| 70 | +### Linting and tests |
57 | 71 |
|
58 |
| -## Congratulations! :tada: |
| 72 | +[ESLint](https://eslint.org/), [Prettier](https://prettier.io/), [TypeScript](https://www.typescriptlang.org/) |
59 | 73 |
|
60 |
| -You've successfully run and modified your React Native App. :partying_face: |
| 74 | +We use [TypeScript](https://www.typescriptlang.org/) for type checking, [ESLint](https://eslint.org/) with [Prettier](https://prettier.io/) for linting and formatting the code, and [Jest](https://jestjs.io/) for testing. |
61 | 75 |
|
62 |
| -### Now what? |
| 76 | +Our pre-commit hooks verify that the linter and tests pass when committing. |
63 | 77 |
|
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). |
| 78 | +### Publishing to npm |
66 | 79 |
|
67 |
| -# Troubleshooting |
| 80 | +We use [release-it](https://github.com/release-it/release-it) to make it easier to publish new versions. It handles common tasks like bumping version based on semver, creating tags and releases etc. |
68 | 81 |
|
69 |
| -If you can't get this to work, see the [Troubleshooting](https://reactnative.dev/docs/troubleshooting) page. |
| 82 | +To publish new versions, run the following: |
| 83 | + |
| 84 | +```sh |
| 85 | +yarn release |
| 86 | +``` |
70 | 87 |
|
71 |
| -# Learn More |
| 88 | +### Scripts |
72 | 89 |
|
73 |
| -To learn more about React Native, take a look at the following resources: |
| 90 | +The `package.json` file contains various scripts for common tasks: |
74 | 91 |
|
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. |
| 92 | +- `yarn`: setup project by installing dependencies. |
| 93 | +- `yarn typecheck`: type-check files with TypeScript. |
| 94 | +- `yarn lint`: lint files with ESLint. |
| 95 | +- `yarn test`: run unit tests with Jest. |
0 commit comments