Skip to content

Commit

Permalink
220326 sync 0.67 (#574)
Browse files Browse the repository at this point in the history
* Generate 0.67 version of the docs (facebook#2926)

* version 0.67

* Revert "version 0.67"

This reverts commit f4896ac.

* updated v0.67 docs cut

* blogpost for 0.67 (facebook#2933)

* add Lorenzo

* Facebook -> Meta

* 067 blogpost

* add highlights and truncate

* tweak

* Update website/blog/2022-01-19-version-067.md

* Update website/blog/2022-01-19-version-067.md

Co-authored-by: Eli White <github@eli-white.com>

* Move Hermes 0.10 issue callout to acknowledgements

* Link the wiki

Co-authored-by: Luna <lunaleaps@gmail.com>
Co-authored-by: Eli White <github@eli-white.com>

* blogpost: React Native - H2 2021 Recap (facebook#2937)

Co-authored-by: Luna <luwe@fb.com>

* Fix typo in H2 blog post: next year / half -> numbers (facebook#2938)

* Use numbers for the time

* Bump nanoid from 3.1.30 to 3.2.0 (facebook#2939)

Bumps [nanoid](https://github.com/ai/nanoid) from 3.1.30 to 3.2.0.
- [Release notes](https://github.com/ai/nanoid/releases)
- [Changelog](https://github.com/ai/nanoid/blob/main/CHANGELOG.md)
- [Commits](ai/nanoid@3.1.30...3.2.0)

---
updated-dependencies:
- dependency-name: nanoid
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* remove text in running on device (facebook#2943)

* remove text on docs running-on-device (facebook#2944)

* Fix small grammatical error (facebook#2942)

* update copyright on website (facebook#2940)

Co-authored-by: luism3861 <Eduardo_Medina@fragua.com.mx>

* Fix flexShrink default value in Layout Props docs (facebook#2945)

* update website font, misc UI tweaks (facebook#2947)

* Fix the guide to the deprecated OpenJDK installation command. (facebook#2817)

* Add function based components example for Flat list optimisation (facebook#2955)

* Update typo in render-pipeline.md (facebook#2951)

* Update typo in tutorial.md (facebook#2946)

* Add an extra command to the troubleshooting guide for typescript template (facebook#2954)

Co-authored-by: Nicola Corti <corti.nico@gmail.com>

* (Image) Fix documentation for onLoad event. (facebook#2964)

* - (Image) Fix documentation for onLoad event.

* - (Image) Prettier.

* Update image.md (facebook#2965)

* Bump follow-redirects from 1.14.7 to 1.14.8 (facebook#2966)

Bumps [follow-redirects](https://github.com/follow-redirects/follow-redirects) from 1.14.7 to 1.14.8.
- [Release notes](https://github.com/follow-redirects/follow-redirects/releases)
- [Commits](follow-redirects/follow-redirects@v1.14.7...v1.14.8)

---
updated-dependencies:
- dependency-name: follow-redirects
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Fixed a typo in Linking page. (facebook#2968)

AndroidManifext.xml should be AndroidManifest.xml

* 📚 Guide: Getting Started with The New Architecture (a.k.a. the Playbook) (facebook#2879)

* Initial Draft of the New Architecture Playbook

* Fix c++ codeblocks not rendering correctly

* Fix Android.mk containing wrong wildcards

* Remove Markdown exports artifacts

* Fix missing parenthesis in section header

* Renamed section header as it was incomplete

* Removed canCreateTurboModule as it was not used

* Fix indententation and add imports to MyComponentsRegistry.java

* Add missing import for MyComponentsRegistry.h

* Fix the broken table

* s/two/three arguments

* Fix comments inside podfile

* split The New Architecture guide into few pages (facebook#2882)

* Fix wrong import for ./RNTMyNativeViewNativeComponent

* Fix import for codegenNativeCommands

* Add a banner for TypeScript support

* Do not sound prescriptive with 'you will be using flow'

* React concurrent mode -> React 18

* Add a banner on homepage about the number of manual steps

* Fix typo on Enabling TurboModule section title

Co-authored-by: Johny Urgiles <jurgiles@users.noreply.github.com>

* code formatting, admonitions and small tweaks (facebook#2922)

Co-authored-by: Nicola Corti <corti.nico@gmail.com>

* Use descriptive component names and fix use of ref (facebook#2935)

* Use descriptive component names and fix use of ref

* Remove ambiguity from migrating .measure* example

* Playbook => Guide

* Use implicit dependency substitution for the Gradle Plugin

* Specify reactRoot and codegenDir in the App setup

* Add a patch for configureNdkBuild not depending on preBuild

* Add the getTurboModule method

* Copy the warning banner on all the pages

* Update pod install to specify RCT_NEW_ARCH_ENABLED

* HermesExecutorFactory header lives inside reacthermes/ and not React/

* Fix broken jsExecutorFactoryForBridge iOS

* Bump used nightly version to 0.0.0-20220201-2008-79975d146

* Clarify the react-native-codegen version to use

* Suggest to use :app:externalNativeBuildDebug instead of Release

* Put LOCAL_SHARED_LIBRARIES on Android.mk on separate lines

* Update docs/new-architecture-app-renderer-ios.md

Co-authored-by: Bartosz Kaszubowski <gosimek@gmail.com>

* Remove unnecessary duplicated `pod install`

Co-authored-by: Bartosz Kaszubowski <gosimek@gmail.com>

* Setup a New Architecture Troubleshooting page

* Fix lint failures on troubleshooting section

Co-authored-by: Bartosz Kaszubowski <gosimek@gmail.com>
Co-authored-by: Johny Urgiles <jurgiles@users.noreply.github.com>
Co-authored-by: Samuel Susla <samuel.susla@gmail.com>

* fix(ios): update Fabric in Podfile instructions (facebook#2973)

* fix(ios): update Fabric in Podfile instructions

* move fabric_enabled comment closer to the property

* 📚 Add instruction for M1 users to work with Cocoapods (facebook#2974)

* Update Android SDK version to 30 (facebook#2975)

* Adding Explain Like I'm 5 video to the home page (facebook#2971)

* Adding ELI5 video to the home page

* Remove unused VideoContainer function

* Combining Video and Talk sections

Co-authored-by: Dmitry Vinnik <dvinnik@fb.com>

* Updated expired link in docs/security (facebook#2972)

* Updated link colors to meet WCAG color contrast guidelines. (facebook#2976)

* Bump prismjs from 1.25.0 to 1.27.0 (facebook#2978)

Bumps [prismjs](https://github.com/PrismJS/prism) from 1.25.0 to 1.27.0.
- [Release notes](https://github.com/PrismJS/prism/releases)
- [Changelog](https://github.com/PrismJS/prism/blob/master/CHANGELOG.md)
- [Commits](PrismJS/prism@v1.25.0...v1.27.0)

---
updated-dependencies:
- dependency-name: prismjs
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* fix: spelling error mudule -> module (facebook#2979)

* Update migration guide feedback link to the working group (facebook#2983)

* Add TOC sections for the 'Render, Commit, and Mount' page (facebook#2985)

* Adding Social Banner in Support of Ukraine  (facebook#2986)

* fix layout resizing when page includes wide code block (facebook#2980)

* docs: Moving to use Announcement Banner for the Support Ukraine Initiative (facebook#2988)

* Fix deeplink to react-host-components-or-host-components in Glossary (facebook#2992)

* Clarify intended audience for architecture overview (facebook#2995)

* changed android_hyphenation for 0.67+ (facebook#2982)

* Add missing `normal` enum for Hyphenation (facebook#3002)

* add ToC headers for phases on Render Pipeline page (facebook#2997)

* Moving Release Wiki to react-native-website (facebook#2961)

Co-authored-by: Simek <gosimek@gmail.com>

* Update discrete update threading model diagram (facebook#2999)

* move Fabric warning to partial, use admonition (facebook#2998)

* Clarify the Configure Codegen in your Gradle File section (facebook#2993)

Co-authored-by: Bartosz Kaszubowski <gosimek@gmail.com>

* Unversion Architecture docs (facebook#3000)

Co-authored-by: Bartosz Kaszubowski <gosimek@gmail.com>

* refactor(getting-started): path to sdk binaries (facebook#2991)

* bump lint stack, include `website` files in check (facebook#3004)

* Add table of contents and encourage people to leave feedback in working group in Architecture Overview intro (facebook#2996)

* Clarify intended audience for architecture overview
* Fix broken links

* Blogpost: An update on the New Architecture Rollout (facebook#3009)

Co-authored-by: Bartosz Kaszubowski <gosimek@gmail.com>
Co-authored-by: Lorenzo Sciandra <notkelset@kelset.dev>

* Use bundler to pod install (facebook#3011)

* Use placeholders instead of hardcoded strings (facebook#3015)

* Use @flow annotation and fix syntax (facebook#3016)

* Improve documentation about JS Specs (facebook#3017)

* Use more specific dependency React-Core (facebook#3020)

* distinguish windows from mac keytool instructions (facebook#3019)

Co-authored-by: Bartosz Kaszubowski <gosimek@gmail.com>

* spelling fix (facebook#3021)

* Rename _bridge into bridge (facebook#3013)

* Use empty dicts instead of nil (facebook#3014)

* 📚 Rename JSCExecutorFactory into HermesExecutorFactory (facebook#3012)

* fix codegenNativeCommands section example (facebook#3024)

Co-authored-by: Piotr Trocki <piotr@trocki.com>

* [sync-api] Replace deprecated String.prototype.substr() (facebook#3025)

* Add kotlin sample code in "Integration with an Android Fragment" documentation (facebook#2977)

Co-authored-by: Andrei Shikov <andreiishikov@gmail.com>
Co-authored-by: Nicola Corti <corti.nico@gmail.com>
Co-authored-by: Simek <gosimek@gmail.com>

* small custom CSS fixes and tweaks (facebook#3026)

* Update references from Java to Java/Kotlin in the body of the article (facebook#3028)

Co-authored-by: Bartosz Kaszubowski <gosimek@gmail.com>

* update project structure in Readme (facebook#3031)

Co-authored-by: Lorenzo Sciandra <notkelset@kelset.dev>
Co-authored-by: Luna <lunaleaps@gmail.com>
Co-authored-by: Eli White <github@eli-white.com>
Co-authored-by: Nicola Corti <ncor@fb.com>
Co-authored-by: Luna <luwe@fb.com>
Co-authored-by: Sota <5866096+sota000@users.noreply.github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Luis Medina Huerta <luism3861@gmail.com>
Co-authored-by: Palash Shrivastava <35087196+BattleOfPlassey@users.noreply.github.com>
Co-authored-by: Michael Evans <michaelrevans@live.co.uk>
Co-authored-by: luism3861 <Eduardo_Medina@fragua.com.mx>
Co-authored-by: jzxchiang1 <15524484+jzxchiang1@users.noreply.github.com>
Co-authored-by: Bartosz Kaszubowski <gosimek@gmail.com>
Co-authored-by: 1natsu <1natsu172@users.noreply.github.com>
Co-authored-by: DIBYAJYOTI MISHRA <dibyajyotimishra14@gmail.com>
Co-authored-by: Jiovanna Manriquez <jiovannamanriquez@gmail.com>
Co-authored-by: markbell2410 <24226636+markbell2410@users.noreply.github.com>
Co-authored-by: Nicola Corti <corti.nico@gmail.com>
Co-authored-by: Erick Maeda Lopes <erick.maeda26@gmail.com>
Co-authored-by: Kavanaugh Latiolais <kav@pelo.tech>
Co-authored-by: hj <jiehecd@gmail.com>
Co-authored-by: Johny Urgiles <jurgiles@users.noreply.github.com>
Co-authored-by: Samuel Susla <samuel.susla@gmail.com>
Co-authored-by: Tommy Nguyen <4123478+tido64@users.noreply.github.com>
Co-authored-by: Riccardo <riccardo.cipolleschi@gmail.com>
Co-authored-by: Kid <44045911+kidonng@users.noreply.github.com>
Co-authored-by: Dmitry Vinnik <dmitryvinn@users.noreply.github.com>
Co-authored-by: Dmitry Vinnik <dvinnik@fb.com>
Co-authored-by: Vishwa Gaurav <81325730+VishwaGauravIn@users.noreply.github.com>
Co-authored-by: blavalla <blavalla@gmail.com>
Co-authored-by: RayKay91 <61206305+RayKay91@users.noreply.github.com>
Co-authored-by: zegermouw <zegermouw@gmail.com>
Co-authored-by: Nicolas <nicolashortaadam@gmail.com>
Co-authored-by: Sébastien Lorber <slorber@users.noreply.github.com>
Co-authored-by: Henry Hobhouse <henryhobhouse@gmail.com>
Co-authored-by: Samuel Susla <samuelsusla@fb.com>
Co-authored-by: Danilo Bürger <info@danilobuerger.de>
Co-authored-by: Riccardo <cipolleschi@fb.com>
Co-authored-by: Fernando Cervera <86963649+fernandocervera-abi@users.noreply.github.com>
Co-authored-by: Rajesh Sharma <broncha@rajesharma.com>
Co-authored-by: troZee <12766071+troZee@users.noreply.github.com>
Co-authored-by: Piotr Trocki <piotr@trocki.com>
Co-authored-by: CommanderRoot <CommanderRoot@users.noreply.github.com>
Co-authored-by: David Vacca <515103+mdvacca@users.noreply.github.com>
Co-authored-by: Andrei Shikov <andreiishikov@gmail.com>
  • Loading branch information
Show file tree
Hide file tree
Showing 277 changed files with 40,948 additions and 1,132 deletions.
8 changes: 7 additions & 1 deletion .eslintrc.json
Original file line number Diff line number Diff line change
@@ -1,14 +1,20 @@
{
"plugins": ["prettier"],
"extends": ["plugin:mdx/recommended", "plugin:prettier/recommended"],
"extends": ["plugin:prettier/recommended"],
"overrides": [
{
"files": ["*.yaml", "*.yml"],
"plugins": ["yaml"],
"extends": ["plugin:yaml/recommended"]
},
{
"files": ["*.md", "*.mdx"],
"extends": ["plugin:mdx/recommended"]
}
],
"parserOptions": {
"sourceType": "module",
"ecmaVersion": "latest",
"ecmaFeatures": {
"jsx": true,
"modules": true
Expand Down
4 changes: 2 additions & 2 deletions .prettierrc
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
"options": {
"arrowParens": "avoid",
"bracketSpacing": false,
"jsxBracketSameLine": true,
"bracketSameLine": true,
"printWidth": 80,
"singleQuote": true,
"trailingComma": "es5",
Expand All @@ -17,7 +17,7 @@
"options": {
"arrowParens": "always",
"bracketSpacing": true,
"jsxBracketSameLine": true,
"bracketSameLine": true,
"printWidth": 66,
"proseWrap": "preserve",
"singleQuote": true,
Expand Down
45 changes: 30 additions & 15 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -44,9 +44,11 @@ If you are looking for the source code of the [React Native Archive website](htt

## 📖 Overview

If you would like to **_contribute an edit or addition to the docs,_** read through our [style guide](STYLEGUIDE.md) before you write anything. All our content is generated from markdown files you can find in the `docs` directory.
If you would like to **_contribute an edit or addition to the docs,_** read through our [style guide](STYLEGUIDE.md) before you write anything.
Almost all our content is generated from markdown files you can find in the `docs`, `website/architecure` and `website/contibuting` directories.

**_To edit the internals of how the site is built,_** you may want to get familiarized with how the site is built. The React Native website is a static site generated using [Docusaurus](https://v2.docusaurus.io). The website configuration can be found in the `website` directory. Visit the Docusaurus website to learn more about all the available configuration options.
**_To edit the internals of how the site is built,_** you may want to get familiarized with how the site is built. The React Native website is a static site generated using [Docusaurus](https://docusaurus.io/).
The website configuration can be found in the `website` directory. Visit the Docusaurus website to learn more about all the available configuration options.

### Directory Structure

Expand All @@ -55,52 +57,65 @@ The following is a high-level overview of relevant files and folders.
```
react-native-website/
├── docs/
│ ├── accessibility.md
│ ├── [BASE VERSIONED DOC FILES]
│ └── ...
└── website/
├── architecture/
│ ├── [ARCHITECTURE DOC FILES]
│ └── ...
├── blog/
│ ├── 2015-03-26-react-native-bringing-modern-web-techniques-to-mobile.md
│ ├── [BLOG POSTS]
│ └── ...
├── contributing/
│ ├── [CONTRIBUTING DOC FILES]
│ └── ...
├── core/
├── pages/
│ └── en/
├── [CUSTOM COMPONENTS]
│ └── ...
├── src/
│ ├── css/
│ │ ├── customTheme.scss
│ │ ├── [CUSTOM STYLES]
│ │ └── ...
│ ├── pages/
│ │ ├── index.js
│ │ ├── [STATIC PAGES]
│ │ └── ...
│ └── theme/
│ │ ├── [SWIZZLED COMPONENTS]
│ │ └── ...
├── static/
│ ├── blog/
│ │ └── assets/
│ ├── docs/
│ │ └── assets/
│ ├── img/
│ └── js/
│ └── img/
├── versioned_docs/
│ ├── version-0.60/
│ ├── [GENERATED VERSIONED DOC FILES]
│ └── ...
├── versioned_sidebars/
│ ├── version-0.60-sidebars.json
│ ├── [GENERATED VERSIONED SIDEBARS]
│ └── ...
├── docusaurus.config.js
├── package.json
├── showcase.json
├── sidebars.json
├── sidebarsArchitecture.json
├── sidebarsContributing.json
└── versions.json
```

### Documentation sources

As mentioned above, the `docs` folder contains the source files for all of the docs in the React Native website. In most cases, you will want to edit the files within this directory. If you're adding a new doc or you need to alter the order the docs appear in the sidebar, take a look at the `sidebars.json` file in the `website` directory. The sidebars file contains a list of document ids that should match those defined in the header metadata (aka frontmatter) of the docs markdown files.
As mentioned above, the `docs` folder contains the source files for docs from "Guides", "Components" and "APIs" tabs on the React Native website (versioned docs).
The doc files for the "Architecture" and "Contribution" tabs are located inside `website` in the respective directories (unversioned/static docs).
In most cases, you will only want to edit the files within those directories.

If you're adding a new doc or you need to alter the order the docs appear in the sidebar, take a look at the `sidebars.json`, `sidebarsArchitecture.json` and `sidebarsContributing.json` files in the `website` directory. The sidebar files contains a list of document ids that should match those defined in the header metadata (aka frontmatter) of the docs markdown files.

### Versioned docs

The React Native website is versioned to allow users to go back and see the API reference docs for any given release. A new version of the website is generally generated whenever there is a new React Native release. When this happens, any changes made to the `docs` and `website/sidebars.json` files will be copied over to the corresponding location within `website/versioned_docs` and `website/versioned_sidebars`.
Part of the React Native website is versioned to allow users to go back and see the Guides or API reference documentation for any given release. A new version of the website is generally generated whenever there is a new React Native release. When this happens, any changes made to the `docs` and `website/sidebars.json` files will be copied over to the corresponding location within `website/versioned_docs` and `website/versioned_sidebars`.

> **_Note:_** Do not edit the auto-generated files within `versioned_docs` or `versioned_sidebars` unless you are sure it is necessary. Edits made to older versions will not be propagated to newer versions of the docs.
> **_Note:_** Do not edit the auto-generated files within `versioned_docs` or `versioned_sidebars` unless you are sure it is necessary. Edits made to older versions will not be propagated to newer versions of the versioned docs.
Docusaurus keeps track of the list of versions for the site in the `website/versions.json` file. The ordering of the versions in this file should be in reverse chronological order.

Expand Down
22 changes: 10 additions & 12 deletions docs/_getting-started-linux-android.md
Original file line number Diff line number Diff line change
Expand Up @@ -32,38 +32,36 @@ Once setup has finalized and you're presented with the Welcome screen, proceed t

<h4>2. Install the Android SDK</h4>

Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the `Android 10 (Q)` SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the `Android 11 (R)` SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.

To do that, open Android Studio, click on "Configure" button and select "SDK Manager".

> The SDK Manager can also be found within the Android Studio "Preferences" dialog, under **Appearance & Behavior****System Settings****Android SDK**.
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the `Android 10 (Q)` entry, then make sure the following items are checked:
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the `Android 11 (R)` entry, then make sure the following items are checked:

- `Android SDK Platform 29`
- `Android SDK Platform 30`
- `Intel x86 Atom_64 System Image` or `Google APIs Intel x86 Atom System Image`

Next, select the "SDK Tools" tab and check the box next to "Show Package Details" here as well. Look for and expand the "Android SDK Build-Tools" entry, then make sure that `29.0.2` is selected.
Next, select the "SDK Tools" tab and check the box next to "Show Package Details" here as well. Look for and expand the "Android SDK Build-Tools" entry, then make sure that `30.0.2` is selected.

Finally, click "Apply" to download and install the Android SDK and related build tools.

<h4>3. Configure the ANDROID_HOME environment variable</h4>
<h4>3. Configure the ANDROID_SDK_ROOT environment variable</h4>

The React Native tools require some environment variables to be set up in order to build apps with native code.

Add the following lines to your `$HOME/.bash_profile` or `$HOME/.bashrc` (if you are using `zsh` then `~/.zprofile` or `~/.zshrc`) config file:

```shell
export ANDROID_HOME=$HOME/Android/Sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
export ANDROID_SDK_ROOT=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_SDK_ROOT/emulator
export PATH=$PATH:$ANDROID_SDK_ROOT/platform-tools
```

> `.bash_profile` is specific to `bash`. If you're using another shell, you will need to edit the appropriate shell-specific config file.
Type `source $HOME/.bash_profile` for `bash` or `source $HOME/.zprofile` to load the config into your current shell. Verify that ANDROID_HOME has been set by running `echo $ANDROID_HOME` and the appropriate directories have been added to your path by running `echo $PATH`.
Type `source $HOME/.bash_profile` for `bash` or `source $HOME/.zprofile` to load the config into your current shell. Verify that ANDROID_SDK_ROOT has been set by running `echo $ANDROID_SDK_ROOT` and the appropriate directories have been added to your path by running `echo $PATH`.

> Please make sure you use the correct Android SDK path. You can find the actual location of the SDK in the Android Studio "Preferences" dialog, under **Appearance & Behavior****System Settings****Android SDK**.
Expand Down Expand Up @@ -119,7 +117,7 @@ If you use Android Studio to open `./AwesomeProject/android`, you can see the li

![Android Studio AVD Manager](/docs/assets/GettingStartedAndroidStudioAVD.png)

If you have recently installed Android Studio, you will likely need to [create a new AVD](https://developer.android.com/studio/run/managing-avds.html). Select "Create Virtual Device...", then pick any Phone from the list and click "Next", then select the **Q** API Level 29 image.
If you have recently installed Android Studio, you will likely need to [create a new AVD](https://developer.android.com/studio/run/managing-avds.html). Select "Create Virtual Device...", then pick any Phone from the list and click "Next", then select the **R** API Level 30 image.

> We recommend configuring [VM acceleration](https://developer.android.com/studio/run/emulator-acceleration.html#vm-linux) on your system to improve performance. Once you've followed those instructions, go back to the AVD Manager.
Expand Down
34 changes: 13 additions & 21 deletions docs/_getting-started-macos-android.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,11 @@ If you have already installed Node on your system, make sure it is Node 12 or ne

<h3>Java Development Kit</h3>

We recommend installing JDK using [Homebrew](http://brew.sh/). Run the following commands in a Terminal after installing Homebrew:
We recommend installing the OpenJDK distribution called Temurin using [Homebrew](http://brew.sh/). Run the following commands in a Terminal after installing Homebrew:

```shell
brew install --cask adoptopenjdk/openjdk/adoptopenjdk11
brew tap homebrew/cask-versions
brew install --cask temurin11
```

If you have already installed JDK on your system, make sure it is JDK 11 or newer.
Expand All @@ -47,47 +48,38 @@ Once setup has finalized and you're presented with the Welcome screen, proceed t

<h4>2. Install the Android SDK</h4>

Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the `Android 10 (Q)` SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the `Android 11 (R)` SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.

To do that, open Android Studio, click on "Configure" button and select "SDK Manager".

![Android Studio Welcome](/docs/assets/GettingStartedAndroidStudioWelcomeMacOS.png)

> The SDK Manager can also be found within the Android Studio "Preferences" dialog, under **Appearance & Behavior****System Settings****Android SDK**.
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the `Android 10 (Q)` entry, then make sure the following items are checked:
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the `Android 11 (R)` entry, then make sure the following items are checked:

- `Android SDK Platform 29`
- `Android SDK Platform 30`
- `Intel x86 Atom_64 System Image` or `Google APIs Intel x86 Atom System Image`

Next, select the "SDK Tools" tab and check the box next to "Show Package Details" here as well. Look for and expand the "Android SDK Build-Tools" entry, then make sure that `29.0.2` is selected and check the "Android SDK Command-line Tools (latest)".
Next, select the "SDK Tools" tab and check the box next to "Show Package Details" here as well. Look for and expand the "Android SDK Build-Tools" entry, then make sure that `30.0.2` is selected.

Finally, click "Apply" to download and install the Android SDK and related build tools.

You can also run the following command after setting ANDROID_HOME.

```shell
sdkmanager "platforms;android-29" "system-images;android-29;default;x86_64" "system-images;android-29;google_apis;x86"
sdkmanager "cmdline-tools;latest" "build-tools;29.0.2"
```

<h4>3. Configure the ANDROID_HOME environment variable</h4>
<h4>3. Configure the ANDROID_SDK_ROOT environment variable</h4>

The React Native tools require some environment variables to be set up in order to build apps with native code.

Add the following lines to your `$HOME/.bash_profile` or `$HOME/.bashrc` (if you are using `zsh` then `~/.zprofile` or `~/.zshrc`) config file:

```shell
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
export ANDROID_SDK_ROOT=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_SDK_ROOT/emulator
export PATH=$PATH:$ANDROID_SDK_ROOT/platform-tools
```

> `.bash_profile` is specific to `bash`. If you're using another shell, you will need to edit the appropriate shell-specific config file.
Type `source $HOME/.bash_profile` for `bash` or `source $HOME/.zprofile` to load the config into your current shell. Verify that ANDROID_HOME has been set by running `echo $ANDROID_HOME` and the appropriate directories have been added to your path by running `echo $PATH`.
Type `source $HOME/.bash_profile` for `bash` or `source $HOME/.zprofile` to load the config into your current shell. Verify that ANDROID_SDK_ROOT has been set by running `echo $ANDROID_SDK_ROOT` and the appropriate directories have been added to your path by running `echo $PATH`.

> Please make sure you use the correct Android SDK path. You can find the actual location of the SDK in the Android Studio "Preferences" dialog, under **Appearance & Behavior****System Settings****Android SDK**.
Expand Down Expand Up @@ -137,7 +129,7 @@ If you use Android Studio to open `./AwesomeProject/android`, you can see the li

![Android Studio AVD Manager](/docs/assets/GettingStartedAndroidStudioAVD.png)

If you have recently installed Android Studio, you will likely need to [create a new AVD](https://developer.android.com/studio/run/managing-avds.html). Select "Create Virtual Device...", then pick any Phone from the list and click "Next", then select the **Q** API Level 29 image.
If you have recently installed Android Studio, you will likely need to [create a new AVD](https://developer.android.com/studio/run/managing-avds.html). Select "Create Virtual Device...", then pick any Phone from the list and click "Next", then select the **R** API Level 30 image.

Click "Next" then "Finish" to create your AVD. At this point you should be able to click on the green triangle button next to your AVD to launch it, then proceed to the next step.

Expand Down
4 changes: 4 additions & 0 deletions docs/_getting-started-macos-ios.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import M1Cocoapods from './\_markdown-m1-cocoapods.mdx';

## Installing dependencies

You will need Node, Watchman, the React Native command line interface, Xcode and CocoaPods.
Expand Down Expand Up @@ -45,6 +47,8 @@ sudo gem install cocoapods

For more information, please visit [CocoaPods Getting Started guide](https://guides.cocoapods.org/using/getting-started.html).

<M1Cocoapods />

### React Native Command Line Interface

React Native has a built-in command line interface. Rather than install and manage a specific version of the CLI globally, we recommend you access the current version at runtime using `npx`, which ships with Node.js. With `npx react-native <command>`, the current stable version of the CLI will be downloaded and executed at the time the command is run.
Expand Down
Loading

0 comments on commit d47b150

Please sign in to comment.