Skip to content

Commit 12ac81f

Browse files
rubennortefacebook-github-bot
authored andcommitted
Add MutationObserver and IntersectionObserver types in bom.js.flow
Summary: Adds Flow type definitions for `MutationObserver` (and its related types `MutationRecord` and `MutationObserverInit`) and `IntersectionObserver` (and its related types `IntersectionObserverEntry`, `IntersectionObserverCallback` and `IntersectionObserverOptions`) to React Native's library definitions, reflecting the features supported by the React Native implementations. Changelog: [internal] Differential Revision: D102597515
1 parent 9765bbf commit 12ac81f

2 files changed

Lines changed: 92 additions & 4 deletions

File tree

packages/react-native/flow/bom.js.flow

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -327,6 +327,98 @@ declare class DOMRectList {
327327
[index: number]: DOMRect;
328328
}
329329

330+
declare class MutationRecord {
331+
// Always an empty NodeList for `attributes` and `characterData` mutations.
332+
// React Native currently only supports `childList`, so this contains the
333+
// added nodes for that mutation type.
334+
+addedNodes: NodeList<Node>;
335+
// Always `null` in React Native (only `childList` mutations are supported).
336+
+attributeName: null;
337+
// Always `null` in React Native (only `childList` mutations are supported).
338+
+nextSibling: null;
339+
// Always `null` in React Native (only `childList` mutations are supported,
340+
// and `attributeOldValue`/`characterDataOldValue` are not supported).
341+
+oldValue: null;
342+
// Always `null` in React Native (only `childList` mutations are supported).
343+
+previousSibling: null;
344+
// Always an empty NodeList for `attributes` and `characterData` mutations.
345+
// React Native currently only supports `childList`, so this contains the
346+
// removed nodes for that mutation type.
347+
+removedNodes: NodeList<Node>;
348+
+target: Node;
349+
// React Native currently only supports `childList` mutations.
350+
+type: 'childList';
351+
}
352+
353+
// React Native currently only supports `childList` mutations, so `childList`
354+
// is required and must be `true`. The `attributes`/`attributeFilter`/
355+
// `attributeOldValue`/`characterData`/`characterDataOldValue` options are not
356+
// supported and will throw if provided.
357+
declare type MutationObserverInit = {
358+
+childList: true,
359+
+subtree?: boolean,
360+
...
361+
};
362+
363+
declare class MutationObserver {
364+
constructor(
365+
callback: (
366+
arr: Array<MutationRecord>,
367+
observer: MutationObserver,
368+
) => unknown,
369+
): void;
370+
disconnect(): void;
371+
observe(target: Node, options: MutationObserverInit): void;
372+
}
373+
374+
declare type IntersectionObserverEntry = {
375+
+boundingClientRect: DOMRectReadOnly,
376+
+intersectionRatio: number,
377+
+intersectionRect: DOMRectReadOnly,
378+
+isIntersecting: boolean,
379+
// Always non-null in React Native.
380+
+rootBounds: DOMRectReadOnly,
381+
// React Native-specific extension. Equivalent to `intersectionRatio` but
382+
// computed against the `rnRootThreshold` root-relative thresholds.
383+
+rnRootIntersectionRatio: number,
384+
+target: Element,
385+
+time: DOMHighResTimeStamp,
386+
...
387+
};
388+
389+
declare type IntersectionObserverCallback = (
390+
entries: Array<IntersectionObserverEntry>,
391+
observer: IntersectionObserver,
392+
) => unknown;
393+
394+
declare type IntersectionObserverOptions = {
395+
root?: Node | null,
396+
rootMargin?: string,
397+
threshold?: number | Array<number>,
398+
// React Native-specific extension. Thresholds expressed as a fraction of the
399+
// root's size (instead of the target's size).
400+
rnRootThreshold?: number | Array<number>,
401+
...
402+
};
403+
404+
// The `delay`, `scrollMargin` and `trackVisibility` options are not supported
405+
// in React Native and will throw if provided.
406+
declare class IntersectionObserver {
407+
constructor(
408+
callback: IntersectionObserverCallback,
409+
options?: IntersectionObserverOptions,
410+
): void;
411+
disconnect(): void;
412+
observe(target: Element): void;
413+
+root: Element | null;
414+
+rootMargin: string;
415+
// React Native-specific extension. The thresholds expressed as a fraction of
416+
// the root's size (set via the `rnRootThreshold` option).
417+
+rnRootThresholds: ReadonlyArray<number> | null;
418+
+thresholds: ReadonlyArray<number>;
419+
unobserve(target: Element): void;
420+
}
421+
330422
declare class CloseEvent extends Event {
331423
code: number;
332424
reason: string;

packages/rn-tester/js/examples/IntersectionObserver/IntersectionObserverMDNExample.js

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,6 @@
88
* @format
99
*/
1010

11-
import type IntersectionObserverType from 'react-native/src/private/webapis/intersectionobserver/IntersectionObserver';
12-
1311
import {RNTesterThemeContext} from '../../components/RNTesterTheme';
1412
import * as React from 'react';
1513
import {
@@ -21,8 +19,6 @@ import {
2119
} from 'react';
2220
import {Button, ScrollView, StyleSheet, Text, View} from 'react-native';
2321

24-
declare var IntersectionObserver: Class<IntersectionObserverType>;
25-
2622
export const name = 'IntersectionObserver MDN Example';
2723
export const title = name;
2824
export const description =

0 commit comments

Comments
 (0)