You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
React Native is one of Facebook's first open source projects that is both under very active development and is also being used to ship code to everybody on [facebook.com](https://facebook.com). We're still working out the kinks to make contributing to this project as easy and transparent as possible, but we're not quite there yet. Hopefully this document makes the process for contributing clear and preempts some questions you may have.
3
+
Want to contribute to React Native? There are a few things you need to know.
4
4
5
-
## Our Development Process
6
-
7
-
Some of the core team will be working directly on GitHub. These changes will be public from the beginning. Other changesets will come via a bridge with Facebook's internal source control. This is a necessity as it allows engineers at Facebook outside of the core team to move fast and contribute from an environment they are comfortable in.
8
-
9
-
### `master` is unsafe
10
-
11
-
We will do our best to keep `master` in good shape, with tests passing at all times. But in order to move fast, we will make API changes that your application might not be compatible with. We will do our best to communicate these changes and version appropriately so you can lock into a specific version if need be.
12
-
13
-
### Pull Requests
14
-
15
-
The core team will be monitoring for pull requests. When we get one, we'll run some Facebook-specific integration tests on it first. From here, we'll need to get another person to sign off on the changes and then merge the pull request. For API changes we may need to fix internal uses, which could cause some delay. We'll do our best to provide updates and feedback throughout the process.
16
-
17
-
**Please submit your pull request on the `master` branch**. If the fix is critical and should be included in a stable branch please mention it and it will be cherry picked into it by a project maintainer.
18
-
19
-
*Before* submitting a pull request, please make sure the following is done…
20
-
21
-
1. Fork the repo and create your branch from `master`.
22
-
2.**Describe your test plan in your commit.**
23
-
- If you've added code that should be tested, add tests!
24
-
- If you've changed APIs, update the documentation.
25
-
- If you've updated the docs, verify the website locally and submit screenshots if applicable.
26
-
27
-
```
28
-
$ cd website
29
-
$ npm install && npm start
30
-
Open the following in your browser: http://localhost:8079/react-native/index.html
31
-
```
32
-
33
-
3. Add the copyright notice to the top of any new files you've added.
34
-
4. Ensure tests pass on Travis and Circle CI.
35
-
5. Make sure your code lints (`node linter.js <files touched>`).
36
-
6. If you haven't already, sign the [CLA](https://code.facebook.com/cla).
37
-
7. Squash your commits (`git rebase -i`).
38
-
One intent alongside one commit makes it clearer for people to review and easier to understand your intention.
39
-
40
-
> **Note:** It is not necessary to keep clicking `Merge master to your branch` on the PR page. You would want to merge master if there are conflicts or tests are failing. The Facebook-GitHub-Bot ultimately squashes all commits to a single one before merging your PR.
41
-
42
-
#### Copyright Notice for files
43
-
44
-
Copy and paste this to the top of your new file(s):
45
-
46
-
```JS
47
-
/**
48
-
* Copyright (c) 2015-present, Facebook, Inc.
49
-
* All rights reserved.
50
-
*
51
-
* This source code is licensed under the BSD-style license found in the
52
-
* LICENSE file in the root directory of this source tree. An additional grant
53
-
* of patent rights can be found in the PATENTS file in the same directory.
54
-
*/
55
-
```
56
-
57
-
If you've added a new module, add a `@providesModule <moduleName>` at the end of the comment. This will allow the haste package manager to find it.
58
-
59
-
### Contributor License Agreement (CLA)
60
-
61
-
In order to accept your pull request, we need you to submit a CLA. You only need to do this once, so if you've done this for another Facebook open source project, you're good to go. If you are submitting a pull request for the first time, just let us know that you have completed the CLA and we can cross-check with your GitHub username.
62
-
63
-
[Complete your CLA here](https://code.facebook.com/cla)
64
-
65
-
## Bugs
66
-
67
-
### Where to Find Known Issues
68
-
69
-
We are using GitHub Issues for our public bugs. We keep a close eye on this and try to make it clear when we have an internal fix in progress. Before filing a new task, try to make sure your problem doesn't already exist.
70
-
71
-
### Reporting New Issues
72
-
73
-
The best way to get your bug fixed is to provide a reduced test case. Please provide either a public repository with a runnable example or a [Sketch](https://sketch.expo.io/).
74
-
75
-
### Security Bugs
76
-
77
-
Facebook has a [bounty program](https://www.facebook.com/whitehat/) for the safe disclosure of security bugs. With that in mind, please do not file public issues; go through the process outlined on that page.
***Most important: Look around.** Match the style you see used in the rest of the project. This includes formatting, naming things in code, naming things in documentation.
91
-
* Add trailing commas,
92
-
* 2 spaces for indentation (no tabs)
93
-
* "Attractive"
94
-
95
-
#### JavaScript
96
-
97
-
* Use semicolons;
98
-
*`'use strict';`
99
-
* Prefer `'` over `"`
100
-
* Do not use the optional parameters of `setTimeout` and `setInterval`
101
-
* 80 character line length
102
-
103
-
#### JSX
104
-
105
-
* Prefer `"` over `'` for string literal props
106
-
* When wrapping opening tags over multiple lines, place one prop per line
107
-
*`{}` of props should hug their values (no spaces)
108
-
* Place the closing `>` of opening tags on the same line as the last prop
109
-
* Place the closing `/>` of self-closing tags on their own line and left-align them with the opening `<`
110
-
111
-
#### Objective-C
112
-
113
-
* Space after `@property` declarations
114
-
* Brackets on *every*`if`, on the *same* line
115
-
*`- method`, `@interface`, and `@implementation` brackets on the following line
116
-
**Try* to keep it around 80 characters line length (sometimes it's just not possible...)
117
-
*`*` operator goes with the variable name (e.g. `NSObject *variableName;`)
118
-
119
-
#### Java
120
-
121
-
* If a method call spans multiple lines closing bracket is on the same line as the last argument.
122
-
* If a method header doesn't fit on one line each argument goes on a separate line.
123
-
* 100 character line length
124
-
125
-
### Documentation
126
-
127
-
* Do not wrap lines at 80 characters - configure your editor to soft-wrap when editing documentation.
128
-
129
-
## License
130
-
131
-
By contributing to React Native, you agree that your contributions will be licensed under its BSD license.
5
+
We wrote a [contribution guide](https://facebook.github.io/react-native/docs/contributing.html) to help you get started.
# [React Native](https://facebook.github.io/react-native/)·[](https://travis-ci.org/facebook/react-native)[](https://circleci.com/gh/facebook/react-native)[](https://badge.fury.io/js/react-native)[](CONTRIBUTING.md#pull-requests)
2
2
3
-
React Native enables you to build world-class application experiences on native platforms using a consistent developer experience based on JavaScript and [React](https://facebook.github.io/react). The focus of React Native is on developer efficiency across all the platforms you care about - learn once, write anywhere. Facebook uses React Native in multiple production apps and will continue investing in React Native.
3
+
Learn once, write anywhere: Build mobile apps with React.
4
+
5
+
-**Build native mobile apps using JavaScript and React:** React Native lets you build mobile apps using only JavaScript. It uses the same design as [React](https://facebook.github.io/react), letting you compose a rich mobile UI from declarative components.
6
+
-**A React Native app is a real mobile app:** With React Native, you don't build a "mobile web app", an "HTML5 app", or a "hybrid app". You build a real mobile app that's indistinguishable from an app built using Objective-C, Java, or Swift. React Native uses the same fundamental UI building blocks as regular iOS and Android apps. You just put those building blocks together using JavaScript and React.
7
+
-**Don't waste time recompiling:** React Native lets you build your app faster. Instead of recompiling, you can reload your app instantly. With hot reloading, you can even run new code while retaining your application state. Give it a try - it's a magical experience.
8
+
-**Use native code when you need to:** React Native combines smoothly with components written in Objective-C, Java, or Swift. It's simple to drop down to native code if you need to optimize a few aspects of your application. It's also easy to build part of your app in React Native, and part of your app using native code directly - that's how the Facebook app works.
9
+
10
+
The focus of React Native is on developer efficiency across all the platforms you care about - learn once, write anywhere. Facebook uses React Native in multiple production apps and will continue investing in React Native.
11
+
12
+
See the official [React Native website](https://facebook.github.io/react-native/) for an introduction to React Native.
4
13
5
14
Supported operating systems are >= Android 4.1 (API 16) and >= iOS 8.0.
See the official [React Native website](https://facebook.github.io/react-native/) for an introduction to React Native.
20
-
21
24
## Getting Started
22
25
23
-
- Follow the [Getting Started guide](https://facebook.github.io/react-native/docs/getting-started.html) to install React Native and its dependencies.
24
-
-[Open the RNTester app](#examples) to see a list of components that ship with React Native.
25
-
- Install the React Developer Tools for [Chrome](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi) or [Firefox](https://addons.mozilla.org/firefox/addon/react-devtools/) for better debugging [(read more)](https://facebook.github.io/react-native/docs/debugging.html).
26
-
- Try out apps from the [Showcase](https://facebook.github.io/react-native/showcase.html) to see what React Native is capable of!
27
-
28
-
## Getting Help
29
-
30
-
Please use these community resources for getting help. We use the GitHub issues for tracking bugs and feature requests and have limited bandwidth to address them.
26
+
Follow the [Getting Started guide](https://facebook.github.io/react-native/docs/getting-started.html). The recommended way to install React Native depends on your project. Here you can find short guides for the most common scenarios:
31
27
32
-
- Ask a question on [StackOverflow](https://stackoverflow.com/) and tag it with `react-native`
33
-
- Chat with us on [Reactiflux](https://discord.gg/0ZcbPKXt5bWJVmUY) in #react-native
34
-
- Articulate your feature request or upvote existing ones on [Canny](https://react-native.canny.io/feature-requests)
35
-
- Start a thread on the [React Discussion Board](https://discuss.reactjs.org/)
36
-
- Join #reactnative on IRC: chat.freenode.net
37
-
- If it turns out that you may have found a bug, please [open an issue](#opening-issues)
28
+
-[Trying out React Native](https://snack.expo.io/BJ-uC-nrb)
29
+
-[Creating a New Application](http://facebook.github.io/react-native/docs/getting-started.html)
30
+
-[Adding React Native to an Existing Application](http://facebook.github.io/react-native/docs/integration-with-existing-apps.html)
38
31
39
32
## Documentation
40
33
@@ -48,54 +41,29 @@ Another great way to learn more about the components and APIs included with Reac
48
41
49
42
The React Native documentation only discusses the components, APIs and topics specific to React Native (React on iOS and Android). For further documentation on the React API that is shared between React Native and React DOM, refer to the [React documentation](https://facebook.github.io/react/).
Now open `RNTester/RNTester.xcodeproj` and hit Run in Xcode.
59
-
60
-
### Running the RNTester app on Android
61
-
62
-
Note that you'll need the Android NDK installed, see [prerequisites](https://github.com/facebook/react-native/blob/master/ReactAndroid/README.md#prerequisites).
63
-
64
-
```bash
65
-
./gradlew :RNTester:android:app:installDebug
66
-
# Start the packager in a separate shell (make sure you ran npm install):
67
-
./scripts/packager.sh
68
-
```
69
-
70
-
## Extending React Native
71
-
72
-
- Looking for a component? [JS.coach](https://js.coach/react-native)
73
-
- Fellow developers write and publish React Native modules to npm and open source them on GitHub.
74
-
- Making modules helps grow the React Native ecosystem and community. We recommend writing modules for your use cases and sharing them on npm.
75
-
- Read the guides on Native Modules ([iOS](https://facebook.github.io/react-native/docs/native-modules-ios.html), [Android](https://facebook.github.io/react-native/docs/native-modules-android.html)) and Native UI Components ([iOS](https://facebook.github.io/react-native/docs/native-components-ios.html), [Android](https://facebook.github.io/react-native/docs/native-components-android.html)) if you are interested in extending native functionality.
76
-
77
44
## Upgrading
78
45
79
46
React Native is under active development. See the guide on [upgrading React Native](https://facebook.github.io/react-native/docs/upgrading.html) to keep your project up-to-date.
80
47
81
-
## Opening Issues
48
+
## Contributing
82
49
83
-
If you encounter a bug with React Native we would like to hear about it. Search the [existing issues](https://github.com/facebook/react-native/issues) and try to make sure your problem doesn’t already exist before opening a new issue. It’s helpful if you include the version of React Native and OS you’re using. Please include a stack trace and reduced repro case when appropriate, too.
50
+
Read below to learn how you can take part in improving React Native.
84
51
85
-
The GitHub issues are intended for bug reports and feature requests. For help and questions with using React Native please make use of the resources listed in the [Getting Help](#getting-help) section. [Canny](https://react-native.canny.io/feature-requests) in particular is a good way to signal your interest in a feature or issue. There are limited resources available for handling issues and by keeping the list of open issues lean we can respond in a timely manner.
52
+
### [Code of Conduct](https://code.facebook.com/codeofconduct)
86
53
87
-
## Contributing
54
+
Facebook has adopted a Code of Conduct that we expect project participants to adhere to. Please read [the full text](https://code.facebook.com/codeofconduct) so that you can understand what actions will and will not be tolerated.
55
+
56
+
### Contributing Guide
88
57
89
-
For more information about contributing PRs and issues, see our [Contribution Guidelines](https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md).
58
+
Read our [contributing guide](CONTRIBUTING.md) to learn about our development process, how to propose bugfixes and improvements, and how to build and test your changes to React Native.
90
59
91
-
[Good First Task](https://github.com/facebook/react-native/labels/Good%20First%20Task) is a great starting point for PRs.
60
+
### Beginner Friendly Bugs
61
+
62
+
We have a list of [beginner friendly bugs](https://github.com/facebook/react-native/issues?q=is%3Aopen+is%3Aissue+label%3A%22Good+First+Task%22) to help you get your feet wet in the React Native codebase and familiar with our contribution process. This is a great place to get started.
92
63
93
-
We encourage the community to ask and answer questions on Stack Overflow with [the react-native tag](https://stackoverflow.com/questions/tagged/react-native). It's a great way to help out and be involved!
94
64
95
65
## License
96
66
97
67
React is [BSD licensed](./LICENSE). We also provide an additional [patent grant](./PATENTS).
98
68
99
69
React documentation is [Creative Commons licensed](./LICENSE-docs).
100
-
101
-
Examples provided in this repository and in the documentation are [separately licensed](./LICENSE-examples), as are some of the [custom components](./LICENSE-CustomComponents).
0 commit comments