docs: async docs (#1806)

Author: mdjastrzebski

website/docs/13.x/docs/api/events/fire-event.mdx

@@ -1,8 +1,6 @@
 # Fire Event API
 
-```ts
-function fireEvent(element: ReactTestInstance, eventName: string, ...data: unknown[]): void;
-```
+## `fireEvent` {#fire-event}
 
 :::note
 For common events like `press` or `type` it's recommended to use [User Event API](docs/api/events/user-event) as it offers
@@ -11,6 +9,10 @@ more realistic event simulation by emitting a sequence of events with proper eve
 Use Fire Event for cases not supported by User Event and for triggering event handlers on composite components.
 :::
 
+```ts
+function fireEvent(element: ReactTestInstance, eventName: string, ...data: unknown[]): void;
+```
+
 The `fireEvent` API allows you to trigger all kinds of event handlers on both host and composite components. It will try to invoke a single event handler traversing the component tree bottom-up from passed element and trying to find enabled event handler named `onXxx` when `xxx` is the name of the event passed.
 
 Unlike User Event, this API does not automatically pass event object to event handler, this is responsibility of the user to construct such object.
@@ -57,14 +59,17 @@ FireEvent exposes convenience methods for common events like: `press`, `changeTe
 
 ### `fireEvent.press` {#press}
 
-```
-fireEvent.press: (element: ReactTestInstance, ...data: Array<any>) => void
-```
-
 :::note
 It is recommended to use the User Event [`press()`](docs/api/events/user-event#press) helper instead as it offers more realistic simulation of press interaction, including pressable support.
 :::
 
+```tsx
+fireEvent.press: (
+  element: ReactTestInstance,
+  ...data: Array<any>,
+) => void
+```
+
 Invokes `press` event handler on the element or parent element in the tree.
 
 ```jsx
@@ -93,14 +98,17 @@ expect(onPressMock).toHaveBeenCalledWith(eventData);
 
 ### `fireEvent.changeText` {#change-text}
 
-```
-fireEvent.changeText: (element: ReactTestInstance, ...data: Array<any>) => void
-```
-
 :::note
 It is recommended to use the User Event [`type()`](docs/api/events/user-event#type) helper instead as it offers more realistic simulation of text change interaction, including key-by-key typing, element focus, and other editing events.
 :::
 
+```tsx
+fireEvent.changeText: (
+  element: ReactTestInstance,
+  ...data: Array<any>,
+) => void
+```
+
 Invokes `changeText` event handler on the element or parent element in the tree.
 
 ```jsx
@@ -121,8 +129,15 @@ fireEvent.changeText(screen.getByPlaceholderText('Enter data'), CHANGE_TEXT);
 
 ### `fireEvent.scroll` {#scroll}
 
-```
-fireEvent.scroll: (element: ReactTestInstance, ...data: Array<any>) => void
+:::note
+Prefer using [`user.scrollTo`](docs/api/events/user-event#scrollto) over `fireEvent.scroll` for `ScrollView`, `FlatList`, and `SectionList` components. User Event provides a more realistic event simulation based on React Native runtime behavior.
+:::
+
+```tsx
+fireEvent.scroll: (
+  element: ReactTestInstance,
+  ...data: Array<any>,
+) => void
 ```
 
 Invokes `scroll` event handler on the element or parent element in the tree.
@@ -152,12 +167,10 @@ fireEvent.scroll(screen.getByText('scroll-view'), eventData);
 ```
 
 :::note
-
 Prefer using [`user.scrollTo`](docs/api/events/user-event#scrollto) over `fireEvent.scroll` for `ScrollView`, `FlatList`, and `SectionList` components. User Event provides a more realistic event simulation based on React Native runtime behavior.
-
 :::
 
-## `fireEventAsync`
+## `fireEventAsync` {#fire-event-async}
 
 :::info RNTL minimal version
 
@@ -173,7 +186,7 @@ async function fireEventAsync(
 ): Promise<unknown>;
 ```
 
-The `fireEventAsync` function is the async version of `fireEvent` designed for working with React 19 and React Suspense. This function uses async `act` function internally to ensure all pending React updates are executed during event handling.
+The `fireEventAsync` function is the async version of [`fireEvent`](#fire-event) designed for working with React 19 and React Suspense. This function uses async `act` function internally to ensure all pending React updates are executed during event handling.
 
 ```jsx
 import { renderAsync, screen, fireEventAsync } from '@testing-library/react-native';
@@ -190,24 +203,45 @@ Like `fireEvent`, `fireEventAsync` also provides convenience methods for common
 
 ### `fireEventAsync.press` {#async-press}
 
-```
-fireEventAsync.press: (element: ReactTestInstance, ...data: Array<any>) => Promise<unknown>
+:::note
+It is recommended to use the User Event [`press()`](docs/api/events/user-event#press) helper instead as it offers more realistic simulation of press interaction, including pressable support.
+:::
+
+```tsx
+fireEventAsync.press: (
+  element: ReactTestInstance,
+  ...data: Array<any>,
+) => Promise<unknown>
 ```
 
-Async version of `fireEvent.press` designed for React 19 and React Suspense. Use when press event handlers trigger suspense boundaries.
+Async version of [`fireEvent.press`](#press) designed for React 19 and React Suspense. Use when `press` event handlers trigger suspense boundaries.
 
 ### `fireEventAsync.changeText` {#async-change-text}
 
-```
-fireEventAsync.changeText: (element: ReactTestInstance, ...data: Array<any>) => Promise<unknown>
+:::note
+It is recommended to use the User Event [`type()`](docs/api/events/user-event#type) helper instead as it offers more realistic simulation of text change interaction, including key-by-key typing, element focus, and other editing events.
+:::
+
+```tsx
+fireEventAsync.changeText: (
+  element: ReactTestInstance,
+  ...data: Array<any>,
+) => Promise<unknown>
 ```
 
-Async version of `fireEvent.changeText` designed for React 19 and React Suspense. Use when changeText event handlers trigger suspense boundaries.
+Async version of [`fireEvent.changeText`](#change-text) designed for React 19 and React Suspense. Use when `changeText` event handlers trigger suspense boundaries.
 
 ### `fireEventAsync.scroll` {#async-scroll}
 
-```
-fireEventAsync.scroll: (element: ReactTestInstance, ...data: Array<any>) => Promise<unknown>
+:::note
+Prefer using [`user.scrollTo`](docs/api/events/user-event#scrollto) over `fireEventAsync.scroll` for `ScrollView`, `FlatList`, and `SectionList` components. User Event provides a more realistic event simulation based on React Native runtime behavior.
+:::
+
+```tsx
+fireEventAsync.scroll: (
+  element: ReactTestInstance,
+  ...data: Array<any>,
+) => Promise<unknown>
 ```
 
-Async version of `fireEvent.scroll` designed for React 19 and React Suspense. Use when scroll event handlers trigger suspense boundaries.
+Async version of [`fireEvent.scroll`](#scroll) designed for React 19 and React Suspense. Use when `scroll` event handlers trigger suspense boundaries.

website/docs/13.x/docs/api/events/user-event.mdx

@@ -226,10 +226,6 @@ Events will not be emitted if the `editable` prop is set to `false`.
 
 ## `scrollTo()` \{#scroll-to}
 
-:::note
-`scrollTo` interaction has been introduced in RNTL v12.4.0.
-:::
-
 ```ts
 scrollTo(
   element: ReactTestInstance,

website/docs/13.x/docs/api/misc/render-hook.mdx

@@ -1,5 +1,7 @@
 # `renderHook` function
 
+## `renderHook`
+
 ```ts
 function renderHook<Result, Props>(
   hookFn: (props?: Props) => Result,
@@ -41,15 +43,15 @@ Callback is a function that is called each `render` of the test component. This
 
 The `props` passed into the callback will be the `initialProps` provided in the `options` to `renderHook`, unless new props are provided by a subsequent `rerender` call.
 
-## `options`
+### `options`
 
 A `RenderHookOptions<Props>` object to modify the execution of the `callback` function, containing the following properties:
 
-### `initialProps` {#initial-props}
+#### `initialProps` {#initial-props}
 
 The initial values to pass as `props` to the `callback` function of `renderHook`. The `Props` type is determined by the type passed to or inferred by the `renderHook` call.
 
-### `wrapper`
+#### `wrapper`
 
 A React component to wrap the test component in when rendering. This is usually used to add context providers from `React.createContext` for the hook to access with `useContext`.
 
@@ -58,7 +60,7 @@ A React component to wrap the test component in when rendering. This is usually
 Set to `false` to disable concurrent rendering.
 Otherwise, `render` will default to using concurrent rendering used in the React Native New Architecture.
 
-## Result
+### Result
 
 ```ts
 interface RenderHookResult<Result, Props> {
@@ -70,23 +72,23 @@ interface RenderHookResult<Result, Props> {
 
 The `renderHook` function returns an object that has the following properties:
 
-### `result`
+#### `result`
 
 The `current` value of the `result` will reflect the latest of whatever is returned from the `callback` passed to `renderHook`. The `Result` type is determined by the type passed to or inferred by the `renderHook` call.
 
-### `rerender`
+#### `rerender`
 
 A function to rerender the test component, causing any hooks to be recalculated. If `newProps` are passed, they will replace the `callback` function's `initialProps` for subsequent rerenders. The `Props` type is determined by the type passed to or inferred by the `renderHook` call.
 
-### `unmount`
+#### `unmount`
 
 A function to unmount the test component. This is commonly used to trigger cleanup effects for `useEffect` hooks.
 
-## Examples
+### Examples
 
 Here we present some extra examples of using `renderHook` API.
 
-### With `initialProps`
+#### With `initialProps`
 
 ```ts
 const useCount = (initialCount: number) => {
@@ -117,7 +119,7 @@ it('should increment count', () => {
 });
 ```
 
-### With `wrapper`
+#### With `wrapper`
 
 ```tsx
 it('should use context value', () => {
@@ -150,18 +152,18 @@ Async versions of `renderHook` designed for working with React 19 and React Susp
 ```ts
 interface RenderHookAsyncResult<Result, Props> {
   result: { current: Result };
-  rerender: (props: Props) => Promise<void>;
-  unmount: () => Promise<void>;
+  rerenderAsync: (props: Props) => Promise<void>;
+  unmountAsync: () => Promise<void>;
 }
 ```
 
-The `RenderHookAsyncResult` differs from `RenderHookResult` in that `rerender` and `unmount` are async functions.
+The `RenderHookAsyncResult` differs from `RenderHookResult` in that `rerenderAsync` and `unmountAsync` are async functions.
 
 ```ts
 import { renderHookAsync, act } from '@testing-library/react-native';
 
 test('should handle async hook behavior', async () => {
-  const { result, rerender } = await renderHookAsync(useAsyncHook);
+  const { result, rerenderAsync } = await renderHookAsync(useAsyncHook);
 
   // Test initial state
   expect(result.current.loading).toBe(true);
@@ -172,7 +174,7 @@ test('should handle async hook behavior', async () => {
   });
 
   // Re-render to get updated state
-  await rerender();
+  await rerenderAsync();
   expect(result.current.loading).toBe(false);
 });
 ```

website/docs/13.x/docs/api/render.mdx

@@ -1,4 +1,6 @@
-# `render` function
+# `render` API
+
+## `render` function {#render}
 
 ```jsx
 function render(
@@ -20,32 +22,32 @@ test('basic test', () => {
 
 > When using React context providers, like Redux Provider, you'll likely want to wrap rendered component with them. In such cases, it's convenient to create your own custom `render` method. [Follow this great guide on how to set this up](https://testing-library.com/docs/react-testing-library/setup#custom-render).
 
-## Options
+### Options
 
 The behavior of the `render` method can be customized by passing various options as a second argument of the `RenderOptions` type:
 
-### `wrapper` option
+#### `wrapper`
 
 ```ts
 wrapper?: React.ComponentType<any>,
 ```
 
 This option allows you to wrap the tested component, passed as the first option to the `render()` function, in an additional wrapper component. This is useful for creating reusable custom render functions for common React Context providers.
 
-### `concurrentRoot` option {#concurrent-root}
+#### `concurrentRoot` {#concurrent-root}
 
 Set to `false` to disable concurrent rendering.
 Otherwise, `render` will default to using concurrent rendering used in the React Native New Architecture.
 
-### `createNodeMock` option
+#### `createNodeMock` {#create-node-mock}
 
 ```ts
 createNodeMock?: (element: React.Element) => unknown,
 ```
 
 This option allows you to pass `createNodeMock` option to `ReactTestRenderer.create()` method in order to allow for custom mock refs. You can learn more about this option from [React Test Renderer documentation](https://reactjs.org/docs/test-renderer.html#ideas).
 
-### `unstable_validateStringsRenderedWithinText` option
+#### `unstable_validateStringsRenderedWithinText`
 
 ```ts
 unstable_validateStringsRenderedWithinText?: boolean;
@@ -59,13 +61,13 @@ This **experimental** option allows you to replicate React Native behavior of th
 
 React Test Renderer does not enforce this check; hence, by default, React Native Testing Library also does not check this. That might result in runtime errors when running your code on a device, while the code works without errors in tests.
 
-## Result
+### Result
 
 The `render` function returns the same queries and utilities as the [`screen`](docs/api/screen) object. We recommended using the `screen` object as more developer-friendly way.
 
 See [this article](https://kentcdodds.com/blog/common-mistakes-with-react-testing-library#not-using-screen) from Kent C. Dodds for more details.
 
-## `renderAsync` function
+## `renderAsync` function {#render-async}
 
 :::info RNTL minimal version
 
@@ -80,7 +82,7 @@ async function renderAsync(
 ): Promise<RenderAsyncResult>;
 ```
 
-The `renderAsync` function is the async version of `render` designed for working with React 19 and React Suspense. This function uses async `act` function internally to ensure all pending React updates are executed during rendering.
+The `renderAsync` function is the async version of [`render`](#render) designed for working with React 19 and React Suspense. This function uses async `act` function internally to ensure all pending React updates are executed during rendering.
 
 ```jsx
 import { renderAsync, screen } from '@testing-library/react-native';

website/docs/13.x/docs/api/screen.mdx

@@ -46,26 +46,22 @@ Re-render the in-memory tree with a new root element. This simulates a React upd
 _Also available under `updateAsync` alias_
 
 :::info RNTL minimal version
-
 This API requires RNTL v13.3.0 or later.
-
 :::
 
 ```ts
 function rerenderAsync(element: React.Element<unknown>): Promise<void>;
 ```
 
-Async versions of `rerender` designed for working with React 19 and React Suspense. This method uses async `act` function internally to ensure all pending React updates are executed during updating.
+Async versions of [`rerender`](#rerender) designed for working with React 19 and React Suspense. This method uses async `act` function internally to ensure all pending React updates are executed during updating.
 
 ```jsx
 import { renderAsync, screen } from '@testing-library/react-native';
 
 test('async rerender test', async () => {
   await renderAsync(<MyComponent initialData="first" />);
 
-  // Use async rerender when component has suspense or async behavior
   await screen.rerenderAsync(<MyComponent initialData="updated" />);
-
   expect(screen.getByText('updated')).toBeOnTheScreen();
 });
 ```
@@ -87,21 +83,17 @@ Usually you should not need to call `unmount` as it is done automatically if you
 ### `unmountAsync`
 
 :::info RNTL minimal version
-
 This API requires RNTL v13.3.0 or later.
-
 :::
 
 ```ts
 function unmountAsync(): Promise<void>;
 ```
 
-Async version of `unmount` designed for working with React 19 and React Suspense. This method uses async `act` function internally to ensure all pending React updates are executed during unmounting.
+Async version of [`unmount`](#unmount) designed for working with React 19 and React Suspense. This method uses async `act` function internally to ensure all pending React updates are executed during unmounting.
 
 :::note
-
 Usually you should not need to call `unmountAsync` as it is done automatically if your test runner supports `afterEach` hook (like Jest, mocha, Jasmine).
-
 :::
 
 ### `debug`