Summary:
There are two ways to get started with React Native: using CRNA, or by building native code. The latter requires a set of dependencies that also need to be installed even by people who use CRNA if they have ejected.
There needs to be a clear demarcation between the two approaches as well as clear instructions as to which steps are of interest to CRNA using parties or people adding RN to an existing app.
Separating the two approaches entirely by using tabs can achieve this purpose.
Built and tested the website on Chrome on macOS. Have not yet tested other browsers or OS configurations.
![screencapture-localhost-8079-react-native-docs-getting-started-html-1494974542733](https://cloud.githubusercontent.com/assets/165856/26131374/77258b0c-3a4e-11e7-9a17-074610ca33d1.png)
![screencapture-localhost-8079-react-native-docs-getting-started-html-1494974580882](https://cloud.githubusercontent.com/assets/165856/26131370/73806990-3a4e-11e7-9e67-73c519b050da.png)
This is a work in progress. Feedback is appreciated. I am not yet happy with the different sets of tabs/buttons, for example.
Closes https://github.com/facebook/react-native/pull/14005
Differential Revision: D5096426
Pulled By: hramos
fbshipit-source-id: cdbf19b148ec87f2f2dfdced345084d0bbff4c26
Summary:
cc hramos
Pretty sure I've hit all of the places where AppRegistry is called in CRNA-pastable examples. Let me know whether you think we need to approach the version lag differently, I figure a caveat is as natural a place to call it out as any.
If you end up finding anything else that needs tweaking before cherry picking, I'm happy to push that up here too.
Closes https://github.com/facebook/react-native/pull/13744
Differential Revision: D5071038
Pulled By: hramos
fbshipit-source-id: 4a4a6f2a73079aca627f17d75a4e4b395ecbd4a8
Summary:
Thanks for submitting a PR! Please read these instructions carefully:
- [x] Explain the **motivation** for making this change.
- [x] Provide a **test plan** demonstrating that the code is solid.
- [x] Match the **code formatting** of the rest of the codebase.
- [x] Target the `master` branch, NOT a "stable" branch.
The docs had `backgroundColor` listed as a supported style prop for
native animation, but only `opacity` and `transform` are supported
at this time. See https://github.com/facebook/react-native/blob/master/Libraries/Animated/src/NativeAnimatedHelper.js#L108
My motivation was that I tried to use it and it didn't work. 😄
Github appears to render the change correctly.
Closes https://github.com/facebook/react-native/pull/13933
Differential Revision: D5071869
Pulled By: hramos
fbshipit-source-id: 947c8fa56b99d99c44603d8ef81664455234ed84
Summary:
The example apps link was pointing to a 404 page.
Thanks for submitting a PR! Please read these instructions carefully:
- [x] Explain the **motivation** for making this change.
- [x] Provide a **test plan** demonstrating that the code is solid.
- [x] Match the **code formatting** of the rest of the codebase.
- [x] Target the `master` branch, NOT a "stable" branch.
What existing problem does the pull request solve?
The link to example apps was pointing to a 404 page
A good test plan has the exact commands you ran and their output, provides screenshots or videos if the pull request changes UI or updates the website. See [What is a Test Plan?][1] to learn more.
If you have added code that should be tested, add tests.
N/A
Sign the [CLA][2], if you haven't already.
Small pull requests are much easier to review and more likely to get merged. Make sure the PR does only one thing, otherwise please split it.
Make sure all **tests pass** on both [Travis][3] and [Circle CI][4]. PRs that break tests are unlikely to be merged.
For more info, see the ["Pull Requests"][5] section of our "Contributing" guidelines.
[1]: https://medium.com/martinkonicek/what-is-a-test-plan-8bfc840ec171#.y9lcuqqi9
[2]: https://code.facebook.com/cla
[3]: https://travis-ci.org/facebook/react-native
[4]: http://circleci.com/gh/facebook/react-native
[5]: https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md#pull-requests
Closes https://github.com/facebook/react-native/pull/13986
Differential Revision: D5071821
Pulled By: hramos
fbshipit-source-id: 620902de8445fc3569c3f7b075e271b413a8544c
Summary:
Clarified some steps unique to the Windows installer.
Closes https://github.com/facebook/react-native/pull/13983
Differential Revision: D5065884
Pulled By: hramos
fbshipit-source-id: ab47ad7e7fcf10f8b44ab209807d661c465b76a3
Summary:
My changes in https://github.com/facebook/react-native/pull/13707 assumed RN website works the same way as React website, but this assumption was wrong, so I added invalid markup.
This fixes it, and also moves the images into the website folder so we don't depend on random CDNs.
Closes https://github.com/facebook/react-native/pull/13844
Differential Revision: D5019956
Pulled By: gaearon
fbshipit-source-id: bec40d70997231a73d3ef67c82386bc1bb202d7b
Summary:
Changed the registerComponent name from 'HelloWolrdApp' to 'AwesomeProject' because the instructions says paste it into your index.ios.js but that doesn't actually work, unless the component is named 'AwesomeProject'.
First timers shouldn't have to deal with a big bad red screen of death. 😅
Closes https://github.com/facebook/react-native/pull/13709
Differential Revision: D5010357
Pulled By: javache
fbshipit-source-id: 101bec8e9d98fa97b3cd4a2a8e81df1f87381216
Summary:
Existing instructions are a bit misleading, as Chrome extension is not supposed to work, but there is still a supported way to run them.
Closes https://github.com/facebook/react-native/pull/13707
Differential Revision: D5010169
Pulled By: gaearon
fbshipit-source-id: f9558c9ccb04196854b2eef6ff40a998350b65db
Summary:
Added an example of the Fetch usage inside a component.
Thanks for submitting a pull request! Please provide enough information so that others can review your pull request:
> **Unless you are a React Native release maintainer and cherry-picking an *existing* commit into a current release, ensure your pull request is targeting the `master` React Native branch.**
Explain the **motivation** for making this change. What existing problem does the pull request solve?
Prefer **small pull requests**. These are much easier to review and more likely to get merged. Make sure the PR does only one thing, otherwise please split it.
**Test plan (required)**
Demonstrate the code is solid. Example: The exact commands you ran and their output, screenshots / videos if the pull request changes UI.
Make sure tests pass on both Travis and Circle CI.
**Code formatting**
Look around. Match the style of the rest of the codebase. See also the simple [style guide](https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md#style-guide).
For more info, see the ["Pull Requests" section of our "Contributing" guidelines](https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md#pull-requests).
Closes https://github.com/facebook/react-native/pull/12348
Differential Revision: D4962419
Pulled By: hramos
fbshipit-source-id: 37b3517811f5391126d9e3ec026d2902705729a7
Summary:
Updated map view example to correct and extend on change event management
Thanks for submitting a pull request! Please provide enough information so that others can review your pull request:
> **Unless you are a React Native release maintainer and cherry-picking an *existing* commit into a current release, ensure your pull request is targeting the `master` React Native branch.**
Explain the **motivation** for making this change. What existing problem does the pull request solve?
Prefer **small pull requests**. These are much easier to review and more likely to get merged. Make sure the PR does only one thing, otherwise please split it.
**Test plan (required)**
Demonstrate the code is solid. Example: The exact commands you ran and their output, screenshots / videos if the pull request changes UI.
Make sure tests pass on both Travis and Circle CI.
**Code formatting**
Look around. Match the style of the rest of the codebase. See also the simple [style guide](https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md#style-guide).
For more info, see the ["Pull Requests" section of our "Contributing" guidelines](https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md#pull-requests).
Closes https://github.com/facebook/react-native/pull/12759
Differential Revision: D4962286
Pulled By: hramos
fbshipit-source-id: 92cc41f100616d3b5633603cf69850ebc9fc33b2
Summary:
The option to change a port is no longer displayed in the dev menu.
We don't need to call out specific apps that use port 8081.
People can now use React DevTools to debug on Chrome.
Closes https://github.com/facebook/react-native/pull/13687
Differential Revision: D4962385
Pulled By: hramos
fbshipit-source-id: ddf491e8091b5c6443ab3ca080cae5253268c6d7
Summary:
When gradle can't find RN in this path, it doesn't throw an error, but instead looks in maven and finds an old version of it (0.20.0). You can see here that's the latest version maven has: https://mvnrepository.com/artifact/com.facebook.react/react-native
I had to waste a lot of time to figure out what exactly went wrong.
Thanks for submitting a pull request! Please provide enough information so that others can review your pull request:
> **Unless you are a React Native release maintainer and cherry-picking an *existing* commit into a current release, ensure your pull request is targeting the `master` React Native branch.**
Explain the **motivation** for making this change. What existing problem does the pull request solve?
Prefer **small pull requests**. These are much easier to review and more likely to get merged. Make sure the PR does only one thing, otherwise please split it.
**Test plan (required)**
Demonstrate the code is solid. Example: The exact commands you ran and their output, screenshots / videos if the pull request changes UI.
Make sure tests pass on both Travis and Circle CI.
**Code formatting**
Look around. Match the style of the rest of the codebase. See also the simple [style guide](https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md#style-guide).
For more info, see the ["Pull Requests" section of our "Contributing" guidelines](https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md#pull-requests).
Closes https://github.com/facebook/react-native/pull/12951
Differential Revision: D4962277
Pulled By: hramos
fbshipit-source-id: 5bc3d7d4ed581581f0c01c7efd450c1f9c6dbf67
Summary:
The link navigators is rerouted to the getting started page.
Thanks for submitting a pull request! Please provide enough information so that others can review your pull request:
> **Unless you are a React Native release maintainer and cherry-picking an *existing* commit into a current release, ensure your pull request is targeting the `master` React Native branch.**
Explain the **motivation** for making this change. What existing problem does the pull request solve?
Prefer **small pull requests**. These are much easier to review and more likely to get merged. Make sure the PR does only one thing, otherwise please split it.
**Test plan (required)**
Demonstrate the code is solid. Example: The exact commands you ran and their output, screenshots / videos if the pull request changes UI.
Make sure tests pass on both Travis and Circle CI.
**Code formatting**
Look around. Match the style of the rest of the codebase. See also the simple [style guide](https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md#style-guide).
For more info, see the ["Pull Requests" section of our "Contributing" guidelines](https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md#pull-requests).
Closes https://github.com/facebook/react-native/pull/12948
Differential Revision: D4962276
Pulled By: hramos
fbshipit-source-id: cea95163078b5ac58b468de7db4c965101de68cc
Summary:
Hi there,
As ospfranco found there is some documentation for the code coming from #7338 missing, so I added it. It concerns the method, headers and bdoy field on the Image source object.
If you would like to have any changes made, please don't hesitate to comment, I will add them.
Have a nice day and thank you for maintaining React Native!
Closes https://github.com/facebook/react-native/pull/9304
Differential Revision: D4913262
Pulled By: javache
fbshipit-source-id: 922430ec3388560686e1cf53cb5dff7f30e4e31f
Summary:
removed duplicate colors
Thanks for submitting a PR! Please read these instructions carefully:
- [ ] Explain the **motivation** for making this change.
- [ ] Provide a **test plan** demonstrating that the code is solid.
- [ ] Match the **code formatting** of the rest of the codebase.
- [ ] Target the `master` branch, NOT a "stable" branch.
What existing problem does the pull request solve?
A good test plan has the exact commands you ran and their output, provides screenshots or videos if the pull request changes UI or updates the website. See [What is a Test Plan?][1] to learn more.
If you have added code that should be tested, add tests.
Sign the [CLA][2], if you haven't already.
Small pull requests are much easier to review and more likely to get merged. Make sure the PR does only one thing, otherwise please split it.
Make sure all **tests pass** on both [Travis][3] and [Circle CI][4]. PRs that break tests a
Closes https://github.com/facebook/react-native/pull/13555
Differential Revision: D4908510
Pulled By: javache
fbshipit-source-id: 819a3c2788232bc092cccc071f115853e7caddad
Summary:
Thanks for submitting a PR! Please read these instructions carefully:
- [x] Explain the **motivation** for making this change.
- [x] Provide a **test plan** demonstrating that the code is solid.
- [ ] Match the **code formatting** of the rest of the codebase.
- [x] Target the `master` branch, NOT a "stable" branch.
So other Mac users wont have to dig around to look for the link.
What existing problem does the pull request solve?
A good test plan has the exact commands you ran and their output, provides screenshots or videos if the pull request changes UI or updates the website. See [What is a Test Plan?][1] to learn more.
If you have added code that should be tested, add tests.
Sign the [CLA][2], if you haven't already.
Small pull requests are much easier to review and more likely to get merged. Make sure the PR does only one thing, otherwise please split it.
Make sure all **tests pass** on both [Travis][3] and
Closes https://github.com/facebook/react-native/pull/13434
Differential Revision: D4866808
fbshipit-source-id: 9259eff382d9440754e672ad05828342091877d2
Summary:
If the new state depends on the previous state, if I remember correctly, it’s safer to use `setState()` with a function argument to ensure we’re not reading from an outdated `state`.
Thanks for submitting a PR! Please read these instructions carefully:
- [x] Explain the **motivation** for making this change.
- [x] Provide a **test plan** demonstrating that the code is solid.
- [x] Match the **code formatting** of the rest of the codebase.
- [x] Target the `master` branch, NOT a "stable" branch.
The tutorial suggests to use `setState()` with an object argument when the new state depends on the previous state. In such situations, it’s preferable to use a function to ensure the previous state is up-to-date.
Updates documentation only, so there are no additional tests. Rendering the site.
Sign the [CLA][2], if you haven't already.
Small pull requests are much easier to review and more likely to get merged. Make sure th
Closes https://github.com/facebook/react-native/pull/13358
Differential Revision: D4852404
Pulled By: hramos
fbshipit-source-id: 834759e16bcfbd5a8de71bf0c56f2b154f3321e1
Summary:
Thanks for submitting a PR! Please read these instructions carefully:
- [x] Explain the **motivation** for making this change.
- [x] Provide a **test plan** demonstrating that the code is solid.
- [x] Match the **code formatting** of the rest of the codebase.
- [x] Target the `master` branch, NOT a "stable" branch.
I am just fixing typos in the docs.
proofreading
Sign the [CLA][2], if you haven't already.
Small pull requests are much easier to review and more likely to get merged. Make sure the PR does only one thing, otherwise please split it.
Make sure all **tests pass** on both [Travis][3] and [Circle CI][4]. PRs that break tests are unlikely to be merged.
For more info, see the ["Pull Requests"][5] section of our "Contributing" guidelines.
[1]: https://medium.com/martinkonicek/what-is-a-test-plan-8bfc840ec171#.y9lcuqqi9
[2]: https://code.facebook.com/cla
[3]: https://travis-ci.org/facebook/react-native
[4]
Closes https://github.com/facebook/react-native/pull/13382
Differential Revision: D4851786
Pulled By: javache
fbshipit-source-id: 3cb67161653681c061d2e2b4a6a8c14527b8bd9b
Summary:
**Motivation**: Website documentation for the core Apple TV support.
Closes https://github.com/facebook/react-native/pull/13278
Differential Revision: D4839904
Pulled By: hramos
fbshipit-source-id: e8b78f3601915072c0d809b05b4b5ca61828f277
Summary:
React Native Playground has been sunset, so I've replaced the examples that previously used it with examples using [Snack](http://snack.expo.io/).
The examples are directly embedded and can be edited live to see updates. The code itself is also in the docs, so we can easily update the docs in one place and we don't have to actually go to a saved app on Snack and update it there.
Run it locally, go to the `Animations` section and the `Direct Manipulation` section.
![screen shot 2017-04-03 at 6 29 51 pm](https://cloud.githubusercontent.com/assets/90494/24638271/ff3ad044-189b-11e7-845d-24b2fb612d95.png)
Open it on your phone, notice that it falls back to just showing plain code.
<img src="https://cloud.githubusercontent.com/assets/90494/24638547/203ec8fc-189e-11e7-99c8-dfabff949f8d.PNG" width="250">
- Get rid of the Expo new user experience dialog that you see when you open a Snack -- is this a dealbreaker
Closes https://github.com/facebook/react-native/pull/13285
Differential Revision: D4828011
Pulled By: hramos
fbshipit-source-id: 684ad24a14deb72abb8587ffbb726d316f126d75
Summary:
The current docs (iOS) for promises make use of the `RCT_REMAP_METHOD` macro but it's not clear about the proper usage for the macro. Specifically, it points to a selector of `resolver:rejector:` and makes it seem like `findEvents` is assumed as both the alias and method name.
This has led to some confusion (#9070) on how to use `RCT_REMAP_METHOD`.
No tests needed since this is just a small docs update.
Closes https://github.com/facebook/react-native/pull/13302
Differential Revision: D4831755
Pulled By: javache
fbshipit-source-id: e842c16ade27088eafdac7509373cdf7780f9ece
Summary:
Remove redundant `\`` mark
Thanks for submitting a PR! Please read these instructions carefully:
- [x] Explain the **motivation** for making this change.
- [x] Provide a **test plan** demonstrating that the code is solid.
- [x] Match the **code formatting** of the rest of the codebase.
- [x] Target the `master` branch, NOT a "stable" branch.
This PR fixes Documentation typo.
No need for test.
Closes https://github.com/facebook/react-native/pull/13228
Differential Revision: D4810457
Pulled By: hramos
fbshipit-source-id: 5c475a5d8b51d4a926e0fc737e2a12805e3bf70b
Summary:
After pull request #12755 it is no longer necessary to manually start the packager on Windows using `react-native start`. I've updated the documentation to reflect this change, and match the Mac OS - Android instructions (same commands used to launch a project now).
Closes https://github.com/facebook/react-native/pull/13186
Differential Revision: D4790827
Pulled By: hramos
fbshipit-source-id: 5fe5f7ed20ac4b3ee537c95a9b6d7b91fd578c41
Summary:
Taking another pass at this doc after running apps on iOS and Android devices this week. Of note, the Connecting to Dev server section on iOS seemed incomplete.
Tested steps on iOS and Android.
Tested rendering of the site on all permutations.
Closes https://github.com/facebook/react-native/pull/13143
Differential Revision: D4775026
Pulled By: hramos
fbshipit-source-id: 9b64120922a093ac646d12861d8dee98fb4e5d7d
Summary:
The wording had some grammar issues. The instructions were also not as precise as they could be.
Verified on Xcode 8.2.1.
Closes https://github.com/facebook/react-native/pull/13093
Differential Revision: D4763071
Pulled By: hramos
fbshipit-source-id: fe9da098f0e457efba4712db704692f6f4857624
Summary:
Typing "android avd" into the terminal is not supported anymore. The android command is no longer available. There are workarounds, but it involves replacing files with the older ones.
Thanks for submitting a PR! Please read these instructions carefully:
- [ ] Explain the **motivation** for making this change.
- [ ] Provide a **test plan** demonstrating that the code is solid.
- [ ] Match the **code formatting** of the rest of the codebase.
- [ ] Target the `master` branch, NOT a "stable" branch.
What existing problem does the pull request solve?
A good test plan has the exact commands you ran and their output, provides screenshots or videos if the pull request changes UI or updates the website. See [What is a Test Plan?][1] to learn more.
If you have added code that should be tested, add tests.
Sign the [CLA][2], if you haven't already.
Small pull requests are much easier to review and more likely to get merged
Closes https://github.com/facebook/react-native/pull/13096
Reviewed By: AsyncDBConnMarkedDownDBException
Differential Revision: D4762937
Pulled By: AsyncDBConnMarkedDownDBException
fbshipit-source-id: 5289402d7e6934d3493a902247a991cd1d887ec0
Summary:
I've updated the documentation that gives an example of Podfile adding a note that from React Native 0.42.0, users have to explicitly include Yoga in their Podfile.
I didn't want to modify existing `Podfile` from this documentation because they refer to `Podfile` from existing projects that do not use RN 0.42.0. So I just added a note and an example to explain how to include Yoga.
This PR is to fix the following issue: https://github.com/facebook/react-native/issues/12670
Closes https://github.com/facebook/react-native/pull/12728
Differential Revision: D4716172
Pulled By: hramos
fbshipit-source-id: 12a6e61b0d426c776a7cc2dea3ac22a50ffe56ef
Summary:
**Motivation**
I needed to do this today. It's explained in code in the repository, but not included in the actual documentation. As React Native continues to grow, this is something that will be used more and more by the community.
**Test plan (required)**
No test plan required, this is simply a documentation change to add things that are only explained in code comments currently.
Closes https://github.com/facebook/react-native/pull/12938
Differential Revision: D4709339
Pulled By: mkonicek
fbshipit-source-id: a56c7573c3fa25a4059657b95b482b641ff229ff
Summary:
Following ericvicenti request on https://github.com/facebook/react-native/issues/10188#issuecomment-282448021
Hope it helps
Thanks for submitting a pull request! Please provide enough information so that others can review your pull request:
> **Unless you are a React Native release maintainer and cherry-picking an *existing* commit into a current release, ensure your pull request is targeting the `master` React Native branch.**
Explain the **motivation** for making this change. What existing problem does the pull request solve?
Prefer **small pull requests**. These are much easier to review and more likely to get merged. Make sure the PR does only one thing, otherwise please split it.
**Test plan (required)**
Demonstrate the code is solid. Example: The exact commands you ran and their output, screenshots / videos if the pull request changes UI.
Make sure tests pass on both Travis and Circle CI.
**Code formatting**
Look around. Match the style of the rest of the codebase. See also
Closes https://github.com/facebook/react-native/pull/12578
Differential Revision: D4682076
Pulled By: mkonicek
fbshipit-source-id: 2fab5355a066eb3d8333e50f07ab3a258cbc002b
Summary:
The note is currently in "Reloading JavaScript". However I was struggling with the first step ("Accessing the In-App Developer Menu") so didn't read down to that section.
I think it makes sense to make this the very first thing the reader sees when visiting the page.
Closes https://github.com/facebook/react-native/pull/12828
Differential Revision: D4681842
Pulled By: hramos
fbshipit-source-id: 1afbec7f62a2ec97febdd05987e7fc1541d3ee28
Summary:
Updates the remaining references to Exponent to Expo, similar in spirit to b698b4ad62. Left the filename of the blog post alone so that permalinks keep working.
Closes https://github.com/facebook/react-native/pull/12776
Differential Revision: D4676911
Pulled By: hramos
fbshipit-source-id: 5b8b8413f95c984df4157e4e1634dd35a78afa29