[0.66.5] Bump version numbers

Summary:
The `__apply_Xcode_12_5_M1_post_install_workaround` script changes the `IPHONEOS_DEPLOYMENT_TARGET` to `11.0` for all pods. This causes problems if the pods were targetting `12.0` or higher. Many expo modules are targetting `12.0`.

I fixed this issue by checking the existing version and only bumping the target if it is lower than `11.0`.

See also: this discussion post by mikehardy https://github.com/reactwg/react-native-releases/discussions/1#discussioncomment-1619523

<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://github.com/facebook/react-native/wiki/Changelog
-->

[iOS] [Fixed] - __apply_Xcode_12_5_M1_post_install_workaround causing pods targetting iOS 12 and above to fail

Pull Request resolved: https://github.com/facebook/react-native/pull/32633

Test Plan:

1. pick an iOS Pod that has a minimum deployment target of iOS 12 or higher, I chose the Braintree package
2. `npx react-native init myrnapp`
3. Open `ios/Podfile` and add the pod as a dependency: `pod 'Braintree', '~> 5'` (and upgrade the Podfile target to 12 (`platform :ios, '12.0'`))
4. Compile the app.

Before applying this patch: ❌ Build fails because Braintree uses iOS 12 features and was downgraded to target 11.0
After applying this patch: ✅ Build succeeds

Reviewed By: fkgozali

Differential Revision: D32638171

Pulled By: philIip

fbshipit-source-id: 0487647583057f3cfefcf515820855c7d4b16d31

.buckconfig

@@ -1,6 +1,6 @@
 
 [android]
-  target = android-29
+  target = android-30
 
 [download]
   max_number_of_retries = 3
@@ -8,7 +8,6 @@
 [maven_repositories]
   central = https://repo1.maven.org/maven2
   google = https://maven.google.com/
-  jcenter = https://jcenter.bintray.com/
 
 [alias]
   rntester = //packages/rn-tester/android/app:app

.circleci/Dockerfiles/Dockerfile.android

@@ -14,7 +14,7 @@
 # and build a Android application that can be used to run the
 # tests specified in the scripts/ directory.
 #
-FROM reactnativecommunity/react-native-android:2.1
+FROM reactnativecommunity/react-native-android:4.0
 
 LABEL Description="React Native Android Test Image"
 LABEL maintainer="Héctor Ramos <hector@fb.com>"
@@ -25,6 +25,7 @@ ENV JAVA_TOOL_OPTIONS="-Dfile.encoding=UTF8"
 
 ADD .buckconfig /app/.buckconfig
 ADD .buckjavaargs /app/.buckjavaargs
+ADD BUCK /app/BUCK
 ADD Libraries /app/Libraries
 ADD ReactAndroid /app/ReactAndroid
 ADD ReactCommon /app/ReactCommon

.circleci/config.yml

@@ -15,10 +15,10 @@ defaults: &defaults
   environment:
     - GIT_COMMIT_DESC: git log --format=oneline -n 1 $CIRCLE_SHA1
     # The public github tokens are publicly visible by design
-    - PUBLIC_PULLBOT_GITHUB_TOKEN_A: "a6edf8e8d40ce4e8b11a"
-    - PUBLIC_PULLBOT_GITHUB_TOKEN_B: "150e1341f4dd9c944d2a"
-    - PUBLIC_ANALYSISBOT_GITHUB_TOKEN_A: &github_token_a "78a72af35445ca3f8180"
-    - PUBLIC_ANALYSISBOT_GITHUB_TOKEN_B: &github_token_b "b1a98e0bbd56ff1ccba1"
+    - PUBLIC_PULLBOT_GITHUB_TOKEN_A: &github_pullbot_token_a "a6edf8e8d40ce4e8b11a"
+    - PUBLIC_PULLBOT_GITHUB_TOKEN_B: &github_pullbot_token_b "150e1341f4dd9c944d2a"
+    - PUBLIC_ANALYSISBOT_GITHUB_TOKEN_A: &github_analysisbot_token_a "312d354b5c36f082cfe9"
+    - PUBLIC_ANALYSISBOT_GITHUB_TOKEN_B: &github_analysisbot_token_b "07973d757026bdd9f196"
 
 # -------------------------
 #        EXECUTORS
@@ -27,6 +27,7 @@ executors:
   nodelts:
     <<: *defaults
     docker:
+      # Note: Version set separately for Windows builds, see below.
       - image: circleci/node:14
   nodeprevlts:
     <<: *defaults
@@ -35,7 +36,7 @@ executors:
   reactnativeandroid:
     <<: *defaults
     docker:
-      - image: reactnativecommunity/react-native-android:2.1
+      - image: reactnativecommunity/react-native-android:4.0
     resource_class: "large"
     environment:
       - TERM: "dumb"
@@ -44,12 +45,14 @@ executors:
       - GRADLE_OPTS: '-Dorg.gradle.daemon=false -Dorg.gradle.jvmargs="-XX:+HeapDumpOnOutOfMemoryError"'
       - BUILD_THREADS: 2
       # Repeated here, as the environment key in this executor will overwrite the one in defaults
-      - PUBLIC_ANALYSISBOT_GITHUB_TOKEN_A: *github_token_a
-      - PUBLIC_ANALYSISBOT_GITHUB_TOKEN_B: *github_token_b
+      - PUBLIC_ANALYSISBOT_GITHUB_TOKEN_A: *github_analysisbot_token_a
+      - PUBLIC_ANALYSISBOT_GITHUB_TOKEN_B: *github_analysisbot_token_b
+      - PUBLIC_PULLBOT_GITHUB_TOKEN_A: *github_pullbot_token_a
+      - PUBLIC_PULLBOT_GITHUB_TOKEN_B: *github_pullbot_token_b
   reactnativeios:
     <<: *defaults
     macos:
-      xcode: &_XCODE_VERSION "12.1.0"
+      xcode: &_XCODE_VERSION "12.5.0"
 
 # -------------------------
 #        COMMANDS
@@ -75,7 +78,6 @@ commands:
       - restore_cache:
           keys:
             - v4-yarn-cache-{{ arch }}-{{ checksum "yarn.lock" }}
-            - v4-yarn-cache-{{ arch }}
       - run:
           name: "Yarn: Install Dependencies"
           command: |
@@ -94,7 +96,6 @@ commands:
       - restore_cache:
           keys:
             - v3-buck-v2019.01.10.01-{{ checksum "scripts/circleci/buck_fetch.sh" }}}
-            - v3-buck-v2019.01.10.01-
       - run:
           name: Install BUCK
           command: |
@@ -151,20 +152,20 @@ commands:
           command: cp packages/rn-tester/Podfile.lock packages/rn-tester/Podfile.lock.bak
       - restore_cache:
           keys:
-            - v3-pods-{{ .Environment.CIRCLE_JOB }}-{{ checksum "packages/rn-tester/Podfile.lock.bak" }}
-            - v3-pods-{{ .Environment.CIRCLE_JOB }}-
+            # The committed lockfile is generated using USE_FRAMEWORKS=0 and USE_HERMES=0 so it could load an outdated cache if a change
+            # only affects the frameworks or hermes config. To help prevent this also cache based on the content of Podfile.
+            - v3-pods-{{ .Environment.CIRCLE_JOB }}-{{ checksum "packages/rn-tester/Podfile.lock.bak" }}-{{ checksum "packages/rn-tester/Podfile" }}
       - steps: << parameters.steps >>
       - save_cache:
           paths:
             - packages/rn-tester/Pods
-          key: v3-pods-{{ .Environment.CIRCLE_JOB }}-{{ checksum "packages/rn-tester/Podfile.lock.bak" }}
+          key: v3-pods-{{ .Environment.CIRCLE_JOB }}-{{ checksum "packages/rn-tester/Podfile.lock.bak" }}-{{ checksum "packages/rn-tester/Podfile" }}
 
   download_gradle_dependencies:
     steps:
       - restore_cache:
           keys:
             - v1-gradle-{{ checksum "ReactAndroid/build.gradle" }}-{{ checksum "scripts/circleci/gradle_download_deps.sh" }}
-            - v1-gradle-
       - run:
           name: Download Dependencies Using Gradle
           command: ./scripts/circleci/gradle_download_deps.sh
@@ -236,17 +237,20 @@ jobs:
   # Issues will be posted to the PR itself via GitHub bots.
   # This workflow should only fail if the bots fail to run.
   analyze_pr:
-    executor: nodelts
+    executor: reactnativeandroid
     steps:
       - restore_cache_checkout:
-          checkout_type: node
+          checkout_type: android
       - run_yarn
 
       - install_github_bot_deps
 
+      # Note: The yarn gpg key needs to be refreshed to work around https://github.com/yarnpkg/yarn/issues/7866
       - run:
           name: Install additional GitHub bot dependencies
-          command: sudo apt update && sudo apt install -y shellcheck jq
+          command: |
+            curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add -
+            apt update && apt install -y shellcheck jq
 
       - run:
           name: Run linters against modified files (analysis-bot)
@@ -264,10 +268,10 @@ jobs:
   #    JOBS: Analyze Code
   # -------------------------
   analyze_code:
-    executor: nodelts
+    executor: reactnativeandroid
     steps:
       - restore_cache_checkout:
-          checkout_type: node
+          checkout_type: android
       - setup_artifacts
       - run_yarn
 
@@ -276,6 +280,11 @@ jobs:
           command: scripts/circleci/exec_swallow_error.sh yarn lint --format junit -o ./reports/junit/eslint/results.xml
           when: always
 
+      - run:
+          name: Lint Java
+          command: scripts/circleci/exec_swallow_error.sh yarn lint-java --check
+          when: always
+
       - run:
           name: Check for errors in code using Flow (iOS)
           command: yarn flow-check-ios
@@ -423,7 +432,7 @@ jobs:
           steps:
             - run:
                 name: Generate RNTesterPods Workspace
-                command: cd packages/rn-tester && bundle exec pod install --verbose
+                command: cd packages/rn-tester && USE_FABRIC=1 bundle exec pod install --verbose
 
       # -------------------------
       # Runs iOS unit tests
@@ -495,12 +504,6 @@ jobs:
           command: source scripts/android-setup.sh && launchAVD
           background: true
 
-      # Keep configuring Android dependencies while AVD boots up
-
-      - run:
-          name: Install rsync, zip
-          command: apt-get update -y && apt-get install rsync zip -y
-
       # Install Buck
       - install_buck_tooling
 
@@ -606,14 +609,21 @@ jobs:
         default: false
     environment:
       - ANDROID_HOME: "C:\\Android\\android-sdk"
-      - ANDROID_NDK: "C:\\Android\\android-sdk\\ndk\\19.2.5345600"
-      - ANDROID_BUILD_VERSION: 28
-      - ANDROID_TOOLS_VERSION: 29.0.3
+      - ANDROID_NDK: "C:\\Android\\android-sdk\\ndk\\20.1.5948944"
+      - ANDROID_BUILD_VERSION: 30
+      - ANDROID_TOOLS_VERSION: 30.0.2
       - GRADLE_OPTS: -Dorg.gradle.daemon=false
-      - NDK_VERSION: 19.2.5345600
+      - NDK_VERSION: 21.4.7075529
     steps:
       - checkout
 
+      - run:
+          name: Install Node
+          # Note: Version set separately for non-Windows builds, see above.
+          command: |
+            nvm install 14.17.0
+            nvm use 14.17.0
+
       # Setup Dependencies
       - run:
           name: Install Yarn
@@ -626,7 +636,6 @@ jobs:
       - restore_cache:
           keys:
             - v1-win-yarn-cache-{{ arch }}-{{ checksum "yarn.lock" }}
-            - v1-win-yarn-cache-{{ arch }}-
       - run:
           name: "Yarn: Install Dependencies"
           command: yarn install --frozen-lockfile --non-interactive
@@ -635,9 +644,11 @@ jobs:
           paths:
             - C:\Users\circleci\AppData\Local\Yarn
 
+      # Try to install the SDK up to 3 times, since network flakiness can cause install failures
+      # Using a timeout of 9 mins, as circle ci will timeout if there is no output for 10 mins
       - run:
           name: Install Android SDK Tools
-          command: choco install android-sdk
+          command: choco install android-sdk --timeout 540; if (!$?) { choco install android-sdk --timeout 540 --force --forcedependencies}; if (!$?) { choco install android-sdk  --force --forcedependencies}
 
       - run:
           name: Setup Android SDKs
@@ -777,30 +788,34 @@ workflows:
           run_unit_tests: true
           requires:
             - setup_ios
-      - test_ios:
-          name: test_ios_unit_frameworks_jsc
-          use_frameworks: true
-          run_unit_tests: true
-          requires:
-            - setup_ios
+      # DISABLED: USE_FRAMEWORKS=1 not supported by Flipper
+      # - test_ios:
+      #     name: test_ios_unit_frameworks_jsc
+      #     use_frameworks: true
+      #     run_unit_tests: true
+      #     requires:
+      #       - setup_ios
       - test_ios:
           name: test_ios_unit_hermes
           use_hermes: true
           run_unit_tests: true
           requires:
             - setup_ios
-      - test_ios:
-          name: test_ios_unit_frameworks_hermes
-          use_hermes: true
-          use_frameworks: true
-          run_unit_tests: true
-          requires:
-            - setup_ios
+      # DISABLED: USE_FRAMEWORKS=1 not supported by Flipper
+      # - test_ios:
+      #     name: test_ios_unit_frameworks_hermes
+      #     use_hermes: true
+      #     use_frameworks: true
+      #     run_unit_tests: true
+      #     requires:
+      #       - setup_ios
+      # DISABLED: Detox tests need to be fixed
       # - test_ios:
       #     name: test_ios_detox
       #     run_detox_tests: true
       #     requires:
       #       - setup_ios
+      # DISABLED: USE_FRAMEWORKS=1 not supported by Flipper
       # - test_ios:
       #     name: test_ios_detox_frameworks
       #     use_frameworks: true
@@ -850,11 +865,18 @@ workflows:
 
   analysis:
     jobs:
-      - setup
+      - setup:
+          name: setup_js
+
+      - setup:
+          name: setup_android
+          checkout_type: android
+          executor: reactnativeandroid
+
       # Run lints on every commit other than those to the gh-pages branch
       - analyze_code:
           requires:
-            - setup
+            - setup_android
           filters:
             branches:
               ignore: gh-pages
@@ -862,7 +884,7 @@ workflows:
       # Run code checks on PRs from forks
       - analyze_pr:
           requires:
-            - setup
+            - setup_android
           filters:
             branches:
               only: /^pull\/.*$/
@@ -870,15 +892,15 @@ workflows:
       # Gather coverage
       - js_coverage:
           requires:
-            - setup
+            - setup_js
   nightly:
     triggers:
       - schedule:
-          cron: "0 0 * * *"
+          cron: "0 20 * * *"
           filters:
             branches:
               only:
-                - master
+                - main
     jobs:
       - nightly_job
 

.editorconfig

@@ -13,5 +13,12 @@ indent_size = 2
 [*.gradle]
 indent_size = 4
 
+[*.kts]
+indent_size = 4
+
 [BUCK]
 indent_size = 4
+
+# Windows files
+[*.bat]
+end_of_line = crlf

.eslintrc

@@ -21,6 +21,14 @@
         "@react-native/codegen/react-native-modules": 2
       }
     },
+    {
+      "files": [
+        "flow-typed/**/*.js",
+      ],
+      "rules": {
+        quotes: 0
+      }
+    },
     {
       "files": [
         "**/__fixtures__/**/*.js",

.flowconfig

@@ -30,6 +30,9 @@ flow/
 emoji=true
 
 exact_by_default=true
+indexed_access=false
+
+format.bracket_spacing=false
 
 module.file_ext=.js
 module.file_ext=.json
@@ -47,15 +50,13 @@ suppress_type=$FlowFixMeProps
 suppress_type=$FlowFixMeState
 suppress_type=$FlowFixMeEmpty
 
-experimental.abstract_locations=true
-
 [lints]
 sketchy-null-number=warn
 sketchy-null-mixed=warn
 sketchy-number=warn
 untyped-type-import=warn
 nonstrict-import=warn
-deprecated-type=warn
+deprecated-type=error
 unsafe-getters-setters=warn
 unnecessary-invariant=warn
 signature-verification-failure=warn
@@ -70,4 +71,4 @@ untyped-import
 untyped-type-import
 
 [version]
-^0.137.0
+^0.158.0

.flowconfig.android

@@ -30,6 +30,9 @@ flow/
 emoji=true
 
 exact_by_default=true
+indexed_access=false
+
+format.bracket_spacing=false
 
 module.file_ext=.js
 module.file_ext=.json
@@ -47,15 +50,13 @@ suppress_type=$FlowFixMeProps
 suppress_type=$FlowFixMeState
 suppress_type=$FlowFixMeEmpty
 
-experimental.abstract_locations=true
-
 [lints]
 sketchy-null-number=warn
 sketchy-null-mixed=warn
 sketchy-number=warn
 untyped-type-import=warn
 nonstrict-import=warn
-deprecated-type=warn
+deprecated-type=error
 unsafe-getters-setters=warn
 unnecessary-invariant=warn
 signature-verification-failure=warn
@@ -70,4 +71,4 @@ untyped-import
 untyped-type-import
 
 [version]
-^0.137.0
+^0.158.0

.gitattributes

@@ -0,0 +1,3 @@
+# Windows files should use crlf line endings
+# https://help.github.com/articles/dealing-with-line-endings/
+*.bat text eol=crlf

.github/SUPPORT.md

@@ -27,7 +27,7 @@ If you'd like to discuss topics related to the future of React Native, please ch
 
 If you want to participate in casual discussions about the use of React Native, consider participating in one of the following forums:
 
-- [Reactiflux Discord Server](https://www.reactiflux)
+- [Reactiflux Discord Server](https://www.reactiflux.com)
 - [Spectrum Chat](https://spectrum.chat/react-native)
 - [React Native Community Facebook Group](https://www.facebook.com/groups/react.native.community)
 

.github/respond-to-issue-based-on-label.yml

@@ -1,4 +1,4 @@
-# Configuration for Label Actions - https://github.com/marketplace/actions/label-actions
+# Configuration for Respond To Issue Based on Label https://github.com/marketplace/actions/respond-to-issue-based-on-label
 
 "Type: Invalid":
   close: true

.github/workflows/on-issue-labeled.yml

@@ -1,16 +1,16 @@
-name: Label Actions
+name: On Issue Labeled
 # This workflow is triggered when a label is added to an issue.
 on:
   issues:
     types: labeled
 
 jobs:
-  processLabelAction:
-    name: Process Label Action
+  respondToIssueBasedOnLabel:
+    name: Respond to Issue Based on Label
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
-      - name: Process Label Action
-        uses: hramos/label-actions@v1
+      - name: Respond to Issue Based on Label
+        uses: hramos/respond-to-issue-based-on-label@v2
         with:
           repo-token: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -24,7 +24,7 @@ project.xcworkspace
 # Gradle
 /build/
 /packages/react-native-codegen/android/build/
-/packages/react-native-codegen/android/gradlePlugin-build/gradlePlugin/build
+/packages/react-native-gradle-plugin/build/
 /packages/rn-tester/android/app/.cxx/
 /packages/rn-tester/android/app/build/
 /packages/rn-tester/android/app/gradle/
@@ -85,9 +85,9 @@ package-lock.json
 
 # Libs that shouldn't have Xcode project
 /Libraries/FBLazyVector/**/*.xcodeproj
-/Libraries/FBReactNativeSpec/**/*.xcodeproj
 /Libraries/RCTRequired/**/*.xcodeproj
 /React/CoreModules/**/*.xcodeproj
+/React/FBReactNativeSpec/**/*.xcodeproj
 /packages/react-native-codegen/**/*.xcodeproj
 
 # CocoaPods
@@ -100,11 +100,9 @@ package-lock.json
 !/packages/rn-tester/Pods/__offline_mirrors__
 
 # react-native-codegen
-/Libraries/FBReactNativeSpec/FBReactNativeSpec
 /packages/react-native-codegen/lib
-/ReactCommon/fabric/components/rncore/
-/schema-native-modules.json
-/schema-rncore.json
+/ReactCommon/react/renderer/components/rncore/
+/packages/rn-tester/NativeModuleExample/ScreenshotManagerSpec*
 
 # Visual studio
 .vscode

.nvmrc

@@ -1 +0,0 @@
-8.11.3

CONTRIBUTING.md

@@ -8,9 +8,9 @@ The [Open Source Guides](https://opensource.guide/) website has a collection of
 * [Building Welcoming Communities](https://opensource.guide/building-community/)
 
 
-### [Code of Conduct](https://github.com/facebook/react/blob/master/CODE_OF_CONDUCT.md)
+### [Code of Conduct](https://github.com/facebook/react-native/blob/HEAD/CODE_OF_CONDUCT.md)
 
-As a reminder, all contributors are expected to adhere to the [Code of Conduct](https://github.com/facebook/react/blob/master/CODE_OF_CONDUCT.md).
+As a reminder, all contributors are expected to adhere to the [Code of Conduct](https://github.com/facebook/react-native/blob/HEAD/CODE_OF_CONDUCT.md).
 
 ## Ways to Contribute
 
@@ -18,7 +18,7 @@ If you are eager to start contributing code right away, we have a list of [good
 
 There are other ways you can contribute without writing a single line of code. Here are a few things you can do to help out:
 
-1. **Replying and handling open issues.** We get a lot of issues every day, and some of them may lack necessary information. You can help out by guiding people through the process of filling out the issue template, asking for clarifying information, or pointing them to existing issues that match their description of the problem. We cover more about this process in the [Issue Triage wiki](https://github.com/facebook/react-native/wiki/Issues#triage).
+1. **Replying and handling open issues.** We get a lot of issues every day, and some of them may lack necessary information. You can help out by guiding people through the process of filling out the issue template, asking for clarifying information, or pointing them to existing issues that match their description of the problem. We cover more about this process in the [Issue Triage wiki](https://github.com/facebook/react-native/wiki/Triaging-GitHub-Issues).
 2. **Reviewing pull requests for the docs.** Reviewing [documentation updates](https://github.com/facebook/react-native-website/pulls) can be as simple as checking for spelling and grammar. If you encounter situations that can be explained better in the docs, click **Edit** at the top of most docs pages to get started with your own contribution.
 3. **Help people write test plans.** Some pull requests sent to the main repository may lack a proper test plan. These help reviewers understand how the change was tested, and can speed up the time it takes for a contribution to be accepted.
 
@@ -30,8 +30,8 @@ We use GitHub issues and pull requests to keep track of bug reports and contribu
 
 You can learn more about the contribution process in the following documents:
 
-* [Issues](https://github.com/facebook/react-native/wiki/Issues)
-* [Pull Requests](https://github.com/facebook/react-native/wiki/Pull-Requests)
+* [Issues](https://github.com/facebook/react-native/wiki/Triaging-GitHub-Issues)
+* [Pull Requests](https://github.com/facebook/react-native/wiki/Managing-Pull-Requests)
 
 We also have a thriving community of contributors who would be happy to help you get set up. You can reach out to us through [@ReactNative](http://twitter.com/reactnative) (the React Native team) and [@ReactNativeComm](http://twitter.com/reactnativecomm) (the React Native Community organization).
 
@@ -42,7 +42,7 @@ The main repository, <https://github.com/facebook/react-native>, contains the Re
 There are a few other repositories you might want to familiarize yourself with:
 
 * **React Native website** which contains the source code for the website, including the documentation, located at <https://github.com/facebook/react-native-website>
-* **Releases** are coordinated through the <https://github.com/react-native-community/react-native-releases> repository. This includes important documents such as the Changelog.
+* **Releases** are coordinated through the <https://github.com/react-native-community/releases> repository. This includes important documents such as the Changelog.
 * **Discussions** about the future of React Native take place in the <https://github.com/react-native-community/discussions-and-proposals> repository.
 * **High-quality plugins** for React Native can be found throughout the [React Native Community GitHub Organization](http://github.com/react-native-community/).
 
@@ -50,7 +50,7 @@ Browsing through these repositories should provide some insight into how the Rea
 
 ## GitHub Issues
 
-We use GitHub issues to track bugs exclusively. We have documented our issue handling processes in the [Issues wiki](https://github.com/facebook/react-native/wiki/Issues).
+We use GitHub issues to track bugs exclusively. We have documented our issue handling processes in the [Issues wiki](https://github.com/facebook/react-native/wiki/Triaging-GitHub-Issues).
 
 ### Security Bugs
 
@@ -64,11 +64,11 @@ If you are adding new functionality or introducing a change in behavior, we will
 
 ### Contributing to the Blog
 
-The React Native blog is generated [from the Markdown sources for the blog](https://github.com/facebook/react-native-website/tree/master/website/blog).
+The React Native blog is generated [from the Markdown sources for the blog](https://github.com/facebook/react-native-website/tree/HEAD/website/blog).
 
 Please open an issue in the https://github.com/facebook/react-native-website repository or tag us on [@ReactNative on Twitter](http://twitter.com/reactnative) and get the go-ahead from a maintainer before writing an article intended for the React Native blog. In most cases, you might want to share your article on your own blog or writing medium instead. It's worth asking, though, in case we find your article is a good fit for the blog.
 
-We recommend referring to the [CONTRIBUTING](https://github.com/facebook/react-native-website/blob/master/CONTRIBUTING.md) document for the `react-native-website` repository to learn more about contributing to the website in general.
+We recommend referring to the [CONTRIBUTING](https://github.com/facebook/react-native-website/blob/HEAD/CONTRIBUTING.md) document for the `react-native-website` repository to learn more about contributing to the website in general.
 
 ## Contributing Code
 
@@ -76,7 +76,7 @@ Code-level contributions to React Native generally come in the form of [pull req
 
 The process of proposing a change to React Native can be summarized as follows:
 
-1. Fork the React Native repository and create your branch from `master`.
+1. Fork the React Native repository and create your branch from `main`.
 2. Make the desired changes to React Native sources. Use the `packages/rn-tester` app to test them out.
 3. If you've added code that should be tested, add tests.
 4. If you've changed APIs, update the documentation, which lives in [another repo](https://github.com/facebook/react-native-website/).
@@ -86,17 +86,18 @@ The process of proposing a change to React Native can be summarized as follows:
 8. Create a pull request to the React Native repository.
 9. Review and address comments on your pull request.
     1. A bot may comment with suggestions. Generally we ask you to resolve these first before a maintainer will review your code.
+    2. If changes are requested and addressed, please [request review](https://docs.github.com/en/github/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/requesting-a-pull-request-review) to notify reviewers to take another look.
 10. If you haven't already, please complete the [Contributor License Agreement](https://github.com/facebook/react-native/wiki/Contributor-License-Agreement) ("CLA"). **[Complete your CLA here.](https://code.facebook.com/cla)**
 
 If all goes well, your pull request will be merged. If it is not merged, maintainers will do their best to explain the reason why.
 
 ### Step-by-step Guide
 
-Whenever you are ready to contribute code, check out our [step-by-step guide to sending your first pull request](https://github.com/facebook/react-native/wiki/Pull-Requests#getting-ready-to-submit-your-first-pull-request), or read the [How to Contribute Code](https://github.com/facebook/react-native/wiki/How-to-Contribute) wiki for more details.
+Whenever you are ready to contribute code, check out our [step-by-step guide to sending your first pull request](https://github.com/facebook/react-native/wiki/How-to-Open-a-Pull-Request), or read the [How to Contribute Code](https://github.com/facebook/react-native/wiki/How-to-Contribute-Code) wiki for more details.
 
 ### Tests
 
-Tests help us prevent regressions from being introduced to the codebase. The GitHub repository is continuously tested using Circle and Appveyor, the results of which are available through the Checks functionality on [commits](https://github.com/facebook/react-native/commits/master) and pull requests. You can learn more about running and writing tests in the [Tests wiki](http://github.com/facebook/react-native/wiki/Tests).
+Tests help us prevent regressions from being introduced to the codebase. The GitHub repository is continuously tested using Circle and Appveyor, the results of which are available through the Checks functionality on [commits](https://github.com/facebook/react-native/commits/HEAD) and pull requests. You can learn more about running and writing tests in the [Tests wiki](http://github.com/facebook/react-native/wiki/Tests).
 
 ## Community Contributions
 

IntegrationTests/AccessibilityManagerTest.js

@@ -8,8 +8,6 @@
  * @flow strict-local
  */
 
-'use strict';
-
 import invariant from 'invariant';
 import NativeAccessibilityManager from 'react-native/Libraries/Components/AccessibilityInfo/NativeAccessibilityManager';
 import {DeviceEventEmitter, NativeModules, View} from 'react-native';

IntegrationTests/AsyncStorageTest.js

@@ -16,6 +16,7 @@ const {AsyncStorage, Text, View, StyleSheet} = ReactNative;
 const {TestModule} = ReactNative.NativeModules;
 
 const deepDiffer = require('react-native/Libraries/Utilities/differ/deepDiffer');
+const nullthrows = require('nullthrows');
 
 const DEBUG = false;
 
@@ -43,15 +44,32 @@ function expectTrue(condition: boolean, message: string) {
   }
 }
 
+// Type-safe wrapper around JSON.stringify
+function stringify(
+  value:
+    | void
+    | null
+    | string
+    | number
+    | boolean
+    | {...}
+    | $ReadOnlyArray<mixed>,
+): string {
+  if (typeof value === 'undefined') {
+    return 'undefined';
+  }
+  return JSON.stringify(value);
+}
+
 function expectEqual(lhs, rhs, testname: string) {
   expectTrue(
     !deepDiffer(lhs, rhs),
     'Error in test ' +
       testname +
       ': expected\n' +
-      JSON.stringify(rhs) +
+      stringify(rhs) +
       '\ngot\n' +
-      JSON.stringify(lhs),
+      stringify(lhs),
   );
 }
 
@@ -61,7 +79,7 @@ function expectAsyncNoError(place, err) {
   }
   expectTrue(
     err === null,
-    'Unexpected error in ' + place + ': ' + JSON.stringify(err),
+    'Unexpected error in ' + place + ': ' + stringify(err),
   );
 }
 
@@ -71,7 +89,7 @@ function testSetAndGet() {
     AsyncStorage.getItem(KEY_1, (err2, result) => {
       expectAsyncNoError('testSetAndGet/getItem', err2);
       expectEqual(result, VAL_1, 'testSetAndGet setItem');
-      updateMessage('get(key_1) correctly returned ' + result);
+      updateMessage('get(key_1) correctly returned ' + String(result));
       runTestCase('should get null for missing key', testMissingGet);
     });
   });
@@ -81,7 +99,7 @@ function testMissingGet() {
   AsyncStorage.getItem(KEY_2, (err, result) => {
     expectAsyncNoError('testMissingGet/setItem', err);
     expectEqual(result, null, 'testMissingGet');
-    updateMessage('missing get(key_2) correctly returned ' + result);
+    updateMessage('missing get(key_2) correctly returned ' + String(result));
     runTestCase('check set twice results in a single key', testSetTwice);
   });
 }
@@ -105,8 +123,9 @@ function testRemoveItem() {
       AsyncStorage.getAllKeys((err, result) => {
         expectAsyncNoError('testRemoveItem/getAllKeys', err);
         expectTrue(
-          result.indexOf(KEY_1) >= 0 && result.indexOf(KEY_2) >= 0,
-          'Missing KEY_1 or KEY_2 in ' + '(' + result + ')',
+          nullthrows(result).indexOf(KEY_1) >= 0 &&
+            nullthrows(result).indexOf(KEY_2) >= 0,
+          'Missing KEY_1 or KEY_2 in ' + '(' + nullthrows(result).join() + ')',
         );
         updateMessage('testRemoveItem - add two items');
         AsyncStorage.removeItem(KEY_1, err2 => {
@@ -123,8 +142,8 @@ function testRemoveItem() {
             AsyncStorage.getAllKeys((err4, result3) => {
               expectAsyncNoError('testRemoveItem/getAllKeys', err4);
               expectTrue(
-                result3.indexOf(KEY_1) === -1,
-                'Unexpected: KEY_1 present in ' + result3,
+                nullthrows(result3).indexOf(KEY_1) === -1,
+                'Unexpected: KEY_1 present in ' + nullthrows(result3).join(),
               );
               updateMessage('proper length returned.');
               runTestCase('should merge values', testMerge);
@@ -137,13 +156,17 @@ function testRemoveItem() {
 }
 
 function testMerge() {
-  AsyncStorage.setItem(KEY_MERGE, JSON.stringify(VAL_MERGE_1), err1 => {
+  AsyncStorage.setItem(KEY_MERGE, stringify(VAL_MERGE_1), err1 => {
     expectAsyncNoError('testMerge/setItem', err1);
-    AsyncStorage.mergeItem(KEY_MERGE, JSON.stringify(VAL_MERGE_2), err2 => {
+    AsyncStorage.mergeItem(KEY_MERGE, stringify(VAL_MERGE_2), err2 => {
       expectAsyncNoError('testMerge/mergeItem', err2);
       AsyncStorage.getItem(KEY_MERGE, (err3, result) => {
         expectAsyncNoError('testMerge/setItem', err3);
-        expectEqual(JSON.parse(result), VAL_MERGE_EXPECT, 'testMerge');
+        expectEqual(
+          JSON.parse(nullthrows(result)),
+          VAL_MERGE_EXPECT,
+          'testMerge',
+        );
         updateMessage('objects deeply merged\nDone!');
         runTestCase('multi set and get', testOptimizedMultiGet);
       });
@@ -165,8 +188,7 @@ function testOptimizedMultiGet() {
         expectAsyncNoError(`${i} testOptimizedMultiGet/multiGet`, err2);
         expectEqual(result, batch, `${i} testOptimizedMultiGet multiGet`);
         updateMessage(
-          'multiGet([key_1, key_2]) correctly returned ' +
-            JSON.stringify(result),
+          'multiGet([key_1, key_2]) correctly returned ' + stringify(result),
         );
         done();
       });
@@ -196,9 +218,10 @@ class AsyncStorageTest extends React.Component<{...}, $FlowFixMeState> {
     return (
       <View style={styles.container}>
         <Text>
-          {/* $FlowFixMe(>=0.54.0 site=react_native_fb,react_native_oss) This
-           * comment suppresses an error found when Flow v0.54 was deployed.
-           * To see the error delete this comment and run Flow. */
+          {/* $FlowFixMe[incompatible-type] (>=0.54.0 site=react_native_fb,react_
+           * native_oss) This comment suppresses an error found when Flow v0.54
+           * was deployed. To see the error delete this comment and run Flow.
+           */
           this.constructor.displayName + ': '}
           {this.state.done ? 'Done' : 'Testing...'}
           {'\n\n' + this.state.messages}

IntegrationTests/BUCK

@@ -0,0 +1,30 @@
+load("@fbsource//tools/build_defs:js_glob.bzl", "js_glob")
+load("@fbsource//tools/build_defs/oss:metro_defs.bzl", "rn_library")
+
+# This file was generated by running
+# js1 build buckfiles
+
+rn_library(
+    name = "IntegrationTests",
+    srcs = js_glob(
+        [
+            "**/*",
+        ],
+        excludes = [
+            "**/__*__/**",
+            "**/*.command",
+            "**/*.md",
+            "websocket_integration_test_server.js",
+        ],
+    ),
+    labels = ["supermodule:xplat/default/public.react_native.tests"],
+    skip_processors = True,
+    visibility = ["PUBLIC"],
+    deps = [
+        "//xplat/js:node_modules__invariant",
+        "//xplat/js:node_modules__nullthrows",
+        "//xplat/js/RKJSModules/vendor/react:react",
+        "//xplat/js/react-native-github:react-native",
+        "//xplat/js/react-native-github/packages/assets:assets",
+    ],
+)

IntegrationTests/GlobalEvalWithSourceUrlTest.js

@@ -10,7 +10,7 @@
 
 'use strict';
 
-import type {ExtendedError} from 'react-native/Libraries/Core/Devtools/parseErrorStack';
+import type {ExtendedError} from 'react-native/Libraries/Core/ExtendedError';
 
 const React = require('react');
 const ReactNative = require('react-native');

IntegrationTests/ImageCachePolicyTest.js

@@ -64,7 +64,7 @@ class ImageCachePolicyTest extends React.Component<Props, $FlowFixMeState> {
         <Image
           source={{
             uri:
-              'https://raw.githubusercontent.com/facebook/react-native/master/Libraries/NewAppScreen/components/logo.png?cacheBust=notinCache' +
+              'https://raw.githubusercontent.com/facebook/react-native/HEAD/Libraries/NewAppScreen/components/logo.png?cacheBust=notinCache' +
               Date.now(),
             cache: 'only-if-cached',
           }}
@@ -75,7 +75,7 @@ class ImageCachePolicyTest extends React.Component<Props, $FlowFixMeState> {
         <Image
           source={{
             uri:
-              'https://raw.githubusercontent.com/facebook/react-native/master/Libraries/NewAppScreen/components/logo.png?cacheBust=notinCache' +
+              'https://raw.githubusercontent.com/facebook/react-native/HEAD/Libraries/NewAppScreen/components/logo.png?cacheBust=notinCache' +
               Date.now(),
             cache: 'default',
           }}
@@ -86,7 +86,7 @@ class ImageCachePolicyTest extends React.Component<Props, $FlowFixMeState> {
         <Image
           source={{
             uri:
-              'https://raw.githubusercontent.com/facebook/react-native/master/Libraries/NewAppScreen/components/logo.png?cacheBust=notinCache' +
+              'https://raw.githubusercontent.com/facebook/react-native/HEAD/Libraries/NewAppScreen/components/logo.png?cacheBust=notinCache' +
               Date.now(),
             cache: 'reload',
           }}
@@ -97,7 +97,7 @@ class ImageCachePolicyTest extends React.Component<Props, $FlowFixMeState> {
         <Image
           source={{
             uri:
-              'https://raw.githubusercontent.com/facebook/react-native/master/Libraries/NewAppScreen/components/logo.png?cacheBust=notinCache' +
+              'https://raw.githubusercontent.com/facebook/react-native/HEAD/Libraries/NewAppScreen/components/logo.png?cacheBust=notinCache' +
               Date.now(),
             cache: 'force-cache',
           }}

IntegrationTests/IntegrationTestHarnessTest.js

@@ -56,9 +56,10 @@ class IntegrationTestHarnessTest extends React.Component<Props, State> {
     return (
       <View style={styles.container}>
         <Text>
-          {/* $FlowFixMe(>=0.54.0 site=react_native_fb,react_native_oss) This
-           * comment suppresses an error found when Flow v0.54 was deployed.
-           * To see the error delete this comment and run Flow. */
+          {/* $FlowFixMe[incompatible-type] (>=0.54.0 site=react_native_fb,react_
+           * native_oss) This comment suppresses an error found when Flow v0.54
+           * was deployed. To see the error delete this comment and run Flow.
+           */
           this.constructor.displayName + ': '}
           {this.state.done ? 'Done' : 'Testing...'}
         </Text>

IntegrationTests/IntegrationTestsApp.js

@@ -40,9 +40,9 @@ const TESTS = [
 ];
 
 TESTS.forEach(
-  /* $FlowFixMe(>=0.54.0 site=react_native_fb,react_native_oss) This comment
-   * suppresses an error found when Flow v0.54 was deployed. To see the error
-   * delete this comment and run Flow. */
+  /* $FlowFixMe[incompatible-call] (>=0.54.0 site=react_native_fb,react_native_
+   * oss) This comment suppresses an error found when Flow v0.54 was deployed.
+   * To see the error delete this comment and run Flow. */
   test => AppRegistry.registerComponent(test.displayName, () => test),
 );
 
@@ -60,9 +60,10 @@ class IntegrationTestsApp extends React.Component<{...}, $FlowFixMeState> {
     if (this.state.test) {
       return (
         <ScrollView>
-          {/* $FlowFixMe(>=0.53.0 site=react_native_fb,react_native_oss) This
-           * comment suppresses an error when upgrading Flow's support for
-           * React. To see the error delete this comment and run Flow. */}
+          {/* $FlowFixMe[type-as-value] (>=0.53.0 site=react_native_fb,react_
+           * native_oss) This comment suppresses an error when upgrading
+           * Flow's support for React. To see the error delete this comment
+           * and run Flow. */}
           <this.state.test />
         </ScrollView>
       );
@@ -79,9 +80,10 @@ class IntegrationTestsApp extends React.Component<{...}, $FlowFixMeState> {
           {TESTS.map(test => [
             <TouchableOpacity
               onPress={() => this.setState({test})}
-              /* $FlowFixMe(>=0.115.0 site=react_native_fb) This comment
-               * suppresses an error found when Flow v0.115 was deployed. To
-               * see the error, delete this comment and run Flow. */
+              /* $FlowFixMe[incompatible-type] (>=0.115.0 site=react_native_fb)
+               * This comment suppresses an error found when Flow v0.115 was
+               * deployed. To see the error, delete this comment and run Flow.
+               */
               style={styles.row}>
               <Text style={styles.testName}>{test.displayName}</Text>
             </TouchableOpacity>,

IntegrationTests/LayoutEventsTest.js

@@ -197,4 +197,5 @@ const styles = StyleSheet.create({
   },
 });
 
+LayoutEventsTest.displayName = 'LayoutEventsTest';
 module.exports = LayoutEventsTest;

IntegrationTests/ReactContentSizeUpdateTest.js

@@ -8,8 +8,6 @@
  * @flow strict-local
  */
 
-'use strict';
-
 const RCTNativeAppEventEmitter = require('react-native/Libraries/EventEmitter/RCTNativeAppEventEmitter');
 const React = require('react');
 const ReactNative = require('react-native');

IntegrationTests/SizeFlexibilityUpdateTest.js

@@ -8,8 +8,6 @@
  * @flow strict-local
  */
 
-'use strict';
-
 const RCTNativeAppEventEmitter = require('react-native/Libraries/EventEmitter/RCTNativeAppEventEmitter');
 const React = require('react');
 const ReactNative = require('react-native');

IntegrationTests/TimersTest.js

@@ -97,36 +97,46 @@ class TimersTest extends React.Component<Props, State> {
   }
 
   componentDidMount() {
+    // $FlowFixMe[method-unbinding] added when improving typing for this parameters
     this.setTimeout(this.testSetTimeout0, 1000);
   }
 
   testSetTimeout0() {
+    // $FlowFixMe[method-unbinding] added when improving typing for this parameters
     this.setTimeout(this.testSetTimeout1, 0);
   }
 
   testSetTimeout1() {
+    // $FlowFixMe[method-unbinding] added when improving typing for this parameters
     this.setTimeout(this.testSetTimeout50, 1);
   }
 
   testSetTimeout50() {
+    // $FlowFixMe[method-unbinding] added when improving typing for this parameters
     this.setTimeout(this.testRequestAnimationFrame, 50);
   }
 
   testRequestAnimationFrame() {
+    // $FlowFixMe[method-unbinding] added when improving typing for this parameters
     this.requestAnimationFrame(this.testSetInterval0);
   }
 
   testSetInterval0() {
+    // $FlowFixMe[method-unbinding] added when improving typing for this parameters
     this._nextTest = this.testSetInterval20;
+    // $FlowFixMe[method-unbinding] added when improving typing for this parameters
     this._interval = this.setInterval(this._incrementInterval, 0);
   }
 
   testSetInterval20() {
+    // $FlowFixMe[method-unbinding] added when improving typing for this parameters
     this._nextTest = this.testSetImmediate;
+    // $FlowFixMe[method-unbinding] added when improving typing for this parameters
     this._interval = this.setInterval(this._incrementInterval, 20);
   }
 
   testSetImmediate() {
+    // $FlowFixMe[method-unbinding] added when improving typing for this parameters
     this.setImmediate(this.testClearTimeout0);
   }
 
@@ -139,6 +149,7 @@ class TimersTest extends React.Component<Props, State> {
   testClearTimeout30() {
     const timeout = this.setTimeout(() => this._fail('testClearTimeout30'), 30);
     this.clearTimeout(timeout);
+    // $FlowFixMe[method-unbinding] added when improving typing for this parameters
     this.setTimeout(this.testClearMulti, 50);
   }
 
@@ -156,6 +167,7 @@ class TimersTest extends React.Component<Props, State> {
     fails.forEach(timeout => this.clearTimeout(timeout));
     this.setTimeout(() => this.clearTimeout(delayClear), 20);
 
+    // $FlowFixMe[method-unbinding] added when improving typing for this parameters
     this.setTimeout(this.testOrdering, 50);
   }
 
@@ -191,6 +203,7 @@ class TimersTest extends React.Component<Props, State> {
         ),
       25,
     );
+    // $FlowFixMe[method-unbinding] added when improving typing for this parameters
     this.setTimeout(this.done, 50);
   }
 
@@ -249,6 +262,7 @@ class TimersTest extends React.Component<Props, State> {
         this.clearInterval(this._interval);
         this._interval = null;
       }
+      // $FlowFixMe[method-unbinding]
       this.setState({count: 0}, this._nextTest);
       return;
     }
@@ -267,4 +281,5 @@ const styles = StyleSheet.create({
   },
 });
 
+TimersTest.displayName = 'TimersTest';
 module.exports = TimersTest;

Libraries/ActionSheetIOS/ActionSheetIOS.js

@@ -8,8 +8,6 @@
  * @format
  */
 
-'use strict';
-
 import RCTActionSheetManager from './NativeActionSheetManager';
 
 const invariant = require('invariant');
@@ -33,6 +31,7 @@ const ActionSheetIOS = {
    * - `destructiveButtonIndex` (int or array of ints) - index or indices of destructive buttons in `options`
    * - `title` (string) - a title to show above the action sheet
    * - `message` (string) - a message to show below the title
+   * - `disabledButtonIndices` (array of numbers) - a list of button indices which should be disabled
    *
    * The 'callback' function takes one parameter, the zero-based index
    * of the selected item.
@@ -49,6 +48,7 @@ const ActionSheetIOS = {
       +anchor?: ?number,
       +tintColor?: ColorValue | ProcessedColorValue,
       +userInterfaceStyle?: string,
+      +disabledButtonIndices?: Array<number>,
     |},
     callback: (buttonIndex: number) => void,
   ) {

Libraries/ActionSheetIOS/NativeActionSheetManager.js

@@ -8,8 +8,6 @@
  * @format
  */
 
-'use strict';
-
 import type {TurboModule} from '../TurboModule/RCTExport';
 import * as TurboModuleRegistry from '../TurboModule/TurboModuleRegistry';
 
@@ -25,6 +23,7 @@ export interface Spec extends TurboModule {
       +anchor?: ?number,
       +tintColor?: ?number,
       +userInterfaceStyle?: ?string,
+      +disabledButtonIndices?: Array<number>,
     |},
     callback: (buttonIndex: number) => void,
   ) => void;

Libraries/ActionSheetIOS/React-RCTActionSheet.podspec

@@ -11,7 +11,7 @@ version = package['version']
 source = { :git => 'https://github.com/facebook/react-native.git' }
 if version == '1000.0.0'
   # This is an unpublished version, use the latest commit hash of the react-native repo, which we’re presumably in.
-  source[:commit] = `git rev-parse HEAD`.strip
+  source[:commit] = `git rev-parse HEAD`.strip if system("git rev-parse --git-dir > /dev/null 2>&1")
 else
   source[:tag] = "v#{version}"
 end
@@ -24,7 +24,7 @@ Pod::Spec.new do |s|
   s.documentation_url      = "https://reactnative.dev/docs/actionsheetios"
   s.license                = package["license"]
   s.author                 = "Facebook, Inc. and its affiliates"
-  s.platforms              = { :ios => "10.0" }
+  s.platforms              = { :ios => "11.0" }
   s.source                 = source
   s.source_files           = "*.{m}"
   s.preserve_paths         = "package.json", "LICENSE", "LICENSE-docs"

Libraries/Alert/Alert.js

@@ -8,12 +8,8 @@
  * @flow
  */
 
-'use strict';
-
 import Platform from '../Utilities/Platform';
-import NativeDialogManagerAndroid, {
-  type DialogOptions,
-} from '../NativeModules/specs/NativeDialogManagerAndroid';
+import type {DialogOptions} from '../NativeModules/specs/NativeDialogManagerAndroid';
 import RCTAlertManager from './RCTAlertManager';
 
 export type AlertType =
@@ -50,6 +46,8 @@ class Alert {
     if (Platform.OS === 'ios') {
       Alert.prompt(title, message, buttons, 'default');
     } else if (Platform.OS === 'android') {
+      const NativeDialogManagerAndroid = require('../NativeModules/specs/NativeDialogManagerAndroid')
+        .default;
       if (!NativeDialogManagerAndroid) {
         return;
       }

Libraries/Alert/NativeAlertManager.js

@@ -8,8 +8,6 @@
  * @format
  */
 
-'use strict';
-
 import type {TurboModule} from '../TurboModule/RCTExport';
 import * as TurboModuleRegistry from '../TurboModule/TurboModuleRegistry';
 

Libraries/Alert/RCTAlertManager.android.js

@@ -7,8 +7,6 @@
  * @format
  */
 
-'use strict';
-
 import NativeDialogManagerAndroid from '../NativeModules/specs/NativeDialogManagerAndroid';
 
 function emptyCallback() {}

Libraries/Alert/RCTAlertManager.ios.js

@@ -8,8 +8,6 @@
  * @flow strict-local
  */
 
-'use strict';
-
 import NativeAlertManager from './NativeAlertManager';
 import type {Args} from './NativeAlertManager';
 

Libraries/Animated/Animated.js

@@ -8,8 +8,6 @@
  * @format
  */
 
-'use strict';
-
 import Platform from '../Utilities/Platform';
 import typeof AnimatedFlatList from './components/AnimatedFlatList';
 import typeof AnimatedImage from './components/AnimatedImage';

Libraries/Animated/AnimatedEvent.js

@@ -74,6 +74,7 @@ function attachNativeEvent(
           NativeAnimatedHelper.API.removeAnimatedEventFromView(
             viewTag,
             eventName,
+            // $FlowFixMe[incompatible-call]
             mapping.animatedValueTag,
           );
         });
@@ -210,9 +211,9 @@ class AnimatedEvent {
           }
         } else if (typeof recMapping === 'object') {
           for (const mappingKey in recMapping) {
-            /* $FlowFixMe(>=0.120.0) This comment suppresses an error found
-             * when Flow v0.120 was deployed. To see the error, delete this
-             * comment and run Flow. */
+            /* $FlowFixMe[prop-missing] (>=0.120.0) This comment suppresses an
+             * error found when Flow v0.120 was deployed. To see the error,
+             * delete this comment and run Flow. */
             traverse(recMapping[mappingKey], recEvt[mappingKey], mappingKey);
           }
         }

Libraries/Animated/AnimatedImplementation.js

@@ -706,6 +706,4 @@ module.exports = {
    * Expose Event class, so it can be used as a type for type checkers.
    */
   Event: AnimatedEvent,
-
-  __PropsOnlyForTests: AnimatedProps,
 };

Libraries/Animated/AnimatedMock.js

@@ -14,7 +14,6 @@ const {AnimatedEvent, attachNativeEvent} = require('./AnimatedEvent');
 const AnimatedImplementation = require('./AnimatedImplementation');
 const AnimatedInterpolation = require('./nodes/AnimatedInterpolation');
 const AnimatedNode = require('./nodes/AnimatedNode');
-const AnimatedProps = require('./nodes/AnimatedProps');
 const AnimatedValue = require('./nodes/AnimatedValue');
 const AnimatedValueXY = require('./nodes/AnimatedValueXY');
 
@@ -24,7 +23,6 @@ import type {EndCallback} from './animations/Animation';
 import type {TimingAnimationConfig} from './animations/TimingAnimation';
 import type {DecayAnimationConfig} from './animations/DecayAnimation';
 import type {SpringAnimationConfig} from './animations/SpringAnimation';
-import type {Mapping, EventConfig} from './AnimatedEvent';
 
 /**
  * Animations are a source of flakiness in snapshot testing. This mock replaces
@@ -123,10 +121,6 @@ const loop = function(
   return emptyAnimation;
 };
 
-const event = function(argMapping: Array<?Mapping>, config: EventConfig): any {
-  return null;
-};
-
 module.exports = {
   Value: AnimatedValue,
   ValueXY: AnimatedValueXY,
@@ -146,11 +140,10 @@ module.exports = {
   parallel,
   stagger,
   loop,
-  event,
+  event: AnimatedImplementation.event,
   createAnimatedComponent,
   attachNativeEvent,
   forkEvent: AnimatedImplementation.forkEvent,
   unforkEvent: AnimatedImplementation.unforkEvent,
   Event: AnimatedEvent,
-  __PropsOnlyForTests: AnimatedProps,
 };

Libraries/Animated/AnimatedWeb.js

@@ -14,10 +14,13 @@ const AnimatedImplementation = require('./AnimatedImplementation');
 
 module.exports = {
   ...AnimatedImplementation,
-  // $FlowFixMe createAnimatedComponent expects to receive types. Plain intrinsic components can't be typed like this
+  /* $FlowFixMe[incompatible-call] createAnimatedComponent expects to receive
+   * types. Plain intrinsic components can't be typed like this */
   div: (AnimatedImplementation.createAnimatedComponent('div'): $FlowFixMe),
-  // $FlowFixMe createAnimatedComponent expects to receive types. Plain intrinsic components can't be typed like this
+  /* $FlowFixMe[incompatible-call] createAnimatedComponent expects to receive
+   * types. Plain intrinsic components can't be typed like this */
   span: (AnimatedImplementation.createAnimatedComponent('span'): $FlowFixMe),
-  // $FlowFixMe createAnimatedComponent expects to receive types. Plain intrinsic components can't be typed like this
+  /* $FlowFixMe[incompatible-call] createAnimatedComponent expects to receive
+   * types. Plain intrinsic components can't be typed like this */
   img: (AnimatedImplementation.createAnimatedComponent('img'): $FlowFixMe),
 };

Libraries/Animated/NativeAnimatedHelper.js

@@ -8,8 +8,6 @@
  * @format
  */
 
-'use strict';
-
 import NativeAnimatedNonTurboModule from './NativeAnimatedModule';
 import NativeAnimatedTurboModule from './NativeAnimatedTurboModule';
 import NativeEventEmitter from '../EventEmitter/NativeEventEmitter';
@@ -49,9 +47,9 @@ const API = {
     saveValueCallback: (value: number) => void,
   ): void {
     invariant(NativeAnimatedModule, 'Native animated module is not available');
-    if (NativeAnimatedModule.getValue) {
+    API.queueOperation(() => {
       NativeAnimatedModule.getValue(tag, saveValueCallback);
-    }
+    });
   },
   setWaitingForIdentifier: function(id: string): void {
     waitingForQueuedOperations.add(id);
@@ -395,10 +393,15 @@ module.exports = {
   assertNativeAnimatedModule,
   shouldUseNativeDriver,
   transformDataType,
-  // $FlowExpectedError - unsafe getter lint suppresion
+  // $FlowExpectedError[unsafe-getters-setters] - unsafe getter lint suppresion
+  // $FlowExpectedError[missing-type-arg] - unsafe getter lint suppresion
   get nativeEventEmitter(): NativeEventEmitter {
     if (!nativeEventEmitter) {
-      nativeEventEmitter = new NativeEventEmitter(NativeAnimatedModule);
+      nativeEventEmitter = new NativeEventEmitter(
+        // T88715063: NativeEventEmitter only used this parameter on iOS. Now it uses it on all platforms, so this code was modified automatically to preserve its behavior
+        // If you want to use the native module on other platforms, please remove this condition and test its behavior
+        Platform.OS !== 'ios' ? null : NativeAnimatedModule,
+      );
     }
     return nativeEventEmitter;
   },

Libraries/Animated/NativeAnimatedModule.js

@@ -8,8 +8,6 @@
  * @format
  */
 
-'use strict';
-
 import type {TurboModule} from '../TurboModule/RCTExport';
 import * as TurboModuleRegistry from '../TurboModule/TurboModuleRegistry';
 

Libraries/Animated/NativeAnimatedTurboModule.js

@@ -8,8 +8,6 @@
  * @format
  */
 
-'use strict';
-
 import type {TurboModule} from '../TurboModule/RCTExport';
 import * as TurboModuleRegistry from '../TurboModule/TurboModuleRegistry';
 

Libraries/Animated/__tests__/Animated-test.js

@@ -8,8 +8,7 @@
  * @emails oncall+react_native
  */
 
-'use strict';
-
+import AnimatedProps from '../nodes/AnimatedProps';
 import TestRenderer from 'react-test-renderer';
 import * as React from 'react';
 
@@ -23,6 +22,7 @@ jest.mock('../../BatchedBridge/NativeModules', () => ({
 }));
 
 let Animated = require('../Animated');
+
 describe('Animated tests', () => {
   beforeEach(() => {
     jest.resetModules();
@@ -34,7 +34,7 @@ describe('Animated tests', () => {
 
       const callback = jest.fn();
 
-      const node = new Animated.__PropsOnlyForTests(
+      const node = new AnimatedProps(
         {
           style: {
             backgroundColor: 'red',
@@ -57,8 +57,6 @@ describe('Animated tests', () => {
         callback,
       );
 
-      expect(anim.__getChildren().length).toBe(3);
-
       expect(node.__getValue()).toEqual({
         style: {
           backgroundColor: 'red',
@@ -71,6 +69,12 @@ describe('Animated tests', () => {
         },
       });
 
+      expect(anim.__getChildren().length).toBe(0);
+
+      node.__attach();
+
+      expect(anim.__getChildren().length).toBe(3);
+
       anim.setValue(0.5);
 
       expect(callback).toBeCalled();
@@ -788,7 +792,7 @@ describe('Animated tests', () => {
 
       const callback = jest.fn();
 
-      const node = new Animated.__PropsOnlyForTests(
+      const node = new AnimatedProps(
         {
           style: {
             opacity: vec.x.interpolate({
@@ -811,6 +815,10 @@ describe('Animated tests', () => {
         },
       });
 
+      node.__attach();
+
+      expect(callback.mock.calls.length).toBe(0);
+
       vec.setValue({x: 42, y: 1492});
 
       expect(callback.mock.calls.length).toBe(2); // once each for x, y
@@ -892,7 +900,7 @@ describe('Animated tests', () => {
       const value3 = new Animated.Value(0);
       const value4 = Animated.add(value3, Animated.multiply(value1, value2));
       const callback = jest.fn();
-      const view = new Animated.__PropsOnlyForTests(
+      const view = new AnimatedProps(
         {
           style: {
             transform: [
@@ -904,6 +912,7 @@ describe('Animated tests', () => {
         },
         callback,
       );
+      view.__attach();
       const listener = jest.fn();
       const id = value4.addListener(listener);
       value3.setValue(137);

Libraries/Animated/__tests__/AnimatedNative-test.js

@@ -8,8 +8,6 @@
  * @emails oncall+react_native
  */
 
-'use strict';
-
 jest
   .clearAllMocks()
   .mock('../../BatchedBridge/NativeModules', () => ({

Libraries/Animated/__tests__/createAnimatedComponentInjection-test.js

@@ -0,0 +1,67 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails oncall+react_native
+ * @flow strict-local
+ * @format
+ */
+
+'use strict';
+
+const createAnimatedComponent = require('../createAnimatedComponent');
+const createAnimatedComponentInjection = require('../createAnimatedComponentInjection');
+const React = require('react');
+
+function injected<TProps: {...}, TInstance>(
+  Component: React.AbstractComponent<TProps, TInstance>,
+): React.AbstractComponent<TProps, TInstance> {
+  return createAnimatedComponent(Component);
+}
+
+beforeEach(() => {
+  jest.resetModules();
+  jest.resetAllMocks();
+});
+
+test('does nothing without injection', () => {
+  expect(typeof createAnimatedComponent).toBe('function');
+  expect(createAnimatedComponent).not.toBe(injected);
+});
+
+test('injection overrides `createAnimatedComponent`', () => {
+  createAnimatedComponentInjection.inject(injected);
+
+  expect(createAnimatedComponent).toBe(injected);
+});
+
+test('injection errors if called too late', () => {
+  jest.spyOn(console, 'error').mockReturnValue(undefined);
+
+  // Causes `createAnimatedComponent` to be initialized.
+  createAnimatedComponent;
+
+  createAnimatedComponentInjection.inject(injected);
+
+  expect(createAnimatedComponent).not.toBe(injected);
+  expect(console.error).toBeCalledWith(
+    'createAnimatedComponentInjection: Must be called before `createAnimatedComponent`.',
+  );
+});
+
+test('injection errors if called more than once', () => {
+  jest.spyOn(console, 'error').mockReturnValue(undefined);
+
+  createAnimatedComponentInjection.inject(injected);
+
+  expect(createAnimatedComponent).toBe(injected);
+  expect(console.error).not.toBeCalled();
+
+  createAnimatedComponentInjection.inject(injected);
+
+  expect(console.error).toBeCalledWith(
+    'createAnimatedComponentInjection: Cannot be called more than once.',
+  );
+});

Libraries/Animated/animations/Animation.js

@@ -71,6 +71,7 @@ class Animation {
         this.__nativeId,
         animatedValue.__getNativeTag(),
         this.__getNativeAnimationConfig(),
+        // $FlowFixMe[method-unbinding] added when improving typing for this parameters
         this.__debouncedOnEnd.bind(this),
       );
     } catch (e) {

Libraries/Animated/animations/DecayAnimation.js

@@ -84,6 +84,7 @@ class DecayAnimation extends Animation {
     if (this._useNativeDriver) {
       this.__startNativeAnimation(animatedValue);
     } else {
+      // $FlowFixMe[method-unbinding] added when improving typing for this parameters
       this._animationFrame = requestAnimationFrame(this.onUpdate.bind(this));
     }
   }
@@ -105,6 +106,7 @@ class DecayAnimation extends Animation {
 
     this._lastValue = value;
     if (this.__active) {
+      // $FlowFixMe[method-unbinding] added when improving typing for this parameters
       this._animationFrame = requestAnimationFrame(this.onUpdate.bind(this));
     }
   }

Libraries/Animated/animations/SpringAnimation.js

@@ -344,6 +344,7 @@ class SpringAnimation extends Animation {
       this.__debouncedOnEnd({finished: true});
       return;
     }
+    // $FlowFixMe[method-unbinding] added when improving typing for this parameters
     this._animationFrame = requestAnimationFrame(this.onUpdate.bind(this));
   }
 

Libraries/Animated/animations/TimingAnimation.js

@@ -48,6 +48,7 @@ let _easeInOut;
 function easeInOut() {
   if (!_easeInOut) {
     const Easing = require('../Easing');
+    // $FlowFixMe[method-unbinding]
     _easeInOut = Easing.inOut(Easing.ease);
   }
   return _easeInOut;
@@ -117,6 +118,7 @@ class TimingAnimation extends Animation {
           this.__startNativeAnimation(animatedValue);
         } else {
           this._animationFrame = requestAnimationFrame(
+            // $FlowFixMe[method-unbinding] added when improving typing for this parameters
             this.onUpdate.bind(this),
           );
         }
@@ -149,6 +151,7 @@ class TimingAnimation extends Animation {
           (this._toValue - this._fromValue),
     );
     if (this.__active) {
+      // $FlowFixMe[method-unbinding] added when improving typing for this parameters
       this._animationFrame = requestAnimationFrame(this.onUpdate.bind(this));
     }
   }

Libraries/Animated/components/AnimatedFlatList.js

@@ -8,8 +8,6 @@
  * @format
  */
 
-'use strict';
-
 import * as React from 'react';
 
 const FlatList = require('../../Lists/FlatList');

Libraries/Animated/components/AnimatedImage.js

@@ -8,8 +8,6 @@
  * @format
  */
 
-'use strict';
-
 import * as React from 'react';
 
 const Image = require('../../Image/Image');
@@ -17,9 +15,9 @@ const createAnimatedComponent = require('../createAnimatedComponent');
 
 import type {AnimatedComponentType} from '../createAnimatedComponent';
 
-module.exports = (createAnimatedComponent(
-  (Image: $FlowFixMe),
-): AnimatedComponentType<
+module.exports = (createAnimatedComponent((Image: $FlowFixMe), {
+  collapsable: false,
+}): AnimatedComponentType<
   React.ElementConfig<typeof Image>,
   React.ElementRef<typeof Image>,
 >);

Libraries/Animated/components/AnimatedScrollView.js

@@ -8,8 +8,6 @@
  * @format
  */
 
-'use strict';
-
 import * as React from 'react';
 
 const ScrollView = require('../../Components/ScrollView/ScrollView');
@@ -24,9 +22,9 @@ const ScrollViewWithEventThrottle = React.forwardRef((props, ref) => (
   <ScrollView scrollEventThrottle={0.0001} {...props} ref={ref} />
 ));
 
-module.exports = (createAnimatedComponent(
-  ScrollViewWithEventThrottle,
-): AnimatedComponentType<
+module.exports = (createAnimatedComponent(ScrollViewWithEventThrottle, {
+  collapsable: false,
+}): AnimatedComponentType<
   React.ElementConfig<typeof ScrollView>,
   React.ElementRef<typeof ScrollView>,
 >);

Libraries/Animated/components/AnimatedSectionList.js

@@ -8,11 +8,9 @@
  * @format
  */
 
-'use strict';
-
 import * as React from 'react';
 
-const SectionList = require('../../Lists/SectionList');
+import SectionList from '../../Lists/SectionList';
 const createAnimatedComponent = require('../createAnimatedComponent');
 
 import type {AnimatedComponentType} from '../createAnimatedComponent';

Libraries/Animated/components/AnimatedText.js

@@ -8,8 +8,6 @@
  * @format
  */
 
-'use strict';
-
 import * as React from 'react';
 
 const Text = require('../../Text/Text');
@@ -17,9 +15,9 @@ const createAnimatedComponent = require('../createAnimatedComponent');
 
 import type {AnimatedComponentType} from '../createAnimatedComponent';
 
-module.exports = (createAnimatedComponent(
-  (Text: $FlowFixMe),
-): AnimatedComponentType<
+module.exports = (createAnimatedComponent((Text: $FlowFixMe), {
+  collapsable: false,
+}): AnimatedComponentType<
   React.ElementConfig<typeof Text>,
   React.ElementRef<typeof Text>,
 >);

Libraries/Animated/components/AnimatedView.js

@@ -8,8 +8,6 @@
  * @format
  */
 
-'use strict';
-
 import * as React from 'react';
 
 const View = require('../../Components/View/View');
@@ -17,7 +15,9 @@ const createAnimatedComponent = require('../createAnimatedComponent');
 
 import type {AnimatedComponentType} from '../createAnimatedComponent';
 
-module.exports = (createAnimatedComponent(View): AnimatedComponentType<
+module.exports = (createAnimatedComponent(View, {
+  collapsable: true,
+}): AnimatedComponentType<
   React.ElementConfig<typeof View>,
   React.ElementRef<typeof View>,
 >);

Libraries/Animated/createAnimatedComponent.js

@@ -10,6 +10,8 @@
 
 'use strict';
 
+import * as createAnimatedComponentInjection from './createAnimatedComponentInjection';
+
 const View = require('../Components/View/View');
 const {AnimatedEvent} = require('./AnimatedEvent');
 const AnimatedProps = require('./nodes/AnimatedProps');
@@ -37,8 +39,13 @@ export type AnimatedComponentType<
   Instance,
 >;
 
+type AnimatedComponentOptions = {
+  collapsable?: boolean,
+};
+
 function createAnimatedComponent<Props: {+[string]: mixed, ...}, Instance>(
   Component: React.AbstractComponent<Props, Instance>,
+  options?: AnimatedComponentOptions,
 ): AnimatedComponentType<Props, Instance> {
   invariant(
     typeof Component !== 'function' ||
@@ -79,6 +86,11 @@ function createAnimatedComponent<Props: {+[string]: mixed, ...}, Instance>(
     }
 
     _isFabric = (): boolean => {
+      // When called during the first render, `_component` is always null.
+      // Therefore, even if a component is rendered in Fabric, we can't detect
+      // that until ref is set, which happens sometime after the first render.
+      // In cases where this value switching between "false" and "true" on Fabric
+      // causes issues, add an additional check for _component nullity.
       if (this._component == null) {
         return false;
       }
@@ -164,14 +176,11 @@ function createAnimatedComponent<Props: {+[string]: mixed, ...}, Instance>(
     _attachProps(nextProps) {
       const oldPropsAnimated = this._propsAnimated;
 
-      if (nextProps === oldPropsAnimated) {
-        return;
-      }
-
       this._propsAnimated = new AnimatedProps(
         nextProps,
         this._animatedPropsCallback,
       );
+      this._propsAnimated.__attach();
 
       // When you call detach, it removes the element from the parent list
       // of children. If it goes to 0, then the parent also detaches itself
@@ -192,19 +201,6 @@ function createAnimatedComponent<Props: {+[string]: mixed, ...}, Instance>(
       setLocalRef: ref => {
         this._prevComponent = this._component;
         this._component = ref;
-
-        // TODO: Delete this in a future release.
-        if (ref != null && ref.getNode == null) {
-          ref.getNode = () => {
-            console.warn(
-              '%s: Calling `getNode()` on the ref of an Animated component ' +
-                'is no longer necessary. You can now directly use the ref ' +
-                'instead. This method will be removed in a future release.',
-              ref.constructor.name ?? '<<anonymous>>',
-            );
-            return ref;
-          };
-        }
       },
     });
 
@@ -213,23 +209,42 @@ function createAnimatedComponent<Props: {+[string]: mixed, ...}, Instance>(
       const {style: passthruStyle = {}, ...passthruProps} =
         this.props.passthroughAnimatedPropExplicitValues || {};
       const mergedStyle = {...style, ...passthruStyle};
+
+      // On Fabric, we always want to ensure the container Animated View is *not*
+      // flattened.
+      // Because we do not get a host component ref immediately and thus cannot
+      // do a proper Fabric vs non-Fabric detection immediately, we default to assuming
+      // that Fabric *is* enabled until we know otherwise.
+      // Thus, in Fabric, this view will never be flattened. In non-Fabric, the view will
+      // not be flattened during the initial render but may be flattened in the second render
+      // and onwards.
+      const forceNativeIdFabric =
+        (this._component == null &&
+          (options?.collapsable === false || props.collapsable !== true)) ||
+        this._isFabric();
+
+      const forceNativeId =
+        props.collapsable ??
+        (this._propsAnimated.__isNative ||
+          forceNativeIdFabric ||
+          options?.collapsable === false);
+      // The native driver updates views directly through the UI thread so we
+      // have to make sure the view doesn't get optimized away because it cannot
+      // go through the NativeViewHierarchyManager since it operates on the shadow
+      // thread. TODO: T68258846
+      const collapsableProps = forceNativeId
+        ? {
+            nativeID: props.nativeID ?? 'animatedComponent',
+            collapsable: false,
+          }
+        : {};
       return (
         <Component
           {...props}
           {...passthruProps}
+          {...collapsableProps}
           style={mergedStyle}
           ref={this._setComponentRef}
-          nativeID={
-            props.nativeID ??
-            (this._isFabric() ? 'animatedComponent' : undefined)
-          } /* TODO: T68258846. */
-          // The native driver updates views directly through the UI thread so we
-          // have to make sure the view doesn't get optimized away because it cannot
-          // go through the NativeViewHierarchyManager since it operates on the shadow
-          // thread.
-          collapsable={
-            this._propsAnimated.__isNative ? false : props.collapsable
-          }
         />
       );
     }
@@ -270,6 +285,8 @@ function createAnimatedComponent<Props: {+[string]: mixed, ...}, Instance>(
       this._propsAnimated && this._propsAnimated.__detach();
       this._detachNativeEvents();
       this._markUpdateComplete();
+      this._component = null;
+      this._prevComponent = null;
     }
   }
 
@@ -283,4 +300,6 @@ function createAnimatedComponent<Props: {+[string]: mixed, ...}, Instance>(
   });
 }
 
-module.exports = createAnimatedComponent;
+// $FlowIgnore[incompatible-cast] - Will be compatible after refactors.
+module.exports = (createAnimatedComponentInjection.recordAndRetrieve() ??
+  createAnimatedComponent: typeof createAnimatedComponent);

Libraries/Animated/createAnimatedComponentInjection.js

@@ -0,0 +1,48 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+import * as React from 'react';
+
+type createAnimatedComponent = <TProps: {...}, TInstance>(
+  Component: React.AbstractComponent<TProps, TInstance>,
+) => React.AbstractComponent<TProps, TInstance>;
+
+// This can be undefined, null, or the experimental implementation. If this is
+// null, that means `createAnimatedComponent` has already been initialized and
+// it is too late to call `inject`.
+let injected: ?createAnimatedComponent;
+
+/**
+ * Call during bundle initialization to opt-in to new `createAnimatedComponent`.
+ */
+export function inject(newInjected: createAnimatedComponent): void {
+  if (injected !== undefined) {
+    if (__DEV__) {
+      console.error(
+        'createAnimatedComponentInjection: ' +
+          (injected == null
+            ? 'Must be called before `createAnimatedComponent`.'
+            : 'Cannot be called more than once.'),
+      );
+    }
+    return;
+  }
+  injected = newInjected;
+}
+
+/**
+ * Only called by `createAnimatedComponent.js`.
+ */
+export function recordAndRetrieve(): createAnimatedComponent | null {
+  if (injected === undefined) {
+    injected = null;
+  }
+  return injected;
+}

Libraries/Animated/createAnimatedComponent_EXPERIMENTAL.js

@@ -0,0 +1,48 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+import useAnimatedProps from './useAnimatedProps';
+import useMergeRefs from '../Utilities/useMergeRefs';
+import StyleSheet from '../StyleSheet/StyleSheet';
+import * as React from 'react';
+
+/**
+ * Experimental implementation of `createAnimatedComponent` that is intended to
+ * be compatible with concurrent rendering.
+ */
+export default function createAnimatedComponent<TProps: {...}, TInstance>(
+  Component: React.AbstractComponent<TProps, TInstance>,
+): React.AbstractComponent<TProps, TInstance> {
+  return React.forwardRef((props, forwardedRef) => {
+    const [reducedProps, callbackRef] = useAnimatedProps<TProps, TInstance>(
+      props,
+    );
+    const ref = useMergeRefs<TInstance | null>(callbackRef, forwardedRef);
+
+    // Some components require explicit passthrough values for animation
+    // to work properly. For example, if an animated component is
+    // transformed and Pressable, onPress will not work after transform
+    // without these passthrough values.
+    // $FlowFixMe[prop-missing]
+    const {passthroughAnimatedPropExplicitValues, style} = reducedProps;
+    const {style: passthroughStyle, ...passthroughProps} =
+      passthroughAnimatedPropExplicitValues ?? {};
+    const mergedStyle = StyleSheet.compose(style, passthroughStyle);
+
+    return (
+      <Component
+        {...reducedProps}
+        {...passthroughProps}
+        style={mergedStyle}
+        ref={ref}
+      />
+    );
+  });
+}

Libraries/Animated/nodes/AnimatedInterpolation.js

@@ -205,14 +205,12 @@ function createInterpolationFromStringOutputRange(
   //   [200, 250],
   //   [0, 0.5],
   // ]
-  /* $FlowFixMe(>=0.18.0): `outputRange[0].match()` can return `null`. Need to
-   * guard against this possibility.
-   */
+  /* $FlowFixMe[incompatible-use] (>=0.18.0): `outputRange[0].match()` can
+   * return `null`. Need to guard against this possibility. */
   const outputRanges = outputRange[0].match(stringShapeRegex).map(() => []);
   outputRange.forEach(value => {
-    /* $FlowFixMe(>=0.18.0): `value.match()` can return `null`. Need to guard
-     * against this possibility.
-     */
+    /* $FlowFixMe[incompatible-use] (>=0.18.0): `value.match()` can return
+     * `null`. Need to guard against this possibility. */
     value.match(stringShapeRegex).forEach((number, i) => {
       outputRanges[i].push(+number);
     });
@@ -220,8 +218,10 @@ function createInterpolationFromStringOutputRange(
 
   const interpolations = outputRange[0]
     .match(stringShapeRegex)
-    /* $FlowFixMe(>=0.18.0): `outputRange[0].match()` can return `null`. Need
-     * to guard against this possibility. */
+    /* $FlowFixMe[incompatible-use] (>=0.18.0): `outputRange[0].match()` can
+     * return `null`. Need to guard against this possibility. */
+    /* $FlowFixMe[incompatible-call] (>=0.18.0): `outputRange[0].match()` can
+     * return `null`. Need to guard against this possibility. */
     .map((value, i) => {
       return createInterpolation({
         ...config,
@@ -277,12 +277,11 @@ function checkValidInputRange(arr: $ReadOnlyArray<number>) {
   for (let i = 1; i < arr.length; ++i) {
     invariant(
       arr[i] >= arr[i - 1],
-      /* $FlowFixMe(>=0.13.0) - In the addition expression below this comment,
-       * one or both of the operands may be something that doesn't cleanly
-       * convert to a string, like undefined, null, and object, etc. If you really
-       * mean this implicit string conversion, you can do something like
-       * String(myThing)
-       */
+      /* $FlowFixMe[incompatible-type] (>=0.13.0) - In the addition expression
+       * below this comment, one or both of the operands may be something that
+       * doesn't cleanly convert to a string, like undefined, null, and object,
+       * etc. If you really mean this implicit string conversion, you can do
+       * something like String(myThing) */
       'inputRange must be monotonically non-decreasing ' + arr,
     );
   }
@@ -292,12 +291,11 @@ function checkInfiniteRange(name: string, arr: $ReadOnlyArray<number>) {
   invariant(arr.length >= 2, name + ' must have at least 2 elements');
   invariant(
     arr.length !== 2 || arr[0] !== -Infinity || arr[1] !== Infinity,
-    /* $FlowFixMe(>=0.13.0) - In the addition expression below this comment,
-     * one or both of the operands may be something that doesn't cleanly convert
-     * to a string, like undefined, null, and object, etc. If you really mean
-     * this implicit string conversion, you can do something like
-     * String(myThing)
-     */
+    /* $FlowFixMe[incompatible-type] (>=0.13.0) - In the addition expression
+     * below this comment, one or both of the operands may be something that
+     * doesn't cleanly convert to a string, like undefined, null, and object,
+     * etc. If you really mean this implicit string conversion, you can do
+     * something like String(myThing) */
     name + 'cannot be ]-infinity;+infinity[ ' + arr,
   );
 }
@@ -358,8 +356,9 @@ class AnimatedInterpolation extends AnimatedWithChildren {
     return {
       inputRange: this._config.inputRange,
       // Only the `outputRange` can contain strings so we don't need to transform `inputRange` here
-      /* $FlowFixMe(>=0.38.0) - Flow error detected during the deployment of
-       * v0.38.0. To see the error, remove this comment and run flow */
+      /* $FlowFixMe[incompatible-call] (>=0.38.0) - Flow error detected during
+       * the deployment of v0.38.0. To see the error, remove this comment and
+       * run flow */
       outputRange: this.__transformDataType(this._config.outputRange),
       extrapolateLeft:
         this._config.extrapolateLeft || this._config.extrapolate || 'extend',

Libraries/Animated/nodes/AnimatedProps.js

@@ -33,7 +33,6 @@ class AnimatedProps extends AnimatedNode {
     }
     this._props = props;
     this._callback = callback;
-    this.__attach();
   }
 
   __getValue(): Object {

Libraries/Animated/nodes/AnimatedValue.js

@@ -46,9 +46,9 @@ const NativeAnimatedAPI = NativeAnimatedHelper.API;
 function _flush(rootNode: AnimatedValue): void {
   const animatedStyles = new Set();
   function findAnimatedStyles(node) {
-    /* $FlowFixMe(>=0.68.0 site=react_native_fb) This comment suppresses an
-     * error found when Flow v0.68 was deployed. To see the error delete this
-     * comment and run Flow. */
+    /* $FlowFixMe[prop-missing] (>=0.68.0 site=react_native_fb) This comment
+     * suppresses an error found when Flow v0.68 was deployed. To see the error
+     * delete this comment and run Flow. */
     if (typeof node.update === 'function') {
       animatedStyles.add(node);
     } else {
@@ -56,10 +56,21 @@ function _flush(rootNode: AnimatedValue): void {
     }
   }
   findAnimatedStyles(rootNode);
-  /* $FlowFixMe */
+  // $FlowFixMe[prop-missing]
   animatedStyles.forEach(animatedStyle => animatedStyle.update());
 }
 
+/**
+ * Some operations are executed only on batch end, which is _mostly_ scheduled when
+ * Animated component props change. For some of the changes which require immediate execution
+ * (e.g. setValue), we create a separate batch in case none is scheduled.
+ */
+function _executeAsAnimatedBatch(id: string, operation: () => void) {
+  NativeAnimatedAPI.setWaitingForIdentifier(id);
+  operation();
+  NativeAnimatedAPI.unsetWaitingForIdentifier(id);
+}
+
 /**
  * Standard value for driving animations.  One `Animated.Value` can drive
  * multiple properties in a synchronized fashion, but can only be driven by one
@@ -115,7 +126,9 @@ class AnimatedValue extends AnimatedWithChildren {
       !this.__isNative /* don't perform a flush for natively driven values */,
     );
     if (this.__isNative) {
-      NativeAnimatedAPI.setAnimatedNodeValue(this.__getNativeTag(), value);
+      _executeAsAnimatedBatch(this.__getNativeTag().toString(), () => {
+        NativeAnimatedAPI.setAnimatedNodeValue(this.__getNativeTag(), value);
+      });
     }
   }
 
@@ -183,6 +196,12 @@ class AnimatedValue extends AnimatedWithChildren {
   resetAnimation(callback?: ?(value: number) => void): void {
     this.stopAnimation(callback);
     this._value = this._startingValue;
+    if (this.__isNative) {
+      NativeAnimatedAPI.setAnimatedNodeValue(
+        this.__getNativeTag(),
+        this._startingValue,
+      );
+    }
   }
 
   _onAnimatedValueUpdateReceived(value: number): void {

Libraries/Animated/nodes/AnimatedWithChildren.js

@@ -76,6 +76,7 @@ class AnimatedWithChildren extends AnimatedNode {
     super.__callListeners(value);
     if (!this.__isNative) {
       for (const child of this._children) {
+        // $FlowFixMe[method-unbinding] added when improving typing for this parameters
         if (child.__getValue) {
           child.__callListeners(child.__getValue());
         }

Libraries/Animated/useAnimatedProps.js

@@ -0,0 +1,211 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+'use strict';
+
+import AnimatedProps from './nodes/AnimatedProps';
+import {AnimatedEvent} from './AnimatedEvent';
+import useRefEffect from '../Utilities/useRefEffect';
+import NativeAnimatedHelper from './NativeAnimatedHelper';
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useReducer,
+  useRef,
+  useState,
+} from 'react';
+
+type ReducedProps<TProps> = {
+  ...TProps,
+  collapsable: boolean,
+  ...
+};
+type CallbackRef<T> = T => mixed;
+
+let animatedComponentNextId = 1;
+
+export default function useAnimatedProps<TProps: {...}, TInstance>(
+  props: TProps,
+): [ReducedProps<TProps>, CallbackRef<TInstance | null>] {
+  const [, scheduleUpdate] = useReducer(count => count + 1, 0);
+  const onUpdateRef = useRef<?() => void>(null);
+
+  // TODO: Only invalidate `node` if animated props or `style` change. In the
+  // previous implementation, we permitted `style` to override props with the
+  // same name property name as styles, so we can probably continue doing that.
+  // The ordering of other props *should* not matter.
+  const node = useMemo(
+    () => new AnimatedProps(props, () => onUpdateRef.current?.()),
+    [props],
+  );
+  useAnimatedPropsLifecycle(node);
+
+  // TODO: This "effect" does three things:
+  //
+  //   1) Call `setNativeView`.
+  //   2) Update `onUpdateRef`.
+  //   3) Update listeners for `AnimatedEvent` props.
+  //
+  // Ideally, each of these would be separat "effects" so that they are not
+  // unnecessarily re-run when irrelevant dependencies change. For example, we
+  // should be able to hoist all `AnimatedEvent` props and only do #3 if either
+  // the `AnimatedEvent` props change or `instance` changes.
+  //
+  // But there is no way to transparently compose three separate callback refs,
+  // so we just combine them all into one for now.
+  const refEffect = useCallback(
+    instance => {
+      // NOTE: This may be called more often than necessary (e.g. when `props`
+      // changes), but `setNativeView` already optimizes for that.
+      node.setNativeView(instance);
+
+      // NOTE: This callback is only used by the JavaScript animation driver.
+      onUpdateRef.current = () => {
+        if (
+          process.env.NODE_ENV === 'test' ||
+          typeof instance !== 'object' ||
+          typeof instance?.setNativeProps !== 'function' ||
+          isFabricInstance(instance)
+        ) {
+          // Schedule an update for this component to update `reducedProps`,
+          // but do not compute it immediately. If a parent also updated, we
+          // need to merge those new props in before updating.
+          scheduleUpdate();
+        } else if (!node.__isNative) {
+          // $FlowIgnore[not-a-function] - Assume it's still a function.
+          instance.setNativeProps(node.__getAnimatedValue());
+        } else {
+          throw new Error(
+            'Attempting to run JS driven animation on animated node ' +
+              'that has been moved to "native" earlier by starting an ' +
+              'animation with `useNativeDriver: true`',
+          );
+        }
+      };
+
+      const target = getEventTarget(instance);
+      const events = [];
+
+      for (const propName in props) {
+        const propValue = props[propName];
+        if (propValue instanceof AnimatedEvent && propValue.__isNative) {
+          propValue.__attach(target, propName);
+          events.push([propName, propValue]);
+        }
+      }
+
+      return () => {
+        onUpdateRef.current = null;
+
+        for (const [propName, propValue] of events) {
+          propValue.__detach(target, propName);
+        }
+      };
+    },
+    [props, node],
+  );
+  const callbackRef = useRefEffect<TInstance>(refEffect);
+
+  return [reduceAnimatedProps<TProps>(node), callbackRef];
+}
+
+function reduceAnimatedProps<TProps>(
+  node: AnimatedProps,
+): ReducedProps<TProps> {
+  // Force `collapsable` to be false so that the native view is not flattened.
+  // Flattened views cannot be accurately referenced by the native driver.
+  return {
+    ...node.__getValue(),
+    collapsable: false,
+  };
+}
+
+/**
+ * Manages the lifecycle of the supplied `AnimatedProps` by invoking `__attach`
+ * and `__detach`. However, this is more complicated because `AnimatedProps`
+ * uses reference counting to determine when to recursively detach its children
+ * nodes. So in order to optimize this, we avoid detaching until the next attach
+ * unless we are unmounting.
+ */
+function useAnimatedPropsLifecycle(node: AnimatedProps): void {
+  const prevNodeRef = useRef<?AnimatedProps>(null);
+  const isUnmountingRef = useRef<boolean>(false);
+
+  const [animatedComponentId] = useState(
+    () => `${animatedComponentNextId++}:animatedComponent`,
+  );
+
+  useLayoutEffect(() => {
+    NativeAnimatedHelper.API.setWaitingForIdentifier(animatedComponentId);
+  });
+
+  useEffect(() => {
+    NativeAnimatedHelper.API.unsetWaitingForIdentifier(animatedComponentId);
+  });
+
+  useLayoutEffect(() => {
+    isUnmountingRef.current = false;
+    return () => {
+      isUnmountingRef.current = true;
+    };
+  }, []);
+
+  useLayoutEffect(() => {
+    node.__attach();
+    if (prevNodeRef.current != null) {
+      const prevNode = prevNodeRef.current;
+      // TODO: Stop restoring default values (unless `reset` is called).
+      prevNode.__restoreDefaultValues();
+      prevNode.__detach();
+      prevNodeRef.current = null;
+    }
+    return () => {
+      if (isUnmountingRef.current) {
+        // NOTE: Do not restore default values on unmount, see D18197735.
+        node.__detach();
+      } else {
+        prevNodeRef.current = node;
+      }
+    };
+  }, [node]);
+}
+
+function getEventTarget<TInstance>(instance: TInstance): TInstance {
+  return typeof instance === 'object' &&
+    typeof instance?.getScrollableNode === 'function'
+    ? // $FlowFixMe[incompatible-use] - Legacy instance assumptions.
+      instance.getScrollableNode()
+    : instance;
+}
+
+// $FlowFixMe[unclear-type] - Legacy instance assumptions.
+function isFabricInstance(instance: any): boolean {
+  return (
+    hasFabricHandle(instance) ||
+    // Some components have a setNativeProps function but aren't a host component
+    // such as lists like FlatList and SectionList. These should also use
+    // forceUpdate in Fabric since setNativeProps doesn't exist on the underlying
+    // host component. This crazy hack is essentially special casing those lists and
+    // ScrollView itself to use forceUpdate in Fabric.
+    // If these components end up using forwardRef then these hacks can go away
+    // as instance would actually be the underlying host component and the above check
+    // would be sufficient.
+    hasFabricHandle(instance?.getNativeScrollRef?.()) ||
+    hasFabricHandle(instance?.getScrollResponder?.()?.getNativeScrollRef?.())
+  );
+}
+
+// $FlowFixMe[unclear-type] - Legacy instance assumptions.
+function hasFabricHandle(instance: any): boolean {
+  // eslint-disable-next-line dot-notation
+  return instance?.['_internalInstanceHandle']?.stateNode?.canonical != null;
+}

Libraries/AppState/AppState.js

@@ -4,17 +4,30 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
+ * @flow strict-local
  * @format
- * @flow
  */
 
-'use strict';
-
+import {type EventSubscription} from '../vendor/emitter/EventEmitter';
 import NativeEventEmitter from '../EventEmitter/NativeEventEmitter';
 import logError from '../Utilities/logError';
-import EventEmitter from '../vendor/emitter/EventEmitter';
 import NativeAppState from './NativeAppState';
-import invariant from 'invariant';
+import Platform from '../Utilities/Platform';
+
+export type AppStateValues = 'inactive' | 'background' | 'active';
+
+type AppStateEventDefinitions = {
+  change: [AppStateValues],
+  memoryWarning: [],
+  blur: [],
+  focus: [],
+};
+
+type NativeAppStateEventDefinitions = {
+  appStateDidChange: [{app_state: AppStateValues}],
+  appStateFocusChange: [boolean],
+  memoryWarning: [],
+};
 
 /**
  * `AppState` can tell you if the app is in the foreground or background,
@@ -22,44 +35,50 @@ import invariant from 'invariant';
  *
  * See https://reactnative.dev/docs/appstate.html
  */
-class AppState extends NativeEventEmitter {
-  _eventHandlers: Object;
-  _supportedEvents = ['change', 'memoryWarning', 'blur', 'focus'];
-  currentState: ?string;
+class AppState {
+  currentState: ?string = null;
   isAvailable: boolean;
 
+  _emitter: ?NativeEventEmitter<NativeAppStateEventDefinitions>;
+
   constructor() {
-    super(NativeAppState);
+    if (NativeAppState == null) {
+      this.isAvailable = false;
+    } else {
+      this.isAvailable = true;
 
-    this.isAvailable = true;
-    this._eventHandlers = this._supportedEvents.reduce((handlers, key) => {
-      handlers[key] = new Map();
-      return handlers;
-    }, {});
+      const emitter: NativeEventEmitter<NativeAppStateEventDefinitions> = new NativeEventEmitter(
+        // T88715063: NativeEventEmitter only used this parameter on iOS. Now it uses it on all platforms, so this code was modified automatically to preserve its behavior
+        // If you want to use the native module on other platforms, please remove this condition and test its behavior
+        Platform.OS !== 'ios' ? null : NativeAppState,
+      );
+      this._emitter = emitter;
 
-    this.currentState = NativeAppState.getConstants().initialAppState;
+      this.currentState = NativeAppState.getConstants().initialAppState;
 
-    let eventUpdated = false;
+      let eventUpdated = false;
 
-    // TODO: this is a terrible solution - in order to ensure `currentState`
-    // prop is up to date, we have to register an observer that updates it
-    // whenever the state changes, even if nobody cares. We should just
-    // deprecate the `currentState` property and get rid of this.
-    this.addListener('appStateDidChange', appStateData => {
-      eventUpdated = true;
-      this.currentState = appStateData.app_state;
-    });
-
-    // TODO: see above - this request just populates the value of `currentState`
-    // when the module is first initialized. Would be better to get rid of the
-    // prop and expose `getCurrentAppState` method directly.
-    NativeAppState.getCurrentAppState(appStateData => {
-      // It's possible that the state will have changed here & listeners need to be notified
-      if (!eventUpdated && this.currentState !== appStateData.app_state) {
+      // TODO: this is a terrible solution - in order to ensure `currentState`
+      // prop is up to date, we have to register an observer that updates it
+      // whenever the state changes, even if nobody cares. We should just
+      // deprecate the `currentState` property and get rid of this.
+      emitter.addListener('appStateDidChange', appStateData => {
+        eventUpdated = true;
         this.currentState = appStateData.app_state;
-        this.emit('appStateDidChange', appStateData);
-      }
-    }, logError);
+      });
+
+      // TODO: see above - this request just populates the value of `currentState`
+      // when the module is first initialized. Would be better to get rid of the
+      // prop and expose `getCurrentAppState` method directly.
+      // $FlowExpectedError[incompatible-call]
+      NativeAppState.getCurrentAppState(appStateData => {
+        // It's possible that the state will have changed here & listeners need to be notified
+        if (!eventUpdated && this.currentState !== appStateData.app_state) {
+          this.currentState = appStateData.app_state;
+          emitter.emit('appStateDidChange', appStateData);
+        }
+      }, logError);
+    }
   }
 
   // TODO: now that AppState is a subclass of NativeEventEmitter, we could
@@ -73,107 +92,72 @@ class AppState extends NativeEventEmitter {
    *
    * See https://reactnative.dev/docs/appstate.html#addeventlistener
    */
-  addEventListener(type: string, handler: Function) {
-    invariant(
-      this._supportedEvents.indexOf(type) !== -1,
-      'Trying to subscribe to unknown event: "%s"',
-      type,
-    );
-
-    switch (type) {
-      case 'change': {
-        this._eventHandlers[type].set(
-          handler,
-          this.addListener('appStateDidChange', appStateData => {
-            handler(appStateData.app_state);
-          }),
-        );
-        break;
-      }
-      case 'memoryWarning': {
-        this._eventHandlers[type].set(
-          handler,
-          this.addListener('memoryWarning', handler),
-        );
-        break;
-      }
-
-      case 'blur':
-      case 'focus': {
-        this._eventHandlers[type].set(
-          handler,
-          this.addListener('appStateFocusChange', hasFocus => {
-            if (type === 'blur' && !hasFocus) {
-              handler();
-            }
-            if (type === 'focus' && hasFocus) {
-              handler();
-            }
-          }),
-        );
-      }
+  addEventListener<K: $Keys<AppStateEventDefinitions>>(
+    type: K,
+    handler: (...$ElementType<AppStateEventDefinitions, K>) => void,
+  ): EventSubscription {
+    const emitter = this._emitter;
+    if (emitter == null) {
+      throw new Error('Cannot use AppState when `isAvailable` is false.');
     }
+    switch (type) {
+      case 'change':
+        // $FlowIssue[invalid-tuple-arity] Flow cannot refine handler based on the event type
+        const changeHandler: AppStateValues => void = handler;
+        return emitter.addListener('appStateDidChange', appStateData => {
+          changeHandler(appStateData.app_state);
+        });
+      case 'memoryWarning':
+        // $FlowIssue[invalid-tuple-arity] Flow cannot refine handler based on the event type
+        const memoryWarningHandler: () => void = handler;
+        return emitter.addListener('memoryWarning', memoryWarningHandler);
+      case 'blur':
+      case 'focus':
+        // $FlowIssue[invalid-tuple-arity] Flow cannot refine handler based on the event type
+        const focusOrBlurHandler: () => void = handler;
+        return emitter.addListener('appStateFocusChange', hasFocus => {
+          if (type === 'blur' && !hasFocus) {
+            focusOrBlurHandler();
+          }
+          if (type === 'focus' && hasFocus) {
+            focusOrBlurHandler();
+          }
+        });
+    }
+    throw new Error('Trying to subscribe to unknown event: ' + type);
   }
 
   /**
-   * Remove a handler by passing the `change` event type and the handler.
-   *
-   * See https://reactnative.dev/docs/appstate.html#removeeventlistener
+   * @deprecated Use `remove` on the EventSubscription from `addEventListener`.
    */
-  removeEventListener(type: string, handler: Function) {
-    invariant(
-      this._supportedEvents.indexOf(type) !== -1,
-      'Trying to remove listener for unknown event: "%s"',
-      type,
-    );
-    if (!this._eventHandlers[type].has(handler)) {
-      return;
+  removeEventListener<K: $Keys<AppStateEventDefinitions>>(
+    type: K,
+    listener: (...$ElementType<AppStateEventDefinitions, K>) => mixed,
+  ): void {
+    const emitter = this._emitter;
+    if (emitter == null) {
+      throw new Error('Cannot use AppState when `isAvailable` is false.');
     }
-    this._eventHandlers[type].get(handler).remove();
-    this._eventHandlers[type].delete(handler);
+    // NOTE: This will report a deprecation notice via `console.error`.
+    switch (type) {
+      case 'change':
+        // $FlowIssue[invalid-tuple-arity] Flow cannot refine handler based on the event type
+        // $FlowIssue[incompatible-call]
+        emitter.removeListener('appStateDidChange', listener);
+        return;
+      case 'memoryWarning':
+        // $FlowIssue[invalid-tuple-arity] Flow cannot refine handler based on the event type
+        emitter.removeListener('memoryWarning', listener);
+        return;
+      case 'blur':
+      case 'focus':
+        // $FlowIssue[invalid-tuple-arity] Flow cannot refine handler based on the event type
+        // $FlowIssue[incompatible-call]
+        emitter.addListener('appStateFocusChange', listener);
+        return;
+    }
+    throw new Error('Trying to unsubscribe from unknown event: ' + type);
   }
 }
 
-function throwMissingNativeModule() {
-  invariant(
-    false,
-    'Cannot use AppState module when native RCTAppState is not included in the build.\n' +
-      'Either include it, or check AppState.isAvailable before calling any methods.',
-  );
-}
-
-class MissingNativeAppStateShim extends EventEmitter {
-  // AppState
-  isAvailable: boolean = false;
-  currentState: ?string = null;
-
-  addEventListener(type: string, handler: Function) {
-    throwMissingNativeModule();
-  }
-
-  removeEventListener(type: string, handler: Function) {
-    throwMissingNativeModule();
-  }
-
-  // EventEmitter
-  addListener() {
-    throwMissingNativeModule();
-  }
-
-  removeAllListeners() {
-    throwMissingNativeModule();
-  }
-
-  removeSubscription() {
-    throwMissingNativeModule();
-  }
-}
-
-// This module depends on the native `RCTAppState` module. If you don't include it,
-// `AppState.isAvailable` will return `false`, and any method calls will throw.
-// We reassign the class variable to keep the autodoc generator happy.
-const AppStateInstance: AppState | MissingNativeAppStateShim = NativeAppState
-  ? new AppState()
-  : new MissingNativeAppStateShim();
-
-module.exports = AppStateInstance;
+module.exports = (new AppState(): AppState);

Libraries/AppState/NativeAppState.js

@@ -8,8 +8,6 @@
  * @format
  */
 
-'use strict';
-
 import type {TurboModule} from '../TurboModule/RCTExport';
 import * as TurboModuleRegistry from '../TurboModule/TurboModuleRegistry';
 

Libraries/BUCK

@@ -1,36 +0,0 @@
-# Copyright (c) Facebook, Inc. and its affiliates.
-#
-# This source code is licensed under the MIT license found in the
-# LICENSE file in the root directory of this source tree.
-
-load("//tools/build_defs:fb_native_wrapper.bzl", "fb_native")
-load(
-    "//tools/build_defs/oss:rn_codegen_defs.bzl",
-    "rn_codegen_modules",
-)
-load(
-    "//tools/build_defs/oss:rn_defs.bzl",
-    "react_native_root_target",
-)
-
-fb_native.genrule(
-    name = "react_native_codegen_schema",
-    srcs = glob(
-        [
-            "**/*.js",
-        ],
-        exclude = [
-            "**/__tests__/**/*",
-        ],
-    ),
-    cmd = "$(exe {}) $OUT $SRCS".format(react_native_root_target("packages/react-native-codegen:write_to_json")),
-    out = "schema.json",
-    labels = ["codegen_rule"],
-)
-
-rn_codegen_modules(
-    name = "FBReactNativeSpec",
-    library_labels = ["supermodule:xplat/default/public.react_native.infra"],
-    native_module_spec_name = "FBReactNativeSpec",
-    schema_target = ":react_native_codegen_schema",
-)

Libraries/BatchedBridge/MessageQueue.js

@@ -47,7 +47,7 @@ class MessageQueue {
   _callID: number;
   _lastFlush: number;
   _eventLoopStartTime: number;
-  _immediatesCallback: ?() => void;
+  _reactNativeMicrotasksCallback: ?() => void;
 
   _debugInfo: {[number]: [number, number], ...};
   _remoteModuleTable: {[number]: string, ...};
@@ -63,7 +63,7 @@ class MessageQueue {
     this._callID = 0;
     this._lastFlush = 0;
     this._eventLoopStartTime = Date.now();
-    this._immediatesCallback = null;
+    this._reactNativeMicrotasksCallback = null;
 
     if (__DEV__) {
       this._debugInfo = {};
@@ -72,13 +72,16 @@ class MessageQueue {
     }
 
     // $FlowFixMe[cannot-write]
+    // $FlowFixMe[method-unbinding] added when improving typing for this parameters
     this.callFunctionReturnFlushedQueue = this.callFunctionReturnFlushedQueue.bind(
       this,
     );
     // $FlowFixMe[cannot-write]
+    // $FlowFixMe[method-unbinding] added when improving typing for this parameters
     this.flushedQueue = this.flushedQueue.bind(this);
 
     // $FlowFixMe[cannot-write]
+    // $FlowFixMe[method-unbinding] added when improving typing for this parameters
     this.invokeCallbackAndReturnFlushedQueue = this.invokeCallbackAndReturnFlushedQueue.bind(
       this,
     );
@@ -129,7 +132,7 @@ class MessageQueue {
 
   flushedQueue(): null | [Array<number>, Array<number>, Array<mixed>, number] {
     this.__guard(() => {
-      this.__callImmediates();
+      this.__callReactNativeMicrotasks();
     });
 
     const queue = this._queue;
@@ -145,14 +148,16 @@ class MessageQueue {
     this._lazyCallableModules[name] = () => module;
   }
 
-  registerLazyCallableModule(name: string, factory: void => {...}) {
-    let module: {...};
-    let getValue: ?(void) => {...} = factory;
+  registerLazyCallableModule(name: string, factory: void => interface {}) {
+    let module: interface {};
+    let getValue: ?(void) => interface {} = factory;
     this._lazyCallableModules[name] = () => {
       if (getValue) {
         module = getValue();
         getValue = null;
       }
+      /* $FlowFixMe[class-object-subtyping] added when improving typing for
+       * this parameters */
       return module;
     };
   }
@@ -349,8 +354,8 @@ class MessageQueue {
   // For JSTimers to register its callback. Otherwise a circular dependency
   // between modules is introduced. Note that only one callback may be
   // registered at a time.
-  setImmediatesCallback(fn: () => void) {
-    this._immediatesCallback = fn;
+  setReactNativeMicrotasksCallback(fn: () => void) {
+    this._reactNativeMicrotasksCallback = fn;
   }
 
   /**
@@ -376,16 +381,16 @@ class MessageQueue {
   // can be configured by the VM or any Inspector
   __shouldPauseOnThrow(): boolean {
     return (
-      // $FlowFixMe
+      // $FlowFixMe[cannot-resolve-name]
       typeof DebuggerInternal !== 'undefined' &&
       DebuggerInternal.shouldPauseOnThrow === true // eslint-disable-line no-undef
     );
   }
 
-  __callImmediates() {
-    Systrace.beginEvent('JSTimers.callImmediates()');
-    if (this._immediatesCallback != null) {
-      this._immediatesCallback();
+  __callReactNativeMicrotasks() {
+    Systrace.beginEvent('JSTimers.callReactNativeMicrotasks()');
+    if (this._reactNativeMicrotasksCallback != null) {
+      this._reactNativeMicrotasksCallback();
     }
     Systrace.endEvent();
   }
@@ -404,7 +409,7 @@ class MessageQueue {
     const moduleMethods = this.getCallableModule(module);
     invariant(
       !!moduleMethods,
-      `Module ${module} is not a registered callable module (calling ${method}). A frequent cause of the error is that the application entry file path is incorrect. 
+      `Module ${module} is not a registered callable module (calling ${method}). A frequent cause of the error is that the application entry file path is incorrect.
       This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.`,
     );
     invariant(

Libraries/BatchedBridge/NativeModules.js

@@ -14,7 +14,7 @@ const BatchedBridge = require('./BatchedBridge');
 
 const invariant = require('invariant');
 
-import type {ExtendedError} from '../Core/Devtools/parseErrorStack';
+import type {ExtendedError} from '../Core/ExtendedError';
 
 export type ModuleConfig = [
   string /* name */,
@@ -101,6 +101,8 @@ function genMethod(moduleID: number, methodID: number, type: MethodType) {
   if (type === 'promise') {
     fn = function promiseMethodWrapper(...args: Array<mixed>) {
       // In case we reject, capture a useful stack trace here.
+      /* $FlowFixMe[class-object-subtyping] added when improving typing for
+       * this parameters */
       const enqueueingFrameError: ExtendedError = new Error();
       return new Promise((resolve, reject) => {
         BatchedBridge.enqueueNativeCall(
@@ -166,6 +168,8 @@ function updateErrorWithErrorData(
   errorData: {message: string, ...},
   error: ExtendedError,
 ): ExtendedError {
+  /* $FlowFixMe[class-object-subtyping] added when improving typing for this
+   * parameters */
   return Object.assign(error, errorData || {});
 }
 

Libraries/BatchedBridge/__tests__/MessageQueue-test.js

@@ -108,7 +108,7 @@ describe('MessageQueue', function() {
     const unknownModule = 'UnknownModule',
       unknownMethod = 'UnknownMethod';
     expect(() => queue.__callFunction(unknownModule, unknownMethod)).toThrow(
-      `Module ${unknownModule} is not a registered callable module (calling ${unknownMethod}). A frequent cause of the error is that the application entry file path is incorrect. 
+      `Module ${unknownModule} is not a registered callable module (calling ${unknownMethod}). A frequent cause of the error is that the application entry file path is incorrect.
       This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.`,
     );
   });

Libraries/Blob/BlobManager.js

@@ -8,8 +8,6 @@
  * @format
  */
 
-'use strict';
-
 const Blob = require('./Blob');
 const BlobRegistry = require('./BlobRegistry');
 

Libraries/Blob/FileReader.js

@@ -8,8 +8,6 @@
  * @format
  */
 
-'use strict';
-
 const Blob = require('./Blob');
 const EventTarget = require('event-target-shim');
 
@@ -48,7 +46,7 @@ class FileReader extends (EventTarget(...READER_EVENTS): any) {
   _error: ?Error;
   _result: ?ReaderResult;
   _aborted: boolean = false;
-  _subscriptions: Array<*> = [];
+  _subscriptions: Array<any> = [];
 
   constructor() {
     super();

Libraries/Blob/NativeBlobModule.js

@@ -8,8 +8,6 @@
  * @format
  */
 
-'use strict';
-
 import type {TurboModule} from '../TurboModule/RCTExport';
 import * as TurboModuleRegistry from '../TurboModule/TurboModuleRegistry';
 

Libraries/Blob/NativeFileReaderModule.js

@@ -8,8 +8,6 @@
  * @format
  */
 
-'use strict';
-
 import type {TurboModule} from '../TurboModule/RCTExport';
 import * as TurboModuleRegistry from '../TurboModule/TurboModuleRegistry';
 

Libraries/Blob/RCTBlobManager.h

@@ -8,8 +8,9 @@
 #import <React/RCTBridge.h>
 #import <React/RCTBridgeModule.h>
 #import <React/RCTURLRequestHandler.h>
+#import <React/RCTInitializing.h>
 
-@interface RCTBlobManager : NSObject <RCTBridgeModule, RCTURLRequestHandler>
+@interface RCTBlobManager : NSObject <RCTBridgeModule, RCTURLRequestHandler, RCTInitializing>
 
 - (NSString *)store:(NSData *)data;
 

Libraries/Blob/RCTBlobManager.mm

@@ -37,13 +37,11 @@ static NSString *const kBlobURIScheme = @"blob";
 RCT_EXPORT_MODULE(BlobModule)
 
 @synthesize bridge = _bridge;
+@synthesize moduleRegistry = _moduleRegistry;
 @synthesize methodQueue = _methodQueue;
-@synthesize turboModuleRegistry = _turboModuleRegistry;
 
-- (void)setBridge:(RCTBridge *)bridge
+- (void)initialize
 {
-  _bridge = bridge;
-
   std::lock_guard<std::mutex> lock(_blobsMutex);
   _blobs = [NSMutableDictionary new];
 
@@ -140,9 +138,9 @@ RCT_EXPORT_MODULE(BlobModule)
 
 RCT_EXPORT_METHOD(addNetworkingHandler)
 {
-  RCTNetworking *const networking = _bridge ? _bridge.networking : [_turboModuleRegistry moduleForName:"RCTNetworking"];
+  RCTNetworking *const networking = [_moduleRegistry moduleForName:"Networking"];
 
-  // TODO(T63516227): Why can methodQueue be nil here? 
+  // TODO(T63516227): Why can methodQueue be nil here?
   // We don't want to do anything when methodQueue is nil.
   if (!networking.methodQueue) {
     return;
@@ -156,23 +154,23 @@ RCT_EXPORT_METHOD(addNetworkingHandler)
 
 RCT_EXPORT_METHOD(addWebSocketHandler:(double)socketID)
 {
-  dispatch_async(_bridge.webSocketModule.methodQueue, ^{
-    [self->_bridge.webSocketModule setContentHandler:self forSocketID:[NSNumber numberWithDouble:socketID]];
+  dispatch_async(((RCTWebSocketModule *)[_moduleRegistry moduleForName:"WebSocketModule"]).methodQueue, ^{
+    [[self->_moduleRegistry moduleForName:"WebSocketModule"] setContentHandler:self forSocketID:[NSNumber numberWithDouble:socketID]];
   });
 }
 
 RCT_EXPORT_METHOD(removeWebSocketHandler:(double)socketID)
 {
-  dispatch_async(_bridge.webSocketModule.methodQueue, ^{
-    [self->_bridge.webSocketModule setContentHandler:nil forSocketID:[NSNumber numberWithDouble:socketID]];
+  dispatch_async(((RCTWebSocketModule *)[_moduleRegistry moduleForName:"WebSocketModule"]).methodQueue, ^{
+    [[self->_moduleRegistry moduleForName:"WebSocketModule"] setContentHandler:nil forSocketID:[NSNumber numberWithDouble:socketID]];
   });
 }
 
 // @lint-ignore FBOBJCUNTYPEDCOLLECTION1
 RCT_EXPORT_METHOD(sendOverSocket:(NSDictionary *)blob socketID:(double)socketID)
 {
-  dispatch_async(_bridge.webSocketModule.methodQueue, ^{
-    [self->_bridge.webSocketModule sendData:[self resolve:blob] forSocketID:[NSNumber numberWithDouble:socketID]];
+  dispatch_async(((RCTWebSocketModule *)[_moduleRegistry moduleForName:"WebSocketModule"]).methodQueue, ^{
+    [[self->_moduleRegistry moduleForName:"WebSocketModule"] sendData:[self resolve:blob] forSocketID:[NSNumber numberWithDouble:socketID]];
   });
 }
 

Libraries/Blob/RCTBlobPlugins.mm

@@ -17,13 +17,14 @@
 #import <unordered_map>
 
 Class RCTBlobClassProvider(const char *name) {
-  static std::unordered_map<std::string, Class (*)(void)> sCoreModuleClassMap = {
+  // Intentionally leak to avoid crashing after static destructors are run.
+  static const auto sCoreModuleClassMap = new const std::unordered_map<std::string, Class (*)(void)>{
     {"FileReaderModule", RCTFileReaderModuleCls},
     {"BlobModule", RCTBlobManagerCls},
   };
 
-  auto p = sCoreModuleClassMap.find(name);
-  if (p != sCoreModuleClassMap.end()) {
+  auto p = sCoreModuleClassMap->find(name);
+  if (p != sCoreModuleClassMap->end()) {
     auto classFunc = p->second;
     return classFunc();
   }

Libraries/Blob/RCTFileReaderModule.mm

@@ -23,15 +23,14 @@
 
 RCT_EXPORT_MODULE(FileReaderModule)
 
-@synthesize bridge = _bridge;
-@synthesize turboModuleRegistry = _turboModuleRegistry;
+@synthesize moduleRegistry = _moduleRegistry;
 
 RCT_EXPORT_METHOD(readAsText:(NSDictionary<NSString *, id> *)blob
                   encoding:(NSString *)encoding
                   resolve:(RCTPromiseResolveBlock)resolve
                   reject:(RCTPromiseRejectBlock)reject)
 {
-  RCTBlobManager *blobManager = [[self bridge] moduleForClass:[RCTBlobManager class]];
+  RCTBlobManager *blobManager = [_moduleRegistry moduleForName:"BlobModule"];
   NSData *data = [blobManager resolve:blob];
 
   if (data == nil) {
@@ -56,12 +55,7 @@ RCT_EXPORT_METHOD(readAsDataURL:(NSDictionary<NSString *, id> *)blob
                   resolve:(RCTPromiseResolveBlock)resolve
                   reject:(RCTPromiseRejectBlock)reject)
 {
-  RCTBlobManager *blobManager = nil;
-  if ([self bridge]) {
-    blobManager = [[self bridge] moduleForClass:[RCTBlobManager class]];
-  } else {
-    blobManager = [[self turboModuleRegistry] moduleForName:[NSStringFromClass([RCTBlobManager class]) UTF8String]];
-  }
+  RCTBlobManager *blobManager = [_moduleRegistry moduleForName:"BlobModule"];
   NSData *data = [blobManager resolve:blob];
 
   if (data == nil) {

Libraries/Blob/React-RCTBlob.podspec

@@ -11,13 +11,13 @@ version = package['version']
 source = { :git => 'https://github.com/facebook/react-native.git' }
 if version == '1000.0.0'
   # This is an unpublished version, use the latest commit hash of the react-native repo, which we’re presumably in.
-  source[:commit] = `git rev-parse HEAD`.strip
+  source[:commit] = `git rev-parse HEAD`.strip if system("git rev-parse --git-dir > /dev/null 2>&1")
 else
   source[:tag] = "v#{version}"
 end
 
 folly_compiler_flags = '-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1 -Wno-comma -Wno-shorten-64-to-32'
-folly_version = '2020.01.13.00'
+folly_version = '2021.06.28.00-v2'
 
 Pod::Spec.new do |s|
   s.name                   = "React-RCTBlob"
@@ -26,7 +26,7 @@ Pod::Spec.new do |s|
   s.homepage               = "https://reactnative.dev/"
   s.license                = package["license"]
   s.author                 = "Facebook, Inc. and its affiliates"
-  s.platforms              = { :ios => "10.0" }
+  s.platforms              = { :ios => "11.0" }
   s.compiler_flags         = folly_compiler_flags + ' -Wno-nullability-completeness'
   s.source                 = source
   s.source_files           = "*.{h,m,mm}"

Libraries/Blob/URL.js

@@ -7,8 +7,6 @@
  * @format
  */
 
-'use strict';
-
 const Blob = require('./Blob');
 
 import NativeBlobModule from './NativeBlobModule';
@@ -51,7 +49,7 @@ if (
  * ```
  */
 
-// Small subset from whatwg-url: https://github.com/jsdom/whatwg-url/tree/master/lib
+// Small subset from whatwg-url: https://github.com/jsdom/whatwg-url/tree/master/src
 // The reference code bloat comes from Unicode issues with URLs, so those won't work here.
 export class URLSearchParams {
   _searchParams = [];
@@ -67,27 +65,27 @@ export class URLSearchParams {
   }
 
   delete(name) {
-    throw new Error('not implemented');
+    throw new Error('URLSearchParams.delete is not implemented');
   }
 
   get(name) {
-    throw new Error('not implemented');
+    throw new Error('URLSearchParams.get is not implemented');
   }
 
   getAll(name) {
-    throw new Error('not implemented');
+    throw new Error('URLSearchParams.getAll is not implemented');
   }
 
   has(name) {
-    throw new Error('not implemented');
+    throw new Error('URLSearchParams.has is not implemented');
   }
 
   set(name, value) {
-    throw new Error('not implemented');
+    throw new Error('URLSearchParams.set is not implemented');
   }
 
   sort() {
-    throw new Error('not implemented');
+    throw new Error('URLSearchParams.sort is not implemented');
   }
 
   [Symbol.iterator]() {
@@ -107,7 +105,7 @@ export class URLSearchParams {
 
 function validateBaseUrl(url: string) {
   // from this MIT-licensed gist: https://gist.github.com/dperini/729294
-  return /^(?:(?:(?:https?|ftp):)?\/\/)(?:(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,}))?)(?::\d{2,5})?(?:[/?#]\S*)?$/i.test(
+  return /^(?:(?:(?:https?|ftp):)?\/\/)(?:(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z0-9\u00a1-\uffff][a-z0-9\u00a1-\uffff_-]{0,62})?[a-z0-9\u00a1-\uffff]\.)*(?:[a-z\u00a1-\uffff]{2,}\.?))(?::\d{2,5})?(?:[/?#]\S*)?$/.test(
     url,
   );
 }
@@ -156,15 +154,15 @@ export class URL {
   }
 
   get hash() {
-    throw new Error('not implemented');
+    throw new Error('URL.hash is not implemented');
   }
 
   get host() {
-    throw new Error('not implemented');
+    throw new Error('URL.host is not implemented');
   }
 
   get hostname() {
-    throw new Error('not implemented');
+    throw new Error('URL.hostname is not implemented');
   }
 
   get href(): string {
@@ -172,27 +170,27 @@ export class URL {
   }
 
   get origin() {
-    throw new Error('not implemented');
+    throw new Error('URL.origin is not implemented');
   }
 
   get password() {
-    throw new Error('not implemented');
+    throw new Error('URL.password is not implemented');
   }
 
   get pathname() {
-    throw new Error('not implemented');
+    throw new Error('URL.pathname not implemented');
   }
 
   get port() {
-    throw new Error('not implemented');
+    throw new Error('URL.port is not implemented');
   }
 
   get protocol() {
-    throw new Error('not implemented');
+    throw new Error('URL.protocol is not implemented');
   }
 
   get search() {
-    throw new Error('not implemented');
+    throw new Error('URL.search is not implemented');
   }
 
   get searchParams(): URLSearchParams {
@@ -215,6 +213,6 @@ export class URL {
   }
 
   get username() {
-    throw new Error('not implemented');
+    throw new Error('URL.username is not implemented');
   }
 }

Libraries/BugReporting/BugReporting.js

@@ -8,8 +8,6 @@
  * @flow strict-local
  */
 
-'use strict';
-
 import RCTDeviceEventEmitter from '../EventEmitter/RCTDeviceEventEmitter';
 import NativeRedBox from '../NativeModules/specs/NativeRedBox';
 import {type EventSubscription} from '../vendor/emitter/EventEmitter';
@@ -45,6 +43,7 @@ class BugReporting {
     if (!BugReporting._subscription) {
       BugReporting._subscription = RCTDeviceEventEmitter.addListener(
         'collectBugExtraData',
+        // $FlowFixMe[method-unbinding]
         BugReporting.collectExtraData,
         null,
       );
@@ -54,6 +53,7 @@ class BugReporting {
     if (!BugReporting._redboxSubscription) {
       BugReporting._redboxSubscription = RCTDeviceEventEmitter.addListener(
         'collectRedBoxExtraData',
+        // $FlowFixMe[method-unbinding]
         BugReporting.collectExtraData,
         null,
       );

Libraries/BugReporting/getReactData.js

@@ -14,7 +14,7 @@
  * Convert a react internal instance to a sanitized data object.
  *
  * This is shamelessly stolen from react-devtools:
- * https://github.com/facebook/react-devtools/blob/master/backend/getData.js
+ * https://github.com/facebook/react-devtools/blob/HEAD/backend/getData.js
  */
 function getData(element: Object): Object {
   let children = null;
@@ -162,7 +162,7 @@ function copyWithSetImpl(obj, path, idx, value) {
   }
   const key = path[idx];
   const updated = Array.isArray(obj) ? obj.slice() : {...obj};
-  // $FlowFixMe number or string is fine here
+  // $FlowFixMe[incompatible-use] number or string is fine here
   updated[key] = copyWithSetImpl(obj[key], path, idx + 1, value);
   return updated;
 }

Libraries/Components/AccessibilityInfo/AccessibilityInfo.android.js

@@ -1,158 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @format
- * @flow strict-local
- */
-
-'use strict';
-
-import RCTDeviceEventEmitter from '../../EventEmitter/RCTDeviceEventEmitter';
-import UIManager from '../../ReactNative/UIManager';
-import NativeAccessibilityInfo from './NativeAccessibilityInfo';
-
-const REDUCE_MOTION_EVENT = 'reduceMotionDidChange';
-const TOUCH_EXPLORATION_EVENT = 'touchExplorationDidChange';
-
-type ChangeEventName = $Keys<{
-  change: string,
-  reduceMotionChanged: string,
-  screenReaderChanged: string,
-  ...
-}>;
-
-const _subscriptions = new Map();
-
-/**
- * Sometimes it's useful to know whether or not the device has a screen reader
- * that is currently active. The `AccessibilityInfo` API is designed for this
- * purpose. You can use it to query the current state of the screen reader as
- * well as to register to be notified when the state of the screen reader
- * changes.
- *
- * See https://reactnative.dev/docs/accessibilityinfo.html
- */
-
-const AccessibilityInfo = {
-  /**
-   * iOS only
-   */
-  isBoldTextEnabled: function(): Promise<boolean> {
-    return Promise.resolve(false);
-  },
-
-  /**
-   * iOS only
-   */
-  isGrayscaleEnabled: function(): Promise<boolean> {
-    return Promise.resolve(false);
-  },
-
-  /**
-   * iOS only
-   */
-  isInvertColorsEnabled: function(): Promise<boolean> {
-    return Promise.resolve(false);
-  },
-
-  isReduceMotionEnabled: function(): Promise<boolean> {
-    return new Promise((resolve, reject) => {
-      if (NativeAccessibilityInfo) {
-        NativeAccessibilityInfo.isReduceMotionEnabled(resolve);
-      } else {
-        reject(false);
-      }
-    });
-  },
-
-  /**
-   * iOS only
-   */
-  isReduceTransparencyEnabled: function(): Promise<boolean> {
-    return Promise.resolve(false);
-  },
-
-  isScreenReaderEnabled: function(): Promise<boolean> {
-    return new Promise((resolve, reject) => {
-      if (NativeAccessibilityInfo) {
-        NativeAccessibilityInfo.isTouchExplorationEnabled(resolve);
-      } else {
-        reject(false);
-      }
-    });
-  },
-
-  /**
-   * Deprecated
-   *
-   * Same as `isScreenReaderEnabled`
-   */
-  // $FlowFixMe[unsafe-getters-setters]
-  get fetch(): () => Promise<boolean> {
-    console.warn(
-      'AccessibilityInfo.fetch is deprecated, call AccessibilityInfo.isScreenReaderEnabled instead',
-    );
-    return this.isScreenReaderEnabled;
-  },
-
-  addEventListener: function<T>(eventName: ChangeEventName, handler: T): void {
-    let listener;
-
-    if (eventName === 'change' || eventName === 'screenReaderChanged') {
-      listener = RCTDeviceEventEmitter.addListener(
-        TOUCH_EXPLORATION_EVENT,
-        handler,
-      );
-    } else if (eventName === 'reduceMotionChanged') {
-      listener = RCTDeviceEventEmitter.addListener(
-        REDUCE_MOTION_EVENT,
-        handler,
-      );
-    }
-
-    // $FlowFixMe[escaped-generic]
-    _subscriptions.set(handler, listener);
-  },
-
-  removeEventListener: function<T>(
-    eventName: ChangeEventName,
-    handler: T,
-  ): void {
-    // $FlowFixMe[escaped-generic]
-    const listener = _subscriptions.get(handler);
-    if (!listener) {
-      return;
-    }
-    listener.remove();
-    // $FlowFixMe[escaped-generic]
-    _subscriptions.delete(handler);
-  },
-
-  /**
-   * Set accessibility focus to a react component.
-   *
-   * See https://reactnative.dev/docs/accessibilityinfo.html#setaccessibilityfocus
-   */
-  setAccessibilityFocus: function(reactTag: number): void {
-    UIManager.sendAccessibilityEvent(
-      reactTag,
-      UIManager.getConstants().AccessibilityEventTypes.typeViewFocused,
-    );
-  },
-
-  /**
-   * Post a string to be announced by the screen reader.
-   *
-   * See https://reactnative.dev/docs/accessibilityinfo.html#announceforaccessibility
-   */
-  announceForAccessibility: function(announcement: string): void {
-    if (NativeAccessibilityInfo) {
-      NativeAccessibilityInfo.announceForAccessibility(announcement);
-    }
-  },
-};
-
-module.exports = AccessibilityInfo;

Libraries/Components/AccessibilityInfo/AccessibilityInfo.ios.js

@@ -1,273 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @format
- * @flow strict-local
- */
-
-'use strict';
-
-import RCTDeviceEventEmitter from '../../EventEmitter/RCTDeviceEventEmitter';
-import NativeAccessibilityManager from './NativeAccessibilityManager';
-
-const CHANGE_EVENT_NAME = {
-  announcementFinished: 'announcementFinished',
-  boldTextChanged: 'boldTextChanged',
-  grayscaleChanged: 'grayscaleChanged',
-  invertColorsChanged: 'invertColorsChanged',
-  reduceMotionChanged: 'reduceMotionChanged',
-  reduceTransparencyChanged: 'reduceTransparencyChanged',
-  screenReaderChanged: 'screenReaderChanged',
-};
-
-type ChangeEventName = $Keys<{
-  announcementFinished: string,
-  boldTextChanged: string,
-  change: string,
-  grayscaleChanged: string,
-  invertColorsChanged: string,
-  reduceMotionChanged: string,
-  reduceTransparencyChanged: string,
-  screenReaderChanged: string,
-  ...
-}>;
-
-const _subscriptions = new Map();
-
-/**
- * Sometimes it's useful to know whether or not the device has a screen reader
- * that is currently active. The `AccessibilityInfo` API is designed for this
- * purpose. You can use it to query the current state of the screen reader as
- * well as to register to be notified when the state of the screen reader
- * changes.
- *
- * See https://reactnative.dev/docs/accessibilityinfo.html
- */
-const AccessibilityInfo = {
-  /**
-   * Query whether bold text is currently enabled.
-   *
-   * Returns a promise which resolves to a boolean.
-   * The result is `true` when bold text is enabled and `false` otherwise.
-   *
-   * See https://reactnative.dev/docs/accessibilityinfo.html#isBoldTextEnabled
-   */
-  isBoldTextEnabled: function(): Promise<boolean> {
-    return new Promise((resolve, reject) => {
-      if (NativeAccessibilityManager) {
-        NativeAccessibilityManager.getCurrentBoldTextState(resolve, reject);
-      } else {
-        reject(reject);
-      }
-    });
-  },
-
-  /**
-   * Query whether grayscale is currently enabled.
-   *
-   * Returns a promise which resolves to a boolean.
-   * The result is `true` when grayscale is enabled and `false` otherwise.
-   *
-   * See https://reactnative.dev/docs/accessibilityinfo.html#isGrayscaleEnabled
-   */
-  isGrayscaleEnabled: function(): Promise<boolean> {
-    return new Promise((resolve, reject) => {
-      if (NativeAccessibilityManager) {
-        NativeAccessibilityManager.getCurrentGrayscaleState(resolve, reject);
-      } else {
-        reject(reject);
-      }
-    });
-  },
-
-  /**
-   * Query whether inverted colors are currently enabled.
-   *
-   * Returns a promise which resolves to a boolean.
-   * The result is `true` when invert color is enabled and `false` otherwise.
-   *
-   * See https://reactnative.dev/docs/accessibilityinfo.html#isInvertColorsEnabled
-   */
-  isInvertColorsEnabled: function(): Promise<boolean> {
-    return new Promise((resolve, reject) => {
-      if (NativeAccessibilityManager) {
-        NativeAccessibilityManager.getCurrentInvertColorsState(resolve, reject);
-      } else {
-        reject(reject);
-      }
-    });
-  },
-
-  /**
-   * Query whether reduced motion is currently enabled.
-   *
-   * Returns a promise which resolves to a boolean.
-   * The result is `true` when a reduce motion is enabled and `false` otherwise.
-   *
-   * See https://reactnative.dev/docs/accessibilityinfo.html#isReduceMotionEnabled
-   */
-  isReduceMotionEnabled: function(): Promise<boolean> {
-    return new Promise((resolve, reject) => {
-      if (NativeAccessibilityManager) {
-        NativeAccessibilityManager.getCurrentReduceMotionState(resolve, reject);
-      } else {
-        reject(reject);
-      }
-    });
-  },
-
-  /**
-   * Query whether reduced transparency is currently enabled.
-   *
-   * Returns a promise which resolves to a boolean.
-   * The result is `true` when a reduce transparency is enabled and `false` otherwise.
-   *
-   * See https://reactnative.dev/docs/accessibilityinfo.html#isReduceTransparencyEnabled
-   */
-  isReduceTransparencyEnabled: function(): Promise<boolean> {
-    return new Promise((resolve, reject) => {
-      if (NativeAccessibilityManager) {
-        NativeAccessibilityManager.getCurrentReduceTransparencyState(
-          resolve,
-          reject,
-        );
-      } else {
-        reject(reject);
-      }
-    });
-  },
-
-  /**
-   * Query whether a screen reader is currently enabled.
-   *
-   * Returns a promise which resolves to a boolean.
-   * The result is `true` when a screen reader is enabled and `false` otherwise.
-   *
-   * See https://reactnative.dev/docs/accessibilityinfo.html#isScreenReaderEnabled
-   */
-  isScreenReaderEnabled: function(): Promise<boolean> {
-    return new Promise((resolve, reject) => {
-      if (NativeAccessibilityManager) {
-        NativeAccessibilityManager.getCurrentVoiceOverState(resolve, reject);
-      } else {
-        reject(reject);
-      }
-    });
-  },
-
-  /**
-   * Deprecated
-   *
-   * Same as `isScreenReaderEnabled`
-   */
-  // $FlowFixMe[unsafe-getters-setters]
-  get fetch(): $FlowFixMe {
-    console.warn(
-      'AccessibilityInfo.fetch is deprecated, call AccessibilityInfo.isScreenReaderEnabled instead',
-    );
-    return this.isScreenReaderEnabled;
-  },
-
-  /**
-   * Add an event handler. Supported events:
-   *
-   * - `boldTextChanged`: iOS-only event. Fires when the state of the bold text toggle changes.
-   *   The argument to the event handler is a boolean. The boolean is `true` when a bold text
-   *   is enabled and `false` otherwise.
-   * - `grayscaleChanged`: iOS-only event. Fires when the state of the gray scale toggle changes.
-   *   The argument to the event handler is a boolean. The boolean is `true` when a gray scale
-   *   is enabled and `false` otherwise.
-   * - `invertColorsChanged`: iOS-only event. Fires when the state of the invert colors toggle
-   *   changes. The argument to the event handler is a boolean. The boolean is `true` when a invert
-   *   colors is enabled and `false` otherwise.
-   * - `reduceMotionChanged`: Fires when the state of the reduce motion toggle changes.
-   *   The argument to the event handler is a boolean. The boolean is `true` when a reduce
-   *   motion is enabled (or when "Transition Animation Scale" in "Developer options" is
-   *   "Animation off") and `false` otherwise.
-   * - `reduceTransparencyChanged`: iOS-only event. Fires when the state of the reduce transparency
-   *   toggle changes.  The argument to the event handler is a boolean. The boolean is `true`
-   *   when a reduce transparency is enabled and `false` otherwise.
-   * - `screenReaderChanged`: Fires when the state of the screen reader changes. The argument
-   *   to the event handler is a boolean. The boolean is `true` when a screen
-   *   reader is enabled and `false` otherwise.
-   * - `announcementFinished`: iOS-only event. Fires when the screen reader has
-   *   finished making an announcement. The argument to the event handler is a
-   *   dictionary with these keys:
-   *     - `announcement`: The string announced by the screen reader.
-   *     - `success`: A boolean indicating whether the announcement was
-   *       successfully made.
-   *
-   * See https://reactnative.dev/docs/accessibilityinfo.html#addeventlistener
-   */
-  addEventListener: function<T>(
-    eventName: ChangeEventName,
-    handler: T,
-  ): {remove: () => void} {
-    let listener;
-
-    if (eventName === 'change') {
-      listener = RCTDeviceEventEmitter.addListener(
-        CHANGE_EVENT_NAME.screenReaderChanged,
-        handler,
-      );
-    } else if (CHANGE_EVENT_NAME[eventName]) {
-      listener = RCTDeviceEventEmitter.addListener(eventName, handler);
-    }
-
-    // $FlowFixMe[escaped-generic]
-    _subscriptions.set(handler, listener);
-    return {
-      remove: AccessibilityInfo.removeEventListener.bind(
-        null,
-        eventName,
-        handler,
-      ),
-    };
-  },
-
-  /**
-   * Set accessibility focus to a react component.
-   *
-   * See https://reactnative.dev/docs/accessibilityinfo.html#setaccessibilityfocus
-   */
-  setAccessibilityFocus: function(reactTag: number): void {
-    if (NativeAccessibilityManager) {
-      NativeAccessibilityManager.setAccessibilityFocus(reactTag);
-    }
-  },
-
-  /**
-   * Post a string to be announced by the screen reader.
-   *
-   * See https://reactnative.dev/docs/accessibilityinfo.html#announceforaccessibility
-   */
-  announceForAccessibility: function(announcement: string): void {
-    if (NativeAccessibilityManager) {
-      NativeAccessibilityManager.announceForAccessibility(announcement);
-    }
-  },
-
-  /**
-   * Remove an event handler.
-   *
-   * See https://reactnative.dev/docs/accessibilityinfo.html#removeeventlistener
-   */
-  removeEventListener: function<T>(
-    eventName: ChangeEventName,
-    handler: T,
-  ): void {
-    // $FlowFixMe[escaped-generic]
-    const listener = _subscriptions.get(handler);
-    if (!listener) {
-      return;
-    }
-    listener.remove();
-    // $FlowFixMe[escaped-generic]
-    _subscriptions.delete(handler);
-  },
-};
-
-module.exports = AccessibilityInfo;

Libraries/Components/AccessibilityInfo/AccessibilityInfo.js

@@ -0,0 +1,350 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+import RCTDeviceEventEmitter from '../../EventEmitter/RCTDeviceEventEmitter';
+import {sendAccessibilityEvent} from '../../Renderer/shims/ReactNative';
+import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
+import Platform from '../../Utilities/Platform';
+import type EventEmitter from '../../vendor/emitter/EventEmitter';
+import type {EventSubscription} from '../../vendor/emitter/EventEmitter';
+import NativeAccessibilityInfoAndroid from './NativeAccessibilityInfo';
+import NativeAccessibilityManagerIOS from './NativeAccessibilityManager';
+import legacySendAccessibilityEvent from './legacySendAccessibilityEvent';
+import type {ElementRef} from 'react';
+
+// Events that are only supported on iOS.
+type AccessibilityEventDefinitionsIOS = {
+  announcementFinished: [{announcement: string, success: boolean}],
+  boldTextChanged: [boolean],
+  grayscaleChanged: [boolean],
+  invertColorsChanged: [boolean],
+  reduceTransparencyChanged: [boolean],
+};
+
+type AccessibilityEventDefinitions = {
+  ...AccessibilityEventDefinitionsIOS,
+  change: [boolean], // screenReaderChanged
+  reduceMotionChanged: [boolean],
+  screenReaderChanged: [boolean],
+};
+
+type AccessibilityEventTypes = 'click' | 'focus';
+
+// Mapping of public event names to platform-specific event names.
+const EventNames: Map<$Keys<AccessibilityEventDefinitions>, string> =
+  Platform.OS === 'android'
+    ? new Map([
+        ['change', 'touchExplorationDidChange'],
+        ['reduceMotionChanged', 'reduceMotionDidChange'],
+        ['screenReaderChanged', 'touchExplorationDidChange'],
+      ])
+    : new Map([
+        ['announcementFinished', 'announcementFinished'],
+        ['boldTextChanged', 'boldTextChanged'],
+        ['change', 'screenReaderChanged'],
+        ['grayscaleChanged', 'grayscaleChanged'],
+        ['invertColorsChanged', 'invertColorsChanged'],
+        ['reduceMotionChanged', 'reduceMotionChanged'],
+        ['reduceTransparencyChanged', 'reduceTransparencyChanged'],
+        ['screenReaderChanged', 'screenReaderChanged'],
+      ]);
+
+/**
+ * Sometimes it's useful to know whether or not the device has a screen reader
+ * that is currently active. The `AccessibilityInfo` API is designed for this
+ * purpose. You can use it to query the current state of the screen reader as
+ * well as to register to be notified when the state of the screen reader
+ * changes.
+ *
+ * See https://reactnative.dev/docs/accessibilityinfo.html
+ */
+const AccessibilityInfo = {
+  /**
+   * Query whether bold text is currently enabled.
+   *
+   * Returns a promise which resolves to a boolean.
+   * The result is `true` when bold text is enabled and `false` otherwise.
+   *
+   * See https://reactnative.dev/docs/accessibilityinfo.html#isBoldTextEnabled
+   */
+  isBoldTextEnabled(): Promise<boolean> {
+    if (Platform.OS === 'android') {
+      return Promise.resolve(false);
+    } else {
+      return new Promise((resolve, reject) => {
+        if (NativeAccessibilityManagerIOS != null) {
+          NativeAccessibilityManagerIOS.getCurrentBoldTextState(
+            resolve,
+            reject,
+          );
+        } else {
+          reject(null);
+        }
+      });
+    }
+  },
+
+  /**
+   * Query whether grayscale is currently enabled.
+   *
+   * Returns a promise which resolves to a boolean.
+   * The result is `true` when grayscale is enabled and `false` otherwise.
+   *
+   * See https://reactnative.dev/docs/accessibilityinfo.html#isGrayscaleEnabled
+   */
+  isGrayscaleEnabled(): Promise<boolean> {
+    if (Platform.OS === 'android') {
+      return Promise.resolve(false);
+    } else {
+      return new Promise((resolve, reject) => {
+        if (NativeAccessibilityManagerIOS != null) {
+          NativeAccessibilityManagerIOS.getCurrentGrayscaleState(
+            resolve,
+            reject,
+          );
+        } else {
+          reject(null);
+        }
+      });
+    }
+  },
+
+  /**
+   * Query whether inverted colors are currently enabled.
+   *
+   * Returns a promise which resolves to a boolean.
+   * The result is `true` when invert color is enabled and `false` otherwise.
+   *
+   * See https://reactnative.dev/docs/accessibilityinfo.html#isInvertColorsEnabled
+   */
+  isInvertColorsEnabled(): Promise<boolean> {
+    if (Platform.OS === 'android') {
+      return Promise.resolve(false);
+    } else {
+      return new Promise((resolve, reject) => {
+        if (NativeAccessibilityManagerIOS != null) {
+          NativeAccessibilityManagerIOS.getCurrentInvertColorsState(
+            resolve,
+            reject,
+          );
+        } else {
+          reject(null);
+        }
+      });
+    }
+  },
+
+  /**
+   * Query whether reduced motion is currently enabled.
+   *
+   * Returns a promise which resolves to a boolean.
+   * The result is `true` when a reduce motion is enabled and `false` otherwise.
+   *
+   * See https://reactnative.dev/docs/accessibilityinfo.html#isReduceMotionEnabled
+   */
+  isReduceMotionEnabled(): Promise<boolean> {
+    return new Promise((resolve, reject) => {
+      if (Platform.OS === 'android') {
+        if (NativeAccessibilityInfoAndroid != null) {
+          NativeAccessibilityInfoAndroid.isReduceMotionEnabled(resolve);
+        } else {
+          reject(null);
+        }
+      } else {
+        if (NativeAccessibilityManagerIOS != null) {
+          NativeAccessibilityManagerIOS.getCurrentReduceMotionState(
+            resolve,
+            reject,
+          );
+        } else {
+          reject(null);
+        }
+      }
+    });
+  },
+
+  /**
+   * Query whether reduced transparency is currently enabled.
+   *
+   * Returns a promise which resolves to a boolean.
+   * The result is `true` when a reduce transparency is enabled and `false` otherwise.
+   *
+   * See https://reactnative.dev/docs/accessibilityinfo.html#isReduceTransparencyEnabled
+   */
+  isReduceTransparencyEnabled(): Promise<boolean> {
+    if (Platform.OS === 'android') {
+      return Promise.resolve(false);
+    } else {
+      return new Promise((resolve, reject) => {
+        if (NativeAccessibilityManagerIOS != null) {
+          NativeAccessibilityManagerIOS.getCurrentReduceTransparencyState(
+            resolve,
+            reject,
+          );
+        } else {
+          reject(null);
+        }
+      });
+    }
+  },
+
+  /**
+   * Query whether a screen reader is currently enabled.
+   *
+   * Returns a promise which resolves to a boolean.
+   * The result is `true` when a screen reader is enabled and `false` otherwise.
+   *
+   * See https://reactnative.dev/docs/accessibilityinfo.html#isScreenReaderEnabled
+   */
+  isScreenReaderEnabled(): Promise<boolean> {
+    return new Promise((resolve, reject) => {
+      if (Platform.OS === 'android') {
+        if (NativeAccessibilityInfoAndroid != null) {
+          NativeAccessibilityInfoAndroid.isTouchExplorationEnabled(resolve);
+        } else {
+          reject(null);
+        }
+      } else {
+        if (NativeAccessibilityManagerIOS != null) {
+          NativeAccessibilityManagerIOS.getCurrentVoiceOverState(
+            resolve,
+            reject,
+          );
+        } else {
+          reject(null);
+        }
+      }
+    });
+  },
+
+  /**
+   * Add an event handler. Supported events:
+   *
+   * - `reduceMotionChanged`: Fires when the state of the reduce motion toggle changes.
+   *   The argument to the event handler is a boolean. The boolean is `true` when a reduce
+   *   motion is enabled (or when "Transition Animation Scale" in "Developer options" is
+   *   "Animation off") and `false` otherwise.
+   * - `screenReaderChanged`: Fires when the state of the screen reader changes. The argument
+   *   to the event handler is a boolean. The boolean is `true` when a screen
+   *   reader is enabled and `false` otherwise.
+   *
+   * These events are only supported on iOS:
+   *
+   * - `boldTextChanged`: iOS-only event. Fires when the state of the bold text toggle changes.
+   *   The argument to the event handler is a boolean. The boolean is `true` when a bold text
+   *   is enabled and `false` otherwise.
+   * - `grayscaleChanged`: iOS-only event. Fires when the state of the gray scale toggle changes.
+   *   The argument to the event handler is a boolean. The boolean is `true` when a gray scale
+   *   is enabled and `false` otherwise.
+   * - `invertColorsChanged`: iOS-only event. Fires when the state of the invert colors toggle
+   *   changes. The argument to the event handler is a boolean. The boolean is `true` when a invert
+   *   colors is enabled and `false` otherwise.
+   * - `reduceTransparencyChanged`: iOS-only event. Fires when the state of the reduce transparency
+   *   toggle changes.  The argument to the event handler is a boolean. The boolean is `true`
+   *   when a reduce transparency is enabled and `false` otherwise.
+   * - `announcementFinished`: iOS-only event. Fires when the screen reader has
+   *   finished making an announcement. The argument to the event handler is a
+   *   dictionary with these keys:
+   *     - `announcement`: The string announced by the screen reader.
+   *     - `success`: A boolean indicating whether the announcement was
+   *       successfully made.
+   *
+   * See https://reactnative.dev/docs/accessibilityinfo.html#addeventlistener
+   */
+  addEventListener<K: $Keys<AccessibilityEventDefinitions>>(
+    eventName: K,
+    handler: (...$ElementType<AccessibilityEventDefinitions, K>) => void,
+  ): EventSubscription {
+    const deviceEventName = EventNames.get(eventName);
+    return deviceEventName == null
+      ? {remove(): void {}}
+      : RCTDeviceEventEmitter.addListener(deviceEventName, handler);
+  },
+
+  /**
+   * Set accessibility focus to a React component.
+   *
+   * See https://reactnative.dev/docs/accessibilityinfo.html#setaccessibilityfocus
+   */
+  setAccessibilityFocus(reactTag: number): void {
+    legacySendAccessibilityEvent(reactTag, 'focus');
+  },
+
+  /**
+   * Send a named accessibility event to a HostComponent.
+   */
+  sendAccessibilityEvent_unstable(
+    handle: ElementRef<HostComponent<mixed>>,
+    eventType: AccessibilityEventTypes,
+  ) {
+    // iOS only supports 'focus' event types
+    if (Platform.OS === 'ios' && eventType === 'click') {
+      return;
+    }
+    // route through React renderer to distinguish between Fabric and non-Fabric handles
+    sendAccessibilityEvent(handle, eventType);
+  },
+
+  /**
+   * Post a string to be announced by the screen reader.
+   *
+   * See https://reactnative.dev/docs/accessibilityinfo.html#announceforaccessibility
+   */
+  announceForAccessibility(announcement: string): void {
+    if (Platform.OS === 'android') {
+      NativeAccessibilityInfoAndroid?.announceForAccessibility(announcement);
+    } else {
+      NativeAccessibilityManagerIOS?.announceForAccessibility(announcement);
+    }
+  },
+
+  /**
+   * @deprecated Use `remove` on the EventSubscription from `addEventListener`.
+   */
+  removeEventListener<K: $Keys<AccessibilityEventDefinitions>>(
+    eventName: K,
+    handler: (...$ElementType<AccessibilityEventDefinitions, K>) => void,
+  ): void {
+    // NOTE: This will report a deprecation notice via `console.error`.
+    const deviceEventName = EventNames.get(eventName);
+    if (deviceEventName != null) {
+      // $FlowIgnore[incompatible-cast]
+      (RCTDeviceEventEmitter: EventEmitter<$FlowFixMe>).removeListener(
+        'deviceEventName',
+        // $FlowFixMe[invalid-tuple-arity]
+        handler,
+      );
+    }
+  },
+
+  /**
+   * Get the recommended timeout for changes to the UI needed by this user.
+   *
+   * See https://reactnative.dev/docs/accessibilityinfo.html#getrecommendedtimeoutmillis
+   */
+  getRecommendedTimeoutMillis(originalTimeout: number): Promise<number> {
+    if (Platform.OS === 'android') {
+      return new Promise((resolve, reject) => {
+        if (NativeAccessibilityInfoAndroid?.getRecommendedTimeoutMillis) {
+          NativeAccessibilityInfoAndroid.getRecommendedTimeoutMillis(
+            originalTimeout,
+            resolve,
+          );
+        } else {
+          resolve(originalTimeout);
+        }
+      });
+    } else {
+      return Promise.resolve(originalTimeout);
+    }
+  },
+};
+
+export default AccessibilityInfo;

Libraries/Components/AccessibilityInfo/NativeAccessibilityInfo.js

@@ -8,8 +8,6 @@
  * @format
  */
 
-'use strict';
-
 import type {TurboModule} from '../../TurboModule/RCTExport';
 import * as TurboModuleRegistry from '../../TurboModule/TurboModuleRegistry';
 
@@ -22,6 +20,10 @@ export interface Spec extends TurboModule {
   ) => void;
   +setAccessibilityFocus: (reactTag: number) => void;
   +announceForAccessibility: (announcement: string) => void;
+  +getRecommendedTimeoutMillis?: (
+    mSec: number,
+    onSuccess: (recommendedTimeoutMillis: number) => void,
+  ) => void;
 }
 
 export default (TurboModuleRegistry.get<Spec>('AccessibilityInfo'): ?Spec);

Libraries/Components/AccessibilityInfo/NativeAccessibilityManager.js

@@ -8,8 +8,6 @@
  * @format
  */
 
-'use strict';
-
 import type {TurboModule} from '../../TurboModule/RCTExport';
 import * as TurboModuleRegistry from '../../TurboModule/TurboModuleRegistry';
 

Libraries/Components/AccessibilityInfo/legacySendAccessibilityEvent.android.js

@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @flow strict-local
+ */
+
+import UIManager from '../../ReactNative/UIManager';
+
+/**
+ * This is a function exposed to the React Renderer that can be used by the
+ * pre-Fabric renderer to emit accessibility events to pre-Fabric nodes.
+ */
+function legacySendAccessibilityEvent(
+  reactTag: number,
+  eventType: string,
+): void {
+  if (eventType === 'focus') {
+    UIManager.sendAccessibilityEvent(
+      reactTag,
+      UIManager.getConstants().AccessibilityEventTypes.typeViewFocused,
+    );
+  }
+  if (eventType === 'click') {
+    UIManager.sendAccessibilityEvent(
+      reactTag,
+      UIManager.getConstants().AccessibilityEventTypes.typeViewClicked,
+    );
+  }
+}
+
+module.exports = legacySendAccessibilityEvent;

Libraries/Components/AccessibilityInfo/legacySendAccessibilityEvent.ios.js

@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @flow strict-local
+ */
+
+import NativeAccessibilityManager from './NativeAccessibilityManager';
+
+/**
+ * This is a function exposed to the React Renderer that can be used by the
+ * pre-Fabric renderer to emit accessibility events to pre-Fabric nodes.
+ */
+function legacySendAccessibilityEvent(
+  reactTag: number,
+  eventType: string,
+): void {
+  if (eventType === 'focus' && NativeAccessibilityManager) {
+    NativeAccessibilityManager.setAccessibilityFocus(reactTag);
+  }
+}
+
+module.exports = legacySendAccessibilityEvent;

Libraries/Components/ActivityIndicator/ActivityIndicator.js

@@ -10,14 +10,12 @@
  */
 
 'use strict';
-
-const Platform = require('../../Utilities/Platform');
-const React = require('react');
-const StyleSheet = require('../../StyleSheet/StyleSheet');
-const View = require('../View/View');
+import * as React from 'react';
+import Platform from '../../Utilities/Platform';
+import StyleSheet, {type ColorValue} from '../../StyleSheet/StyleSheet';
+import View from '../View/View';
 import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
 import type {ViewProps} from '../View/ViewPropTypes';
-import type {ColorValue} from '../../StyleSheet/StyleSheet';
 
 const PlatformActivityIndicator =
   Platform.OS === 'android'
@@ -62,8 +60,18 @@ type Props = $ReadOnly<{|
   size?: ?IndicatorSize,
 |}>;
 
-const ActivityIndicator = (props: Props, forwardedRef?: any) => {
-  const {onLayout, style, size, ...restProps} = props;
+const ActivityIndicator = (
+  {
+    animating = true,
+    color = Platform.OS === 'ios' ? GRAY : null,
+    hidesWhenStopped = true,
+    onLayout,
+    size = 'small',
+    style,
+    ...restProps
+  }: Props,
+  forwardedRef?: any,
+) => {
   let sizeStyle;
   let sizeProp;
 
@@ -77,11 +85,14 @@ const ActivityIndicator = (props: Props, forwardedRef?: any) => {
       sizeProp = 'large';
       break;
     default:
-      sizeStyle = {height: props.size, width: props.size};
+      sizeStyle = {height: size, width: size};
       break;
   }
 
   const nativeProps = {
+    animating,
+    color,
+    hidesWhenStopped,
     ...restProps,
     ref: forwardedRef,
     style: sizeStyle,
@@ -98,10 +109,10 @@ const ActivityIndicator = (props: Props, forwardedRef?: any) => {
       onLayout={onLayout}
       style={StyleSheet.compose(styles.container, style)}>
       {Platform.OS === 'android' ? (
-        // $FlowFixMe Flow doesn't know when this is the android component
+        // $FlowFixMe[prop-missing] Flow doesn't know when this is the android component
         <PlatformActivityIndicator {...nativeProps} {...androidProps} />
       ) : (
-        /* $FlowFixMe(>=0.106.0 site=react_native_android_fb) This comment
+        /* $FlowFixMe[prop-missing] (>=0.106.0 site=react_native_android_fb) This comment
          * suppresses an error found when Flow v0.106 was deployed. To see the
          * error, delete this comment and run Flow. */
         <PlatformActivityIndicator {...nativeProps} />
@@ -178,16 +189,6 @@ const ActivityIndicatorWithRef: React.AbstractComponent<
 > = React.forwardRef(ActivityIndicator);
 ActivityIndicatorWithRef.displayName = 'ActivityIndicator';
 
-/* $FlowFixMe(>=0.89.0 site=react_native_fb) This comment suppresses an error
- * found when Flow v0.89 was deployed. To see the error, delete this comment
- * and run Flow. */
-ActivityIndicatorWithRef.defaultProps = {
-  animating: true,
-  color: Platform.OS === 'ios' ? GRAY : null,
-  hidesWhenStopped: true,
-  size: 'small',
-};
-
 const styles = StyleSheet.create({
   container: {
     alignItems: 'center',

Libraries/Components/ActivityIndicator/ActivityIndicatorViewNativeComponent.js

@@ -8,8 +8,6 @@
  * @flow strict-local
  */
 
-'use strict';
-
 import type {WithDefault} from '../../Types/CodegenTypes';
 
 import type {ColorValue} from '../../StyleSheet/StyleSheet';

Libraries/Components/ActivityIndicator/__tests__/__snapshots__/ActivityIndicator-test.js.snap

@@ -2,9 +2,7 @@
 
 exports[`<ActivityIndicator /> should render as expected: should deep render when mocked (please verify output manually) 1`] = `
 <ActivityIndicator
-  animating={true}
   color="#0000ff"
-  hidesWhenStopped={true}
   size="large"
 />
 `;
@@ -35,18 +33,14 @@ exports[`<ActivityIndicator /> should render as expected: should deep render whe
 
 exports[`<ActivityIndicator /> should render as expected: should shallow render as <ActivityIndicator /> when mocked 1`] = `
 <ActivityIndicator
-  animating={true}
   color="#0000ff"
-  hidesWhenStopped={true}
   size="large"
 />
 `;
 
 exports[`<ActivityIndicator /> should render as expected: should shallow render as <ActivityIndicator /> when not mocked 1`] = `
 <ActivityIndicator
-  animating={true}
   color="#0000ff"
-  hidesWhenStopped={true}
   size="large"
 />
 `;

Libraries/Components/Button.js

@@ -11,18 +11,21 @@
 
 'use strict';
 
-const Platform = require('../Utilities/Platform');
-const React = require('react');
-const StyleSheet = require('../StyleSheet/StyleSheet');
-const Text = require('../Text/Text');
-const TouchableNativeFeedback = require('./Touchable/TouchableNativeFeedback');
-const TouchableOpacity = require('./Touchable/TouchableOpacity');
-const View = require('./View/View');
-
-const invariant = require('invariant');
+import * as React from 'react';
+import Platform from '../Utilities/Platform';
+import StyleSheet, {type ColorValue} from '../StyleSheet/StyleSheet';
+import Text from '../Text/Text';
+import TouchableNativeFeedback from './Touchable/TouchableNativeFeedback';
+import TouchableOpacity from './Touchable/TouchableOpacity';
+import View from './View/View';
+import invariant from 'invariant';
 
+import type {
+  AccessibilityState,
+  AccessibilityActionEvent,
+  AccessibilityActionInfo,
+} from './View/ViewAccessibility';
 import type {PressEvent} from '../Types/CoreEventTypes';
-import type {ColorValue} from '../StyleSheet/StyleSheet';
 
 type ButtonProps = $ReadOnly<{|
   /**
@@ -134,6 +137,14 @@ type ButtonProps = $ReadOnly<{|
     Used to locate this view in end-to-end tests.
    */
   testID?: ?string,
+
+  /**
+   * Accessibility props.
+   */
+  accessible?: ?boolean,
+  accessibilityActions?: ?$ReadOnlyArray<AccessibilityActionInfo>,
+  onAccessibilityAction?: ?(event: AccessibilityActionEvent) => mixed,
+  accessibilityState?: ?AccessibilityState,
 |}>;
 
 /**
@@ -148,7 +159,7 @@ type ButtonProps = $ReadOnly<{|
   [button:examples].
 
   [button:source]:
-  https://github.com/facebook/react-native/blob/master/Libraries/Components/Button.js
+  https://github.com/facebook/react-native/blob/HEAD/Libraries/Components/Button.js
 
   [button:examples]:
   https://js.coach/?menu%5Bcollections%5D=React%20Native&page=1&query=button
@@ -261,8 +272,10 @@ class Button extends React.Component<ButtonProps> {
       nextFocusLeft,
       nextFocusRight,
       nextFocusUp,
-      disabled,
       testID,
+      accessible,
+      accessibilityActions,
+      onAccessibilityAction,
     } = this.props;
     const buttonStyles = [styles.button];
     const textStyles = [styles.text];
@@ -273,12 +286,22 @@ class Button extends React.Component<ButtonProps> {
         buttonStyles.push({backgroundColor: color});
       }
     }
-    const accessibilityState = {};
+
+    const disabled =
+      this.props.disabled != null
+        ? this.props.disabled
+        : this.props.accessibilityState?.disabled;
+
+    const accessibilityState =
+      disabled !== this.props.accessibilityState?.disabled
+        ? {...this.props.accessibilityState, disabled}
+        : this.props.accessibilityState;
+
     if (disabled) {
       buttonStyles.push(styles.buttonDisabled);
       textStyles.push(styles.textDisabled);
-      accessibilityState.disabled = true;
     }
+
     invariant(
       typeof title === 'string',
       'The title prop of a Button must be a string',
@@ -287,8 +310,12 @@ class Button extends React.Component<ButtonProps> {
       Platform.OS === 'android' ? title.toUpperCase() : title;
     const Touchable =
       Platform.OS === 'android' ? TouchableNativeFeedback : TouchableOpacity;
+
     return (
       <Touchable
+        accessible={accessible}
+        accessibilityActions={accessibilityActions}
+        onAccessibilityAction={onAccessibilityAction}
         accessibilityLabel={accessibilityLabel}
         accessibilityRole="button"
         accessibilityState={accessibilityState}

Libraries/Components/Clipboard/Clipboard.js

@@ -8,8 +8,6 @@
  * @flow strict
  */
 
-'use strict';
-
 import NativeClipboard from './NativeClipboard';
 
 /**

Libraries/Components/Clipboard/NativeClipboard.js

@@ -8,8 +8,6 @@
  * @format
  */
 
-'use strict';
-
 import type {TurboModule} from '../../TurboModule/RCTExport';
 import * as TurboModuleRegistry from '../../TurboModule/TurboModuleRegistry';
 

Libraries/Components/DatePicker/DatePickerIOS.android.js

@@ -8,11 +8,10 @@
  */
 
 'use strict';
-
-const React = require('react');
-const StyleSheet = require('../../StyleSheet/StyleSheet');
-const Text = require('../../Text/Text');
-const View = require('../View/View');
+import * as React from 'react';
+import StyleSheet from '../../StyleSheet/StyleSheet';
+import Text from '../../Text/Text';
+import View from '../View/View';
 
 class DummyDatePickerIOS extends React.Component {
   render() {

Libraries/Components/DatePicker/DatePickerIOS.ios.js

@@ -10,16 +10,13 @@
 
 // This is a controlled component version of RCTDatePickerIOS.
 
-'use strict';
-
+import * as React from 'react';
 import RCTDatePickerNativeComponent, {
   Commands as DatePickerCommands,
 } from './RCTDatePickerNativeComponent';
-const React = require('react');
-const StyleSheet = require('../../StyleSheet/StyleSheet');
-const View = require('../View/View');
-
-const invariant = require('invariant');
+import StyleSheet from '../../StyleSheet/StyleSheet';
+import View from '../View/View';
+import invariant from 'invariant';
 
 import type {SyntheticEvent} from '../../Types/CoreEventTypes';
 import type {ViewProps} from '../View/ViewPropTypes';
@@ -103,6 +100,13 @@ type Props = $ReadOnly<{|
    * instance, to show times in Pacific Standard Time, pass -7 * 60.
    */
   timeZoneOffsetInMinutes?: ?number,
+
+  /**
+   * The date picker style
+   * This is only available on devices with iOS 14.0 and later.
+   * 'spinner' is the default style if this prop isn't set.
+   */
+  pickerStyle?: ?('compact' | 'spinner' | 'inline'),
 |}>;
 
 /**
@@ -149,7 +153,7 @@ class DatePickerIOS extends React.Component<Props> {
           ref={picker => {
             this._picker = picker;
           }}
-          style={styles.datePickerIOS}
+          style={getHeight(props.pickerStyle, props.mode)}
           date={
             props.date
               ? props.date.getTime()
@@ -174,16 +178,51 @@ class DatePickerIOS extends React.Component<Props> {
           onChange={this._onChange}
           onStartShouldSetResponder={() => true}
           onResponderTerminationRequest={() => false}
+          pickerStyle={props.pickerStyle}
         />
       </View>
     );
   }
 }
 
+const inlineHeightForDatePicker = 318.5;
+const inlineHeightForTimePicker = 49.5;
+const compactHeight = 40;
+const spinnerHeight = 216;
+
 const styles = StyleSheet.create({
   datePickerIOS: {
-    height: 216,
+    height: spinnerHeight,
+  },
+  datePickerIOSCompact: {
+    height: compactHeight,
+  },
+  datePickerIOSInline: {
+    height: inlineHeightForDatePicker + inlineHeightForTimePicker * 2,
+  },
+  datePickerIOSInlineDate: {
+    height: inlineHeightForDatePicker + inlineHeightForTimePicker,
+  },
+  datePickerIOSInlineTime: {
+    height: inlineHeightForTimePicker,
   },
 });
 
+function getHeight(pickerStyle, mode) {
+  if (pickerStyle === 'compact') {
+    return styles.datePickerIOSCompact;
+  }
+  if (pickerStyle === 'inline') {
+    switch (mode) {
+      case 'date':
+        return styles.datePickerIOSInlineDate;
+      case 'time':
+        return styles.datePickerIOSInlineTime;
+      default:
+        return styles.datePickerIOSInline;
+    }
+  }
+  return styles.datePickerIOS;
+}
+
 module.exports = DatePickerIOS;

Libraries/Components/DatePicker/RCTDatePickerNativeComponent.js

@@ -8,8 +8,6 @@
  * @flow strict-local
  */
 
-'use strict';
-
 import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
 import type {ViewProps} from '../View/ViewPropTypes';
 import codegenNativeCommands from 'react-native/Libraries/Utilities/codegenNativeCommands';
@@ -39,6 +37,7 @@ type NativeProps = $ReadOnly<{|
   mode?: WithDefault<'date' | 'time' | 'datetime', 'date'>,
   onChange?: ?BubblingEventHandler<Event>,
   timeZoneOffsetInMinutes?: ?Float,
+  pickerStyle?: WithDefault<'compact' | 'spinner' | 'inline', 'spinner'>,
 |}>;
 
 type ComponentType = HostComponent<NativeProps>;

Libraries/Components/DatePickerAndroid/DatePickerAndroid.android.js

@@ -8,8 +8,6 @@
  * @flow strict-local
  */
 
-'use strict';
-
 import type {Options, DatePickerOpenAction} from './DatePickerAndroidTypes';
 import NativeDatePickerAndroid from './NativeDatePickerAndroid';
 

Libraries/Components/DatePickerAndroid/NativeDatePickerAndroid.js

@@ -8,8 +8,6 @@
  * @format
  */
 
-'use strict';
-
 import type {TurboModule} from '../../TurboModule/RCTExport';
 import * as TurboModuleRegistry from '../../TurboModule/TurboModuleRegistry';
 

Libraries/Components/DrawerAndroid/AndroidDrawerLayoutNativeComponent.js

@@ -8,8 +8,6 @@
  * @flow strict-local
  */
 
-'use strict';
-
 import type {ViewProps} from 'react-native/Libraries/Components/View/ViewPropTypes';
 import type {ColorValue} from 'react-native/Libraries/StyleSheet/StyleSheet';
 import type {

Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.android.js

@@ -8,8 +8,6 @@
  * @format
  */
 
-'use strict';
-
 import Platform from '../../Utilities/Platform';
 import * as React from 'react';
 import StatusBar from '../StatusBar/StatusBar';