Skip to content

Commit

Permalink
220906 sync 0.70 (#642)
Browse files Browse the repository at this point in the history
* Add a few Microsoft apps to the showcase (facebook#3203)

* fix artsy icon

* add microsoft office mobile

* add outlook mobile

* add teams

* add xbox

* remove placeholder link

* Correct minor mistake in native-components-android.md (facebook#3210)

* Update fast-refresh.md (facebook#3208)

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

* Fixed Artsy logo and infoLink of oculus in webiste/showcase (facebook#3199)

* Wrap "Android SDK Build-Tools" with backticks (facebook#3206)

* Update keyboardavoidingview.md (facebook#3202)

* Update debugging.md (facebook#3209)

* Add the blogpost for Hermes as the Default engine (facebook#3212)

* Add the blogpost for Hermes as the Default engine

* Update website/blog/2022-07-08-hermes-as-the-default.md

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

* Update website/blog/2022-07-08-hermes-as-the-default.md

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

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

* Update iOS data in Hermes default blog post (facebook#3216)

* Update the contributing section docs (facebook#3221)

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

* Bump terser from 5.12.1 to 5.14.2 (facebook#3219)

Bumps [terser](https://github.com/terser/terser) from 5.12.1 to 5.14.2.
- [Release notes](https://github.com/terser/terser/releases)
- [Changelog](https://github.com/terser/terser/blob/master/CHANGELOG.md)
- [Commits](https://github.com/terser/terser/commits)

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

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

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

* docs: add build tools to Table of Contents (facebook#3228)

* Update build-speed.md (facebook#3223)

Removed duplicated sentence from docs

* Remove Uber Eats from showcase (facebook#3229)

* docs: add two sections to the New Architecture (facebook#3230)

* Note on connecting to React Native simulator. (facebook#3214)

Co-authored-by: LeoTM <1881059+leotm@users.noreply.github.com>
Co-authored-by: Nicola Corti <corti.nico@gmail.com>

* Fix a couple of problems on the release runbook (facebook#3222)

* Improving UX: replace videos and links with SnackPlayers, update examples (facebook#3231)

* Fix extra whitespace on debugging.md (facebook#3233)

* Add more info to Prerequisites for Libraries guide (facebook#3238)

* Add spaces in the example

* Add section about codegen types

* Correct section title

* Add information about requireNativeComponent

* [Docs] iOS Simulator version & UDID (facebook#3225)

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

* Add retrospective as a copilot responsibility (facebook#3242)

* update release related docs page (facebook#3240)

* update crew composition and remove testers/supporters

* add note about testing async

* Update website/contributing/release-roles-responsibilites.md

Co-authored-by: Riccardo <riccardo.cipolleschi@gmail.com>

* Update website/contributing/release-roles-responsibilites.md

Co-authored-by: Riccardo <riccardo.cipolleschi@gmail.com>

* refactor note into a snipper

* Update website/contributing/release-roles-responsibilites.md

Co-authored-by: Marek Fořt <marekfort@me.com>

* yarnlock change?

* clean up document based on feedback

* more words at the start

Co-authored-by: Riccardo <riccardo.cipolleschi@gmail.com>
Co-authored-by: Marek Fořt <marekfort@me.com>

* Update image.md (facebook#2850)

This is missing, but this is an important information. Imagine a view sized 100x150 and an image sized 200x300. The old description could be interpreted in a way, that the image doesn't scale at all!

* Fix lint

* chore: Specify return vs resolve (facebook#3236)

When dealing with functions which return Promises, it's helpful to be clear about whether something _returns_ a value, or whether the returned Promise will _resolve to_ a value.

* update Docusaurus and other dependencies (facebook#3218)

* Add kotlin examples in new-architecture-app-modules-android.md (facebook#3241)

* change links in main home (facebook#3244)

* Refactoring The New Architecture Guide (facebook#3037)

* [Do Not Merge] Refactoring The New Architecture (facebook#3029)

* [Guide - The New Architecture] What Backward Compatibility Is (facebook#3038)

* Guide to creating a New Architecture app from template (facebook#3056)

* Start new template guide

This is a first iteration. I want to get feedback on a few aspects, so
starting from here as a baseline.

* Update title

* Use tabs for target OS

Set up matching the style of "Getting Started", except I kept the
headers inside the tabs for now as it makes for a useful right-hand TOC.

* Capitalize New Architecture, simplify

* Preliminary section for Hermes

Add section for recommending enabling Hermes. Not sure of contents yet,
and still have to test.

* Reword to emphasize importance of Hermes usage

* Show new arch in use

* Add build speed article link

* Add pro tip for pod install alias

* Restructure, repeat less

Favor linking to original setup guide instead of repeating content.

* Note about Expo

* Include command on uninstalling global CLI

* How to learn more

* Remove headers in tabs

They don't work correctly with the righthand TOC.

* Make header more clear

* Use quote block less often

There was way too much yellow.

* Opt for instructions using XCode

Because `xcodebuild clean` already failed me once when XCode GUI clean
worked.

* Fix lint issue

* Improve wording

* Use product name

* Fix line wraps

* Reword based on feedback

* Note use of bundle install

* Pod removal instructions

Also standardize on using yarn scripts from template for commands, it's
a little confusing to see the mix of `npx` and `yarn` once we start
referring to `yarn pod-install`

* Convert quotes to admonitions

* Convert Note: to admonitions

* Feedback: Change admonitions to caution

* PR feedback

* New Architecture landing page (facebook#3072)

* First draft of landing page

* Add migration and backwards compatibility links

* lint fix

* Restructure slightly, leaning more on context from Why a New Architecture

* Don't need md in links

* Suggested rewording

* Rephrase pillar summaries

* [Guide - The New Architecture] Why A New Architecture (facebook#3043)

* [Guide - The New Architecture] Pillars (facebook#3046)

* [Guide - The New Architecture] TurboModules as Native Modules (facebook#3039)

* [Guide - The New Architecture] Fabric Components as Native Components (facebook#3040)

* [FEAT][TNA] Fabric Component Guide (facebook#3132)

* [Feat] Add intro for Fabric Components

* feat: add guide to create a Fabric Component

* Add page on codegen (facebook#3155)

* [FEAT] TurboModules guide (facebook#3168)

* [Feat] Add intro for Fabric Components

* feat: add guide to create a Fabric Component

* Beginning of guide/folder structure

* WIP JS Spec

* specification section

* Configuration

* native code intro

* Must be named Spec

* Best stab at iOS native code, but I don't know how to describe what's going on in the code very well. Extrapolated what I could.

* Android instructions

iOS isn't working for me. Builds, but can't load module.

Writing up Android auto-linking next because the steps I tested did
work.

* Include linking instructions from RNNArch repo

* Add example JavaScript

* native modules link

* Address quick feedback items

* Remove, fix for rebased branch

* fix TM parameter on Android

* Revert to 'Codegen' casing

* Revert folly version change

2021.07.22 is for current version on main

* fix typo

* getTurboModule explainer

* Sentence edits

- Fix acronym bolding
- Change wording to "recommended" because "standard" has other
  connotations of possibly being required
- Parentheses unnecessary, distracting

* Remove TODO for now

Getting inconsistent results here, not sure if this is wrong or not;
removing TODO for now so it doesn't block anything

* ABI rephrase, more in line with new Fabric guide wording

* Explain shared C++ code more

* feat: add guide to create a Fabric Component

* feat: add guide to create a Fabric Component

* package.json description

* Lint fixes

* fix: Move JS constants to reduce changes

* fix: Remove newline

* feat: add required step for Android Codegen

* fix: use the proper links

Co-authored-by: Riccardo Cipolleschi <cipolleschi@fb.com>

* wip: migration guide review (facebook#3200)

Co-authored-by: Lizzi Lindboe <lindboe@users.noreply.github.com>

* fix: Fix typo in the sidebar (facebook#3247)

* Delete ubereats.png (facebook#3246)

Redundant image data

* Fixed pod install instructions (facebook#3243)

* Fixed pod install instructions

Yarn must be run prior to pod install, otherwise pod install fails with "Error: Cannot find module 'mkdirp'"

* yarn start is not necessary anymore

* Refer to rntester readme

* Update android studio screenshot (facebook#3253)

* Adding Android 13 Permissions into PermissionsAndroid (facebook#3254)

* TextInput: Add cursorColor Android prop (facebook#3255)

* Update Android Studio screenshot (Windows) (facebook#3257)

* docs (releases): small refactoring and updating templates (facebook#3256)

* Update documentation for keyboard events on Android (facebook#3259)

facebook/react-native@1e48274 fixed keyboard events on Android 11+ when an activity has set `android:windowSoftInputMode` to `adjustNothing`. Update the documentation to reflect the change.

* Update to Docusaurus stable release, fix alert admonition styling (facebook#3248)

* Change asks to ask (grammar) (facebook#3262)

* contributing: remove old references (facebook#3263)

* adding accessibilityLabelledBy to documentation (facebook#3249)

* Update references to Expo / Expo CLI (facebook#3267)

* feat(images): Adding iOS Image Cache Limits (facebook#3258)

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

* feat: update instructions around automatic linking (facebook#3269)

* Follow up from facebook#3267 with minor fixes (facebook#3270)

* nit: fix typo in new architecture docs (facebook#3261)

* fix typo

* fix: typescript example

* fix: lint

* make text optional

* fix(images): move app-transport-security reference (facebook#3271)

* fix(images): move app-transport-security reference

* feat(images): updating link references

* fix(network): change network app transport security reference

* fix(docs): updating versioned docs link reference

* Showcase page refresh (facebook#3235)

Co-authored-by: Lorenzo Sciandra <lorenzo.sciandra@gmail.com>

* fix: moving the Using forwardRef and Using a getter to a lower hierarchy level (facebook#3282)

* Upgrade toast Android example to camelCase (facebook#3283)

* Fix link in Introduction (facebook#3290)

* Fix link in Introduction

* Use new page title (potentially renaming that is a separate discussion)

* fix: push steps in a lower hierarchy level (facebook#3296)

* fix type in the new architecture pillars section (facebook#3297)

* cut 0.70 docs (take 2) (facebook#3295)

* Blog post for 0.70 RN release (facebook#3298)

* Blog post for 0.70 RN release

* Fixes and TOC

* Update my GH handle

* Update my GH handle

* Apply suggestions from code review

Co-authored-by: Riccardo <cipolleschi@fb.com>

* Update @Titozzz Twitter handle

* Add example for javaPackageName

* Update commits count

* Minor fixes to the wording

Co-authored-by: Dmytro Rykun <dmitry.rykun@gmail.com>
Co-authored-by: Riccardo <cipolleschi@fb.com>

Co-authored-by: Lorenzo Sciandra <notkelset@kelset.dev>
Co-authored-by: Marcin Kozubek <mkozubek@protonmail.com>
Co-authored-by: Malachi Gruenhagen <68450431+nurse-the-code@users.noreply.github.com>
Co-authored-by: Bartosz Kaszubowski <gosimek@gmail.com>
Co-authored-by: Pushkar Yadav <96358784+pushkarydv@users.noreply.github.com>
Co-authored-by: Muhammad Ovi (Owais) <muhammadowaisnaseem@gmail.com>
Co-authored-by: rj-jones <85085648+rj-jones@users.noreply.github.com>
Co-authored-by: fbmal7 <105675860+fbmal7@users.noreply.github.com>
Co-authored-by: Nicola Corti <corti.nico@gmail.com>
Co-authored-by: neildhar <neildhar@users.noreply.github.com>
Co-authored-by: Lorenzo Sciandra <lsciandra@microsoft.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Yvan Zhu <i@zhuyunfeng.com>
Co-authored-by: Mileta Dulović <dulovicmileta1@gmail.com>
Co-authored-by: Ricky <rickhanlonii@fb.com>
Co-authored-by: Andrew <35735666+meatnordrink@users.noreply.github.com>
Co-authored-by: LeoTM <1881059+leotm@users.noreply.github.com>
Co-authored-by: Nicola Corti <ncor@fb.com>
Co-authored-by: Oskar Kwaśniewski <oskarkwasniewski@icloud.com>
Co-authored-by: Furkan Arabacı <furkanarabaci@hotmail.com>
Co-authored-by: Marek Fořt <marekfort@me.com>
Co-authored-by: Riccardo <riccardo.cipolleschi@gmail.com>
Co-authored-by: Władysław Raczek <wsw.raczek@gmail.com>
Co-authored-by: Luna Wei <luwe@fb.com>
Co-authored-by: Evan Charlton <evancharlton@gmail.com>
Co-authored-by: Tushar Varshney <110495886+tusharvars@users.noreply.github.com>
Co-authored-by: Riccardo <cipolleschi@fb.com>
Co-authored-by: Lizzi Lindboe <lindboe@users.noreply.github.com>
Co-authored-by: Jessej Samuel <1234jessej@gmail.com>
Co-authored-by: Seph Soliman <seph@seph.dk>
Co-authored-by: Kimiyasu Morikawa <mail@alea12.net>
Co-authored-by: Agastya Darma <gedeagas22@gmail.com>
Co-authored-by: Nick Gerleman <nick@nickgerleman.com>
Co-authored-by: denis-tsoi-mox <67885203+denis-tsoi-mox@users.noreply.github.com>
Co-authored-by: fabriziobertoglio1987 <fabrizio.bertoglio@gmail.com>
Co-authored-by: Brent Vatne <brentvatne@gmail.com>
Co-authored-by: Michał Pierzchała <thymikee@gmail.com>
Co-authored-by: nishan (o^▽^o) <nishanbende@gmail.com>
Co-authored-by: Lorenzo Sciandra <lorenzo.sciandra@gmail.com>
Co-authored-by: Lucas Alves <lcsjalves@gmail.com>
Co-authored-by: dan <dan.abramov@gmail.com>
Co-authored-by: Dmytro Rykun <dmitry.rykun@gmail.com>
  • Loading branch information
Show file tree
Hide file tree
Showing 426 changed files with 53,454 additions and 3,587 deletions.
3 changes: 3 additions & 0 deletions .alexrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,9 @@ exports.allow = [

// host refers to host objects in native code
'host-hostess',

// allowing this term to prevent reporting "primitive", which is a programming term
'savage',
];

// Use a "maybe" level of profanity instead of the default "unlikely".
Expand Down
4 changes: 3 additions & 1 deletion docs/_getting-started-linux-android.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import RemoveGlobalCLI from './\_remove-global-cli.md';

## Installing dependencies

You will need Node, the React Native command line interface, a JDK, and Android Studio.
Expand Down Expand Up @@ -77,7 +79,7 @@ React Native has a built-in command line interface. Rather than install and mana

<h2>Creating a new application</h2>

> If you previously installed a global `react-native-cli` package, please remove it as it may cause unexpected issues.
<RemoveGlobalCLI />

React Native has a built-in command line interface, which you can use to generate a new project. You can access it without installing anything globally using `npx`, which ships with Node.js. Let's create a new React Native project called "AwesomeProject":

Expand Down
6 changes: 4 additions & 2 deletions docs/_getting-started-macos-android.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import RemoveGlobalCLI from './\_remove-global-cli.md';

## Installing dependencies

You will need Node, Watchman, the React Native command line interface, a JDK, and Android Studio.
Expand Down Expand Up @@ -52,7 +54,7 @@ Once setup has finalized and you're presented with the Welcome screen, proceed t

Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the `Android 12 (S)` 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".
To do that, open Android Studio, click on "More Actions" button and select "SDK Manager".

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

Expand Down Expand Up @@ -91,7 +93,7 @@ React Native has a built-in command line interface. Rather than install and mana

<h2>Creating a new application</h2>

> If you previously installed a global `react-native-cli` package, please remove it as it may cause unexpected issues.
<RemoveGlobalCLI />

React Native has a built-in command line interface, which you can use to generate a new project. You can access it without installing anything globally using `npx`, which ships with Node.js. Let's create a new React Native project called "AwesomeProject":

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

## Installing dependencies

Expand Down Expand Up @@ -57,7 +57,7 @@ React Native has a built-in command line interface. Rather than install and mana

## Creating a new application

> If you previously installed a global `react-native-cli` package, please remove it as it may cause unexpected issues.
<RemoveGlobalCLI />

You can use React Native's built-in command line interface to generate a new project. Let's create a new React Native project called "AwesomeProject":

Expand Down
8 changes: 5 additions & 3 deletions docs/_getting-started-windows-android.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import RemoveGlobalCLI from './\_remove-global-cli.md';

<h2>Installing dependencies</h2>

You will need Node, the React Native command line interface, a JDK, and Android Studio.
Expand Down Expand Up @@ -47,7 +49,7 @@ Once setup has finalized and you're presented with the Welcome screen, proceed t

Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the `Android 12 (S)` 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".
To do that, open Android Studio, click on "More Actions" button and select "SDK Manager".

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

Expand All @@ -58,7 +60,7 @@ Select the "SDK Platforms" tab from within the SDK Manager, then check the box n
- `Android SDK Platform 31`
- `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 `31.0.0` 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 `31.0.0` is selected.

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

Expand Down Expand Up @@ -108,7 +110,7 @@ React Native has a built-in command line interface. Rather than install and mana

<h2>Creating a new application</h2>

> If you previously installed a global `react-native-cli` package, please remove it as it may cause unexpected issues.
<RemoveGlobalCLI />

React Native has a built-in command line interface, which you can use to generate a new project. You can access it without installing anything globally using `npx`, which ships with Node.js. Let's create a new React Native project called "AwesomeProject":

Expand Down
5 changes: 5 additions & 0 deletions docs/_remove-global-cli.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
> If you previously installed a global `react-native-cli` package, please remove it as it may cause unexpected issues:
>
> ```shell
> npm uninstall -g react-native-cli @react-native-community/cli
> ```
17 changes: 17 additions & 0 deletions docs/accessibility.md
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,23 @@ To use, set the `accessibilityLabel` property to a custom string on your View, T

In the above example, the `accessibilityLabel` on the TouchableOpacity element would default to "Press me!". The label is constructed by concatenating all Text node children separated by spaces.

### `accessibilityLabelledBy` <div class="label android">Android</div>

A reference to another element [nativeID](view.md#nativeid) used to build complex forms.
The value of `accessibilityLabelledBy` should match the `nativeID` of the related element:

```jsx
<View>
<Text nativeID="formLabel">Label for Input Field</Text>
<TextInput
accessibilityLabel="input"
accessibilityLabelledBy="formLabel"
/>
</View>
```

In the above example, the screenreader announces `Input, Edit Box for Label for Input Field` when focusing on the TextInput.

### `accessibilityHint`

An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not clear from the accessibility label.
Expand Down
2 changes: 1 addition & 1 deletion docs/appregistry.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ title: AppRegistry
<div className="banner-native-code-required">
<h3>Project with Native Code Required</h3>
<p>
If you are using the managed <code>expo-cli</code> workflow there is only ever one entry component registered with <code>AppRegistry</code> and it is handled automatically, you do not need to use this API.
If you are using the managed Expo workflow there is only ever one entry component registered with <code>AppRegistry</code> and it is handled automatically (or through <a href="https://docs.expo.dev/versions/latest/sdk/register-root-component/">registerRootComponent</a>). You do not need to use this API.
</p>
</div>

Expand Down
3 changes: 1 addition & 2 deletions docs/build-speed.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ To mitigate this performance hit, this page shares some suggestions on how to **

## Build only one ABI during development (Android-only)

When building your android app locally, you build all the 4 ABIs by default: `armeabi-v7a`, `arm64-v8a`, `x86` & `x86_64`.
When building your android app locally, by default you build all the 4 [Application Binary Interfaces (ABIs)](https://developer.android.com/ndk/guides/abis) : `armeabi-v7a`, `arm64-v8a`, `x86` & `x86_64`.

However, you probably don't need to build all of them if you're building locally and testing your emulator or on a physical device.
Expand Down Expand Up @@ -45,7 +44,7 @@ $ ./gradlew :app:assembleDebug -PreactNativeArchitectures=x86,x86_64

This can be useful if you wish to build your Android App on a CI and use a matrix to parallelize the build of the different architectures.

If you wish, you can also override this value locally, using the `gradle.properties` file you have in the [top level folder](https://github.com/facebook/react-native/blob/19cf70266eb8ca151aa0cc46ac4c09cb987b2ceb/template/android/gradle.properties#L30-L33) of your project:
If you wish, you can also override this value locally, using the `gradle.properties` file you have in the [top-level folder](https://github.com/facebook/react-native/blob/19cf70266eb8ca151aa0cc46ac4c09cb987b2ceb/template/android/gradle.properties#L30-L33) of your project:

```
# Use this property to specify which architecture you want to build.
Expand Down
21 changes: 13 additions & 8 deletions docs/debugging.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con

## Accessing the In-App Developer Menu

You can access the developer menu by shaking your device or by selecting "Shake Gesture" inside the Hardware menu in the iOS Simulator. You can also use the `⌘D` keyboard shortcut when your app is running in the iOS Simulator, or `⌘M` when running in an Android emulator on Mac OS and `Ctrl+M` on Windows and Linux. Alternatively for Android, you can run the command `adb shell input keyevent 82` to open the dev menu (82 being the Menu key code).
You can access the developer menu by shaking your device or by selecting "Shake Gesture" inside the Hardware menu in the iOS Simulator. You can also use the `⌘D` keyboard shortcut when your app is running in the iOS Simulator, or `⌘M` when running in an Android emulator on macOS and `Ctrl+M` on Windows and Linux. Alternatively for Android, you can run the command `adb shell input keyevent 82` to open the dev menu (82 being the Menu key code).

![](/docs/assets/DeveloperMenu.png)

Expand All @@ -19,7 +19,7 @@ Fast Refresh is a React Native feature that allows you to get near-instant feedb

## Enabling Keyboard Shortcuts

React Native supports a few keyboard shortcuts in the iOS Simulator. They are described below. To enable them, open the Hardware menu, select Keyboard, and make sure that "Connect Hardware Keyboard" is checked.
React Native supports a few keyboard shortcuts in the iOS Simulator. They are described below. To enable them on macOS, inside the Simulator app, open the I/O menu, select Keyboard, and make sure that "Connect Hardware Keyboard" is checked.

## LogBox

Expand Down Expand Up @@ -75,8 +75,9 @@ The debugger will receive a list of all project roots, separated by a space. For

You can use Safari to debug the iOS version of your app without having to enable "Debug JS Remotely".

- Enable Develop menu in Safari: `Preferences → Advanced → Select "Show Develop menu in menu bar"`
- Select your app's JSContext: `Develop → Simulator → JSContext`
- On a physical device go to: `Settings → Safari → Advanced → Make sure "Web Inspector" is turned on` (This step is not needed on the Simulator)
- On your Mac enable Develop menu in Safari: `Preferences → Advanced → Select "Show Develop menu in menu bar"`
- Select your app's JSContext: `Develop → Simulator (or other device) → JSContext`
- Safari's Web Inspector should open which has a Console and a Debugger

While sourcemaps may not be enabled by default, you can follow [this guide](http://blog.nparashuram.com/2019/10/debugging-react-native-ios-apps-with.html) or [video](https://www.youtube.com/watch?v=GrGqIIz51k4) to enable them and set break points at the right places in the source code.
Expand Down Expand Up @@ -116,7 +117,13 @@ react-devtools

It should connect to your simulator within a few seconds.

> Note: if you prefer to avoid global installations, you can add `react-devtools` as a project dependency. Add the `react-devtools` package to your project using `npm install --save-dev react-devtools`, then add `"react-devtools": "react-devtools"` to the `scripts` section in your `package.json`, and then run `npm run react-devtools` from your project folder to open the DevTools.
:::info
If connecting to the emulator proves troublesome (especially Android 12), try running `adb reverse tcp:8097 tcp:8097` in a new terminal.
:::

:::info
If you prefer to avoid global installations, you can add `react-devtools` as a project dependency. Add the `react-devtools` package to your project using `npm install --save-dev react-devtools`, then add `"react-devtools": "react-devtools"` to the `scripts` section in your `package.json`, and then run `npm run react-devtools` from your project folder to open the DevTools.
:::

### Integration with React Native Inspector

Expand Down Expand Up @@ -159,7 +166,7 @@ You can view installation instructions [in the README](https://github.com/infini
<div className="banner-native-code-required">
<h3>Projects with Native Code Only</h3>
<p>
The following section only applies to projects with native code exposed. If you are using the managed <code>expo-cli</code> workflow, see the guide on <a href="https://docs.expo.dev/workflow/customizing/" target="_blank">ejecting</a> to use this API.
The following section only applies to projects with native code exposed. If you are using the managed Expo workflow, see the guide on <a href="https://docs.expo.dev/workflow/prebuild/" target="_blank">prebuild</a> to use this API.
</p>
</div>

Expand All @@ -186,8 +193,6 @@ On Android 5.0+ devices connected via USB, you can use the [`adb` command line t

`adb reverse tcp:8081 tcp:8081`

<!-- alex ignore host-hostess -->

Alternatively, select "Dev Settings" from the Developer Menu, then update the "Debug server host for device" setting to match the IP address of your computer.

> If you run into any issues, it may be possible that one of your Chrome extensions is interacting in unexpected ways with the debugger. Try disabling all of your extensions and re-enabling them one-by-one until you find the problematic extension.
Expand Down
4 changes: 4 additions & 0 deletions docs/direct-manipulation.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,10 @@ id: direct-manipulation
title: Direct Manipulation
---

import NativeDeprecated from './the-new-architecture/\_markdown_native_deprecation.mdx'

<NativeDeprecated />

It is sometimes necessary to make changes directly to a component without using state/props to trigger a re-render of the entire subtree. When using React in the browser for example, you sometimes need to directly modify a DOM node, and the same is true for views in mobile apps. `setNativeProps` is the React Native equivalent to setting properties directly on a DOM node.

:::caution
Expand Down
2 changes: 1 addition & 1 deletion docs/fast-refresh.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ id: fast-refresh
title: Fast Refresh
---

Fast Refresh is a React Native feature that allows you to get near-instant feedback for changes in your React components. Fast Refresh is enabled by default, and you can toggle "Enable Fast Refresh" in the React Native developer menu. With Fast Refresh enabled, most edits should be visible within a second or two.
Fast Refresh is a React Native feature that allows you to get near-instant feedback for changes in your React components. Fast Refresh is enabled by default, and you can toggle "Enable Fast Refresh" in the [React Native developer menu](/docs/debugging#accessing-the-in-app-developer-menu). With Fast Refresh enabled, most edits should be visible within a second or two.

## How It Works

Expand Down
Loading

0 comments on commit 83678c3

Please sign in to comment.