Summary:
Fixes#14566, as suggested by hramos. Only change from our convo is that I set the height to 180 in this pull request instead of 240. This to respect the aspect ratio of the source image.
- run website, visit in browser, verify that second example code section renders correctly
- copy and paste example code of second example into the App.js of a freshly created react native app
- prepend "export default" to line 4 of the pasted code
- run the app for ios or android (npm start ios)
- verify that the image of that terrible high-five actually renders in the app now
Closes https://github.com/facebook/react-native/pull/14571
Differential Revision: D5330093
Pulled By: hramos
fbshipit-source-id: a0afcd16d07ac25080af41f9619df0703f11b152
Summary:
Finally, a place where `Button` is properly introduced. This is based on the old Handling Touches guide, which has been simplified (with some content moved over to the scroll views tutorial).
I've also updated the ordering of the guides into something that makes more sense to someone just getting started with React Native.
Closes https://github.com/facebook/react-native/pull/14371
Differential Revision: D5201127
Pulled By: hramos
fbshipit-source-id: 819192e2db9febb8a315f51693dae557752b6002
Summary:
The current website defaults to using JavaScript for any code block, regardless of language tag. This PR adds syntax highlighting support by passing the necessary language prop and by adding any missing languages to Marked.js.
Depends on #14212, #14065
Closes https://github.com/facebook/react-native/pull/14215
Differential Revision: D5149897
Pulled By: hramos
fbshipit-source-id: 95a817af2168d5743c75dd1ac030d399a68fb93c
Summary:
Restored the version lag caveat in the Getting Started, and updated the Upgrading guide to account for CRNA.
Additionally, updated the release versions page to account for the new release cycle (e.g. release candidates are encouraged).
Closes https://github.com/facebook/react-native/pull/14112
Differential Revision: D5112224
Pulled By: hramos
fbshipit-source-id: d544c5178484c27f1ed6dee3479bcd94e5e81982
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.


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:
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:
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.

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:
Doing some cleanup in preparation for CRNA.
Recommend `FlatList` and React Navigation for perf.
Tag docs that may only apply to apps ejected from CRNA. Currently has no effect.
Closes https://github.com/facebook/react-native/pull/12692
Differential Revision: D4654077
Pulled By: hramos
fbshipit-source-id: 1245d80d66e37d9dca9e9daf23e8b93c65cd1bf7
Summary:
I am starting fresh on a new Mac and took another stab at the instructions.
- Java SDK 7 seems to work just fine.
- Adjusted Custom Android Studio installation instructions to use bare minimum required.
- Updated AVD configuration instructions with necessary changes to run AVD the first time.
- Added note on using real devices.
- Removed notes warning against use of API Level 23, these do not belong on a Getting Started guide.
- Added step to install Xcode Command Line Tools.
- Use `.profile` over `.bashrc` as the latter is shell-specific and is not loaded on login shells (e.g. new Terminal windows). `.profile` will work on bash, however, which is the default macOS shell.
- Added screenshots.
Went through steps for setting up RN for iOS as well as Android on a new Mac. Ended with apps running on the iOS Simulator and a AVD.
Generated website and verified instructions rendered correctly for each of the OS/device permutations.
Closes https://github.com/facebook/react-native/pull/12272
Differential Revision: D4637737
Pulled By: hramos
fbshipit-source-id: 5d322e4d55dbabc70f70471622a2f379ac6230cb
Summary:
The showcase is displayed in the homepage as well as in a standalone showcase page. The source data for these two pages is embedded in each page, resulting in repetition of data across both.
This PR splits out all of the showcase data to its own file, which is then loaded into the Metadata component during website generation.
`cd website && npm start`, then verified index and showcase loaded successfully
`cd website && node server/generate.js`, confirmed script runs successfully
Closes https://github.com/facebook/react-native/pull/12626
Differential Revision: D4632036
Pulled By: hramos
fbshipit-source-id: 2d1ad890e78e457205179e36c3ef04ffec354ad9
Summary:
We migrated everyone on Product Pains over to our new service, Canny. We also moved every product's feedback to a product-specific subdomain (eg. https://react-native.canny.io/feature-requests).
This PR updates every Product Pains URL over to its new Canny version.
Changes only affect docs, blog posts, and bot responses - not the React Native library itself.
**Test plan**
I visited https://react-native.canny.io/feature-requests. Since there are no code changes this seems sufficient but let me know if I need to run the blog website or something.
Closes https://github.com/facebook/react-native/pull/12429
Differential Revision: D4581492
Pulled By: hramos
fbshipit-source-id: 7d124ab7ed9228d47f1bc4417d8992f15ff17f01
Summary:
After taking a look at the existing animation docs, I found that most of the documentation on using `Animated` was spread out throughout the Animations guide and the `Animated` API reference, without any particular structure in place.
This PR aims to clean up the API reference, focusing on documenting all the provided methods exhaustively, and deferring to the Animations guide for long form examples and supporting content.
The `Easing` module is referred to at various points in the API reference, so I decided to clean up this doc as well. easings.net provides some handy visualizations that should make it easier for the reader to understand what sort of easing curve each method provides.
The site was built locally, and I verified all three documents render correctly.

Closes https://github.com/facebook/react-native/pull/12410
Differential Revision: D4581314
Pulled By: hramos
fbshipit-source-id: 27c0bce2afac8f084311b9d6113a2641133b42e5
Summary:
Adding Flare (by GoDaddy) app to the Showcase page.
Flare is a social network that connects entrepreneurs to fellow entrepreneurs, potential consumers, investors and experts and creates community around new ideas.
Flare was featured both in the AppStore and GooglePlay in 2016
Closes https://github.com/facebook/react-native/pull/12266
Differential Revision: D4538186
Pulled By: hramos
fbshipit-source-id: 09d1b2c0004e249631805625af790a2bfd745df8
Summary:
Adding Causr app to the showcase.
It is written entirely in React Native.
Closes https://github.com/facebook/react-native/pull/12105
Differential Revision: D4482167
Pulled By: mkonicek
fbshipit-source-id: 560c9c59c899a291b6e5585ea8e511a66464d7d3
Summary:
Updated the showcase list to include the app store link to Yeti Smart Home example.
Thank you.
Closes https://github.com/facebook/react-native/pull/12032
Differential Revision: D4450540
Pulled By: hramos
fbshipit-source-id: c5561eb19f9702dbf490e7379109b41cd6d578b8
Summary:
add a Tencent education app 腾讯课堂 , which is a hybrid app , It's index page use ReactNative
Closes https://github.com/facebook/react-native/pull/10985
Differential Revision: D4381877
Pulled By: hramos
fbshipit-source-id: 7f524b8993844184ef2816a14cde188608fe5d30
Summary:
Adding Yeti Smart home to the showcase list
Closes https://github.com/facebook/react-native/pull/11880
Differential Revision: D4438886
Pulled By: hramos
fbshipit-source-id: db43923b46a0f3092d70aaf56f0e7ff94068dd50
Summary:
Adding a link to the Convoy Driver Android app to the showcase
Closes https://github.com/facebook/react-native/pull/11830
Differential Revision: D4427024
Pulled By: hramos
fbshipit-source-id: 641ed9c4dce3b69d141a9328f41ce04ea1cd049c
Summary:
Delivery.com is a well known local delivery app that heavily uses React Native.
Want to get Delivery.com iOS and Android apps featured!
Closes https://github.com/facebook/react-native/pull/11752
Differential Revision: D4388844
Pulled By: hramos
fbshipit-source-id: 9e5915d357be445af4f3a92c59791586651d3405
Summary:
- Use the same format when listing apps in a language other than English.
- Remove app (Calor) that is not actually available in the App Store.
- Remove subtitles from app names.
Closes https://github.com/facebook/react-native/pull/11551
Differential Revision: D4364185
Pulled By: hramos
fbshipit-source-id: 98901e60b5d81a53aad0651be46f195a33102071