2. Install the Android SDK
-Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the `Android 14 (UpsideDownCake)` SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio. +Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the `Android 15 (VanillaIceCream)` SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio. To do that, open Android Studio, click on "More Actions" button and select "SDK Manager". @@ -79,12 +79,12 @@ To do that, open Android Studio, click on "More Actions" button and select "SDK > The SDK Manager can also be found within the Android Studio "Settings" dialog, under **Languages & Frameworks** → **Android SDK**. -Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the `Android 14 (UpsideDownCake)` entry, then make sure the following items are checked: +Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the `Android 15 (VanillaIceCream)` entry, then make sure the following items are checked: -- `Android SDK Platform 34` +- `Android SDK Platform 35` - `Intel x86 Atom_64 System Image` or `Google APIs Intel x86 Atom System Image` or (for Apple M1 Silicon) `Google APIs ARM 64 v8a System Image` -Next, select the "SDK Tools" tab and check the box next to "Show Package Details" here as well. Look for and expand the "Android SDK Build-Tools" entry, then make sure that `34.0.0` is selected. +Next, select the "SDK Tools" tab and check the box next to "Show Package Details" here as well. Look for and expand the "Android SDK Build-Tools" entry, then make sure that `35.0.0` is selected. Finally, click "Apply" to download and install the Android SDK and related build tools. @@ -120,7 +120,7 @@ If you use Android Studio to open `./AwesomeProject/android`, you can see the li  -If you have recently installed Android Studio, you will likely need to [create a new AVD](https://developer.android.com/studio/run/managing-avds.html). Select "Create Virtual Device...", then pick any Phone from the list and click "Next", then select the **UpsideDownCake** API Level 34 image. +If you have recently installed Android Studio, you will likely need to [create a new AVD](https://developer.android.com/studio/run/managing-avds.html). Select "Create Virtual Device...", then pick any Phone from the list and click "Next", then select the **VanillaIceCream** API Level 35 image. Click "Next" then "Finish" to create your AVD. At this point you should be able to click on the green triangle button next to your AVD to launch it. diff --git a/docs/_getting-started-macos-ios.md b/docs/_getting-started-macos-ios.md index 435b9543fd9..6b366fb64f4 100644 --- a/docs/_getting-started-macos-ios.md +++ b/docs/_getting-started-macos-ios.md @@ -33,7 +33,7 @@ You will also need to install the Xcode Command Line Tools. Open Xcode, then cho To install a simulator, open **Xcode > Settings... (or Preferences...)** and select the **Platforms (or Components)** tab. Select a simulator with the corresponding version of iOS you wish to use. -If you are using Xcode version 14.0 or greater than to install a simulator, open **Xcode > Settings > Platforms** tab, then click "+" icon and select **iOS…** option. +If you are using Xcode version 14.0 or greater to install a simulator, open **Xcode > Settings > Platforms** tab, then click "+" icon and select **iOS…** option. #### CocoaPods diff --git a/docs/_getting-started-windows-android.md b/docs/_getting-started-windows-android.md index 15d61eaa500..0ded094e8fc 100644 --- a/docs/_getting-started-windows-android.md +++ b/docs/_getting-started-windows-android.md @@ -45,7 +45,7 @@ Once setup has finalized and you're presented with the Welcome screen, proceed t2. Install the Android SDK
-Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the `Android 14 (UpsideDownCake)` SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio. +Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the `Android 15 (VanillaIceCream)` SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio. To do that, open Android Studio, click on "More Actions" button and select "SDK Manager". @@ -53,12 +53,12 @@ To do that, open Android Studio, click on "More Actions" button and select "SDK > The SDK Manager can also be found within the Android Studio "Settings" dialog, under **Languages & Frameworks** → **Android SDK**. -Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the `Android 14 (UpsideDownCake)` entry, then make sure the following items are checked: +Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the `Android 15 (VanillaIceCream)` entry, then make sure the following items are checked: -- `Android SDK Platform 34` +- `Android SDK Platform 35` - `Intel x86 Atom_64 System Image` or `Google APIs Intel x86 Atom System Image` -Next, select the "SDK Tools" tab and check the box next to "Show Package Details" here as well. Look for and expand the `Android SDK Build-Tools` entry, then make sure that `34.0.0` is selected. +Next, select the "SDK Tools" tab and check the box next to "Show Package Details" here as well. Look for and expand the `Android SDK Build-Tools` entry, then make sure that `35.0.0` is selected. Finally, click "Apply" to download and install the Android SDK and related build tools. @@ -118,7 +118,7 @@ If you use Android Studio to open `./AwesomeProject/android`, you can see the li  -If you have recently installed Android Studio, you will likely need to [create a new AVD](https://developer.android.com/studio/run/managing-avds.html). Select "Create Virtual Device...", then pick any Phone from the list and click "Next", then select the **UpsideDownCake** API Level 34 image. +If you have recently installed Android Studio, you will likely need to [create a new AVD](https://developer.android.com/studio/run/managing-avds.html). Select "Create Virtual Device...", then pick any Phone from the list and click "Next", then select the **VanillaIceCream** API Level 35 image. > If you don't have HAXM installed, click on "Install HAXM" or follow [these instructions](https://github.com/intel/haxm/wiki/Installation-Instructions-on-Windows) to set it up, then go back to the AVD Manager. diff --git a/docs/_integration-with-existing-apps-ios.md b/docs/_integration-with-existing-apps-ios.md index cd0b2df8d85..93b5b243325 100644 --- a/docs/_integration-with-existing-apps-ios.md +++ b/docs/_integration-with-existing-apps-ios.md @@ -467,10 +467,11 @@ class ViewController: UIViewController { + button.setTitleColor(.systemBlue, for: .normal) + button.setTitleColor(.blue, for: .highlighted) + button.addAction(UIAction { [weak self] _ in ++ guard let self else { return } + if reactViewController == nil { + reactViewController = ReactViewController() + } -+ self?.present(reactViewController, animated: true) ++ present(reactViewController!, animated: true) + }, for: .touchUpInside) + self.view.addSubview(button) + diff --git a/docs/_turbo-native-modules-components.jsx b/docs/_turbo-native-modules-components.jsx index 03cf1917ba9..1bb5a1b5edb 100644 --- a/docs/_turbo-native-modules-components.jsx +++ b/docs/_turbo-native-modules-components.jsx @@ -1,6 +1,6 @@ -import React from "react"; -import IOSContent from "./turbo-native-modules-ios.md"; -import AndroidContent from "./turbo-native-modules-android.md"; +import React from 'react'; +import IOSContent from './turbo-native-modules-ios.md'; +import AndroidContent from './turbo-native-modules-android.md'; export function TurboNativeModulesIOS() { returniOS
+
+A boolean value that determines whether the large content viewer is shown when the user performs a long press on the element.
+
+Available in iOS 13.0 and later.
+
+### `accessibilityLargeContentTitle` iOS
+
+A string that will be used as the title of the large content viewer when it is shown.
+
+Requires `accessibilityShowsLargeContentViewer` to be set to `true`.
+
+```tsx
+iOS
Use this property to assign a custom function to be called when someone activates an accessible element by double tapping on it while it's selected.
@@ -363,6 +383,7 @@ Assign this property to a custom function which will be called when someone perf
- **img** Used when the element should be treated as an image. Can be combined with a button or link, for example.
- **link** Used when the element should be treated as a link.
- **list** Used to identify a list of items.
+- **listitem** Used to itentify an item in a list.
- **menu** Used when the component is a menu of choices.
- **menubar** Used when a component is a container of multiple menus.
- **menuitem** Used to represent an item within a menu.
diff --git a/docs/animated.md b/docs/animated.md
index 8eee7843170..b74541b2281 100644
--- a/docs/animated.md
+++ b/docs/animated.md
@@ -13,14 +13,21 @@ The core workflow for creating an animation is to create an `Animated.Value`, ho
The following example contains a `View` which will fade in and fade out based on the animated value `fadeAnim`
-```SnackPlayer name=Animated%20Example
-import React, {useRef} from 'react';
-import {Animated, Text, View, StyleSheet, Button} from 'react-native';
+```SnackPlayer name=Animated%20Example&supportedPlatforms=ios,android
+import React from 'react';
import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+import {
+ Animated,
+ Text,
+ View,
+ StyleSheet,
+ Button,
+ useAnimatedValue,
+} from 'react-native';
const App = () => {
// fadeAnim will be used as the value for opacity. Initial Value: 0
- const fadeAnim = useRef(new Animated.Value(0)).current;
+ const fadeAnim = useAnimatedValue(0);
const fadeIn = () => {
// Will change fadeAnim value to 1 in 5 seconds
@@ -495,7 +502,7 @@ Stops any running animation and resets the value to its original.
### `Value`
-Standard value class for driving animations. Typically initialized with `new Animated.Value(0);`
+Standard value class for driving animations. Typically initialized with `useAnimatedValue(0);` or `new Animated.Value(0);` in class components.
You can read more about `Animated.Value` API on the separate [page](animatedvalue).
diff --git a/docs/animatedvalue.md b/docs/animatedvalue.md
index f6caa7ba422..189df398ec0 100644
--- a/docs/animatedvalue.md
+++ b/docs/animatedvalue.md
@@ -5,7 +5,7 @@ title: Animated.Value
Standard value for driving animations. One `Animated.Value` can drive multiple properties in a synchronized fashion, but can only be driven by one mechanism at a time. Using a new mechanism (e.g. starting a new animation, or calling `setValue`) will stop any previous ones.
-Typically initialized with `new Animated.Value(0);`
+Typically initialized with `useAnimatedValue(0);` or `new Animated.Value(0);` in class components.
---
diff --git a/docs/animations.md b/docs/animations.md
index cd298a9164b..d07e9c7bf8f 100644
--- a/docs/animations.md
+++ b/docs/animations.md
@@ -20,12 +20,12 @@ For example, a container view that fades in when it is mounted may look like thi
-5. Rename RCTWebView.m → RCTWebView.mm making it an Objective-C++ file
+5. Repeat step 4 and create a header file named `RCTWebView.h`.
+
+6. Rename RCTWebView.m → RCTWebView.mm making it an Objective-C++ file.
```text title="Demo/ios"
Podfile
@@ -72,7 +74,7 @@ After creating the header file and the implementation file, you can start implem
This is the code for the `RCTWebView.h` file, which declares the component interface.
-```objc title="Demo/RCTWebView/RTNWebView.h"
+```objc title="Demo/RCTWebView/RCTWebView.h"
#import 
-It then adds an entry to the dictionary with the name used in the Codegen specification file. In this way, when React is required to load a component with name `CustomWebView`, React Native will instantiate a `RCTWebView`.
+5. In the search bar, filter for WebKit
+6. Select the WebKit framework
+7. Click on Add.
-Finally, it returns the new dictionary.
+
:::warning
We are aware of a couple of issues with iOS that would create some problem when building the app with a custom iOS component.
@@ -242,5 +229,5 @@ We are aware of a couple of issues with iOS that would create some problem when
1. The component requires access to the `yoga/style/Style.h` header which is not currently available for the application. To fix this, add the `$(PODS_ROOT)/Headers/Private/Yoga` path to the header search paths build settings of the app.
2. Codegen is generating a line in the `RCTThirdPartyFabricComponentsProvider` that it should not generate. Remove the lines with the `WebViewCls` symbol in the `RCTThirdPartyFabricComponentsProvider.h` and `RCTThirdPartyFabricComponentsProvider.mm` files.
-We have already fixed those issues and they will be released in React Native 0.76.1
+We have already fixed those issues and they will be released in React Native 0.76.2.
:::
diff --git a/docs/fabric-native-components.md b/docs/fabric-native-components.md
index cc55cbe83a4..286bbc8b254 100644
--- a/docs/fabric-native-components.md
+++ b/docs/fabric-native-components.md
@@ -41,12 +41,12 @@ This gives you the following layout where you'll working:
Demo
├── android/app/src/main/java/com/webview
└── ios
-└── spec
+└── specs
```
- The `android/app/src/main/java/com/webview` folder is the folder that will contain our Android code.
- The `ios` folder is the folder that will contain our iOS code.
-- The `spec` folder is the folder that will contain the Codegen's specification file.
+- The `specs` folder is the folder that will contain the Codegen's specification file.
## 1. Define Specification for Codegen
@@ -107,11 +107,11 @@ export default (codegenNativeComponentName
| Type | Description |
-| -------------------------------------------------------- | -------- | ---------------------------------------------------------------------------------------------------- |
-| uri Required
| string | The location of the image. |
-| success Required
| function | The function that will be called if the image was successfully found and width and height retrieved. |
-| failure | function | The function that will be called if there was an error, such as failing to retrieve the image. |
+| Name
| Type | Description |
+| ---------------------------------------------------- | ------ | -------------------------- |
+| uri Required
| string | The location of the image. |
---
@@ -510,10 +504,8 @@ In order to retrieve the image dimensions, the image may first need to be loaded
```tsx
static getSizeWithHeaders(
uri: string,
- headers: {[index: string]: string},
- success: (width: number, height: number) => void,
- failure?: (error: any) => void,
-): any;
+ headers: {[index: string]: string}
+): Promise<{width: number, height: number}>;
```
Retrieve the width and height (in pixels) of an image prior to displaying it with the ability to provide the headers for the request. This method can fail if the image cannot be found, or fails to download. It also does not work for static image resources.
@@ -522,12 +514,10 @@ In order to retrieve the image dimensions, the image may first need to be loaded
**Parameters:**
-| Name
| Type | Description |
-| -------------------------------------------------------- | -------- | ---------------------------------------------------------------------------------------------------- |
-| uri Required
| string | The location of the image. |
-| headers Required
| object | The headers for the request. |
-| success Required
| function | The function that will be called if the image was successfully found and width and height retrieved. |
-| failure | function | The function that will be called if there was an error, such as failing to retrieve the image. |
+| Name
| Type | Description |
+| -------------------------------------------------------- | ------ | ---------------------------- |
+| uri Required
| string | The location of the image. |
+| headers Required
| object | The headers for the request. |
---
diff --git a/docs/images.md b/docs/images.md
index 1afecdecdb7..dfdf182c145 100644
--- a/docs/images.md
+++ b/docs/images.md
@@ -150,7 +150,7 @@ This is recommended for very small and dynamic images only, like icons in a list
/>
```
-### Cache Control (iOS Only)
+### Cache Control
In some cases you might only want to display an image if it is already in the local cache, i.e. a low resolution placeholder until a higher resolution is available. In other cases you do not care if the image is outdated and are willing to display an outdated image to save bandwidth. The `cache` source property gives you control over how the network layer interacts with the cache.
diff --git a/docs/interactionmanager.md b/docs/interactionmanager.md
index d0916603260..f9265e7db16 100644
--- a/docs/interactionmanager.md
+++ b/docs/interactionmanager.md
@@ -47,7 +47,7 @@ By default, queued tasks are executed together in a loop in one `setImmediate` b
iOS
+
+A value indicating this view should or should not be inverted when color inversion is turned on. A value of `true` will tell the view to not be inverted even if color inversion is turned on.
+
+See the [Accessibility guide](accessibility.md#accessibilityignoresinvertcolors) for more information.
| Type |
| ------- |
diff --git a/docs/transforms.md b/docs/transforms.md
index cfb51f6949f..77e72bec67c 100644
--- a/docs/transforms.md
+++ b/docs/transforms.md
@@ -211,13 +211,19 @@ The `transformOrigin` property sets the origin for a view's transformations. The
# Example
-```SnackPlayer name=TransformOrigin%20Example
-import React, {useRef, useEffect} from 'react';
-import {Animated, View, StyleSheet, Easing} from 'react-native';
+```SnackPlayer name=TransformOrigin%20Example&supportedPlatforms=ios,android
+import React, {useEffect} from 'react';
+import {
+ Animated,
+ View,
+ StyleSheet,
+ Easing,
+ useAnimatedValue,
+} from 'react-native';
import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
const App = () => {
- const rotateAnim = useRef(new Animated.Value(0)).current;
+ const rotateAnim = useAnimatedValue(0);
useEffect(() => {
Animated.loop(
diff --git a/docs/turbo-native-modules-android.md b/docs/turbo-native-modules-android.md
index 281eb200399..b8090adfed3 100644
--- a/docs/turbo-native-modules-android.md
+++ b/docs/turbo-native-modules-android.md
@@ -107,7 +107,7 @@ class NativeLocalStorageModule(reactContext: ReactApplicationContext) : NativeLo
Android
+### `collapsable`
Views that are only used to layout their children or otherwise don't draw anything may be automatically removed from the native hierarchy as an optimization. Set this property to `false` to disable this optimization and ensure that this `View` exists in the native view hierarchy.
-| Type |
-| ---- |
-| bool |
+| Type | Default |
+| ------- | ------- |
+| boolean | true |
+
+---
+
+### `collapsableChildren`
+
+Setting to false prevents direct children of the view from being removed from the native view hierarchy, similar to the effect of setting `collapsable={false}` on each child.
+
+| Type | Default |
+| ------- | ------- |
+| boolean | true |
---
@@ -522,7 +532,7 @@ When `accessible` is `true`, the system will invoke this function when the user
---
-### `onAccessibilityTap`
+### `onAccessibilityTap` iOS
When `accessible` is true, the system will try to invoke this function when the user performs accessibility tap gesture.
diff --git a/package.json b/package.json
index c154b1ea7fb..95b77b24af3 100644
--- a/package.json
+++ b/package.json
@@ -22,22 +22,22 @@
}
},
"dependencies": {
- "babel-eslint": "^10.1.0",
"case-police": "^0.5.14",
"eslint": "^8.20.0",
- "eslint-config-prettier": "^8.5.0",
- "eslint-plugin-mdx": "^1.16.0",
- "eslint-plugin-prettier": "^4.2.1",
+ "eslint-config-prettier": "^9.1.0",
+ "eslint-plugin-mdx": "^3.1.5",
+ "eslint-plugin-prettier": "^5.2.1",
"eslint-plugin-yml": "^1.2.0",
"husky": "^4.3.8",
"netlify-plugin-cache": "^1.0.3",
- "prettier": "^2.7.1",
- "pretty-quick": "^3.1.3",
+ "prettier": "^3.4.2",
+ "pretty-quick": "^4.0.0",
"yarn-deduplicate": "^5.0.0"
},
"resolutions": {
"trim": "^1.0.1",
"update-notifier": "^6.0.2",
"@sideway/formula": ">=3.0.1"
- }
+ },
+ "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
}
diff --git a/plugins/remark-lint-no-dead-urls/package.json b/plugins/remark-lint-no-dead-urls/package.json
index 6ee923e1c57..c42069a21af 100644
--- a/plugins/remark-lint-no-dead-urls/package.json
+++ b/plugins/remark-lint-no-dead-urls/package.json
@@ -14,7 +14,7 @@
"src/*"
],
"scripts": {
- "prettier": "prettier --write \"{src/**/*.js,tests/**/*.js,*.md}\"",
+ "prettier": "prettier --write '{src,tests}/**/*.{md,js,jsx,ts,tsx}'",
"test": "yarn node --experimental-vm-modules $(yarn bin jest)"
},
"dependencies": {
diff --git a/plugins/remark-snackplayer/package.json b/plugins/remark-snackplayer/package.json
index a2d50cb0690..366cdf3afdf 100644
--- a/plugins/remark-snackplayer/package.json
+++ b/plugins/remark-snackplayer/package.json
@@ -15,7 +15,7 @@
"src"
],
"scripts": {
- "prettier": "prettier --write \"{src/**/*.js,tests/**/*.js,*.md}\"",
+ "prettier": "prettier --write '{src,tests}/**/*.{md,js,jsx,ts,tsx}'",
"test": "yarn tape tests/index.js"
},
"dependencies": {
diff --git a/website/.remarkrc.mjs b/website/.remarkrc.mjs
index 9361cad8394..f019fea1116 100644
--- a/website/.remarkrc.mjs
+++ b/website/.remarkrc.mjs
@@ -2,20 +2,21 @@ import packageJson from "./package.json" assert { type: "json" };
export default {
plugins: [
- [
- "@react-native-website/remark-lint-no-broken-external-links",
- {
- skipUrlPatterns: [
- // False positive, flagged as a bot and rate limited
- "www.apkfiles.com",
- // TODO: replace the 2048 example repository with another suitable project
- "github.com/JoelMarcey",
- ],
- baseUrl: "https://reactnative.dev/docs",
- headers: {
- "user-agent": `${packageJson.name}/${packageJson.version}`,
- },
- },
- ],
+ // TODO: Enable the plugin once a more performant solution is found
+ // [
+ // "@react-native-website/remark-lint-no-broken-external-links",
+ // {
+ // skipUrlPatterns: [
+ // // False positive, flagged as a bot and rate limited
+ // "www.apkfiles.com",
+ // // TODO: replace the 2048 example repository with another suitable project
+ // "github.com/JoelMarcey",
+ // ],
+ // baseUrl: "https://reactnative.dev/docs",
+ // headers: {
+ // "user-agent": `${packageJson.name}/${packageJson.version}`,
+ // },
+ // },
+ // ],
],
};
diff --git a/website/architecture/landing-page.md b/website/architecture/landing-page.md
index b7e7e5e31b4..2cb2231740a 100644
--- a/website/architecture/landing-page.md
+++ b/website/architecture/landing-page.md
@@ -209,7 +209,7 @@ You can follow along and contribute in our dedicated [discussions & proposals](h
With 0.76, The New Architecture is enabled by default in all the React Native projects.
-If you find aything that is not working well, please open an issue using [this template](https://github.com/facebook/react-native/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2CType%3A+New+Architecture&projects=&template=new_architecture_bug_report.yml).
+If you find anything that is not working well, please open an issue using [this template](https://github.com/facebook/react-native/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2CType%3A+New+Architecture&projects=&template=new_architecture_bug_report.yml).
If, for any reasons, you can't use the New Architecture, you can still opt-out from it:
@@ -232,12 +232,14 @@ If, for any reasons, you can't use the New Architecture, you can still opt-out f
1. Open the `ios/Podfile` file
2. Add `ENV['RCT_NEW_ARCH_ENABLED'] = '0'` in the main scope of the Podfile ([reference Podfile](https://github.com/react-native-community/template/blob/0.76-stable/template/ios/Podfile) in the template)
+
```diff
+ ENV['RCT_NEW_ARCH_ENABLED'] = '0'
# Resolve react_native_pods.rb with node to allow for hoisting
require Pod::Executable.execute_command('node', ['-p',
'require.resolve(
```
+
3. Install your CocoaPods dependencies with the command:
```shell
diff --git a/website/blog/2017-03-13-idx-the-existential-function.md b/website/blog/2017-03-13-idx-the-existential-function.md
index 9bb8bac1410..650fbe4166e 100644
--- a/website/blog/2017-03-13-idx-the-existential-function.md
+++ b/website/blog/2017-03-13-idx-the-existential-function.md
@@ -40,10 +40,10 @@ In practice, try-catching every nested property access is slow, and differentiat
props.user == null
? props.user
: props.user.friends == null
- ? props.user.friends
- : props.user.friends[0] == null
- ? props.user.friends[0]
- : props.user.friends[0].friends;
+ ? props.user.friends
+ : props.user.friends[0] == null
+ ? props.user.friends[0]
+ : props.user.friends[0].friends;
```
Finally, we added a custom Flow type declaration for `idx` that allows the traversal in the second argument to be properly type-checked while permitting nested access on nullable properties.
diff --git a/website/blog/authors.yml b/website/blog/authors.yml
index 0c10f2d122f..8034baea675 100644
--- a/website/blog/authors.yml
+++ b/website/blog/authors.yml
@@ -155,7 +155,7 @@ huntie:
name: Alex Hunt
title: Software Engineer at Meta
socials:
- x: alxhnt
+ x: huntie
github: huntie
image_url: https://github.com/huntie.png
diff --git a/website/contributing/how-to-open-a-pull-request.md b/website/contributing/how-to-open-a-pull-request.md
index 408fa16ea38..1b3eeb6224e 100644
--- a/website/contributing/how-to-open-a-pull-request.md
+++ b/website/contributing/how-to-open-a-pull-request.md
@@ -77,11 +77,15 @@ IDE project configurations:
- **Android Studio**: Open the repo root folder (containing the `.idea` config directory).
- **Xcode**: Open `packages/rn-tester/RNTesterPods.xcworkspace`.
-### 3. Test your changes
+### 3. Run your changes
+
+The package rn-tester can be used to run and validate your changes. You can learn more in [RNTester readme](https://github.com/facebook/react-native/blob/main/packages/rn-tester/README.md).
+
+### 4. Test your changes
Make sure your changes are correct and do not introduce any test failures. You can learn more in [Running and Writing Tests](/contributing/how-to-run-and-write-tests).
-### 4. Lint your code
+### 5. Lint your code
We understand it can take a while to ramp up and get a sense of the style followed for each of the languages in use in the core React Native repository. Developers should not need to worry about minor nits, so whenever possible, we use tools that automate the process of rewriting your code to follow conventions.
@@ -91,7 +95,7 @@ We also use a linter to catch styling issues that may exist in your code. You ca
To learn more about coding conventions, refer to the [Coding Style guide](/contributing/how-to-contribute-code#coding-style).
-### 5. View your changes
+### 6. View your changes
Many popular editors integrate with source control in some way. You can also use `git status` and `git diff` on the command line to keep track of what has changed.
diff --git a/website/core/DocsRating.js b/website/core/DocsRating.tsx
similarity index 98%
rename from website/core/DocsRating.js
rename to website/core/DocsRating.tsx
index 95aa627e6b9..e78e1aca6a3 100644
--- a/website/core/DocsRating.js
+++ b/website/core/DocsRating.tsx
@@ -37,7 +37,7 @@ const DocsRating = ({label}) => {
Is this page useful?