react-native-web-tv 0.21.2-tv.10

package/dist/exports/UIManager/index.js.flow

@@ -0,0 +1,92 @@
+/**
+ * Copyright (c) Nicolas Gallagher.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @noflow
+ */
+
+import getBoundingClientRect from '../../modules/getBoundingClientRect';
+import setValueForStyles from '../../modules/setValueForStyles';
+declare var getRect: (node: any) => any;
+declare var measureLayout: (node: any, relativeToNativeNode: any, callback: any) => any;
+const elementsToIgnore = {
+  A: true,
+  BODY: true,
+  INPUT: true,
+  SELECT: true,
+  TEXTAREA: true
+};
+const UIManager = {
+  blur(node) {
+    try {
+      node.blur();
+    } catch (err) {}
+  },
+  focus(node) {
+    try {
+      const name = node.nodeName;
+      // A tabIndex of -1 allows element to be programmatically focused but
+      // prevents keyboard focus. We don't want to set the tabindex value on
+      // elements that should not prevent keyboard focus.
+      if (node.getAttribute('tabIndex') == null && node.isContentEditable !== true && elementsToIgnore[name] == null) {
+        node.setAttribute('tabIndex', '-1');
+      }
+      node.focus();
+    } catch (err) {}
+  },
+  measure(node, callback) {
+    measureLayout(node, null, callback);
+  },
+  measureInWindow(node, callback) {
+    if (node) {
+      setTimeout(() => {
+        const {
+          height,
+          left,
+          top,
+          width
+        } = getBoundingClientRect(node);
+        callback(left, top, width, height);
+      }, 0);
+    }
+  },
+  measureLayout(node, relativeToNativeNode, onFail, onSuccess) {
+    measureLayout(node, relativeToNativeNode, onSuccess);
+  },
+  updateView(node, props) {
+    for (const prop in props) {
+      if (!Object.prototype.hasOwnProperty.call(props, prop)) {
+        continue;
+      }
+      const value = props[prop];
+      switch (prop) {
+        case 'style':
+          {
+            setValueForStyles(node, value);
+            break;
+          }
+        case 'class':
+        case 'className':
+          {
+            node.setAttribute('class', value);
+            break;
+          }
+        case 'text':
+        case 'value':
+          // native platforms use `text` prop to replace text input value
+          node.value = value;
+          break;
+        default:
+          node.setAttribute(prop, value);
+      }
+    }
+  },
+  configureNextLayoutAnimation(config, onAnimationDidEnd) {
+    onAnimationDidEnd();
+  },
+  // mocks
+  setLayoutAnimationEnabledExperimental() {}
+};
+export default UIManager;

package/dist/exports/Vibration/index.js

@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) Nicolas Gallagher.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+
+var vibrate = pattern => {
+  if ('vibrate' in window.navigator) {
+    window.navigator.vibrate(pattern);
+  }
+};
+var Vibration = {
+  cancel() {
+    vibrate(0);
+  },
+  vibrate(pattern) {
+    if (pattern === void 0) {
+      pattern = 400;
+    }
+    vibrate(pattern);
+  }
+};
+export default Vibration;

package/dist/exports/Vibration/index.js.flow

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) Nicolas Gallagher.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+type VibratePattern = number | Array<number>;
+declare var vibrate: (pattern: VibratePattern) => any;
+const Vibration = {
+  cancel() {
+    vibrate(0);
+  },
+  vibrate(pattern: VibratePattern = 400) {
+    vibrate(pattern);
+  }
+};
+export default Vibration;

package/dist/exports/View/index.js

@@ -0,0 +1,172 @@
+/**
+ * Copyright (c) Nicolas Gallagher.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ * Modifications copyright (c) 2026 Harpreet Singh.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+
+'use client';
+
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["hrefAttrs", "onLayout", "onMoveShouldSetResponder", "onMoveShouldSetResponderCapture", "onResponderEnd", "onResponderGrant", "onResponderMove", "onResponderReject", "onResponderRelease", "onResponderStart", "onResponderTerminate", "onResponderTerminationRequest", "onScrollShouldSetResponder", "onScrollShouldSetResponderCapture", "onSelectionChangeShouldSetResponder", "onSelectionChangeShouldSetResponderCapture", "onStartShouldSetResponder", "onStartShouldSetResponderCapture", "hasTVPreferredFocus"];
+import * as React from 'react';
+import createElement from '../createElement';
+import * as forwardedProps from '../../modules/forwardedProps';
+import pick from '../../modules/pick';
+import useElementLayout from '../../modules/useElementLayout';
+import useMergeRefs from '../../modules/useMergeRefs';
+import usePlatformMethods from '../../modules/usePlatformMethods';
+import useResponderEvents from '../../modules/useResponderEvents';
+import StyleSheet from '../StyleSheet';
+import TextAncestorContext from '../Text/TextAncestorContext';
+import { useLocaleContext, getLocaleDirection } from '../../modules/useLocale';
+import Platform from '../Platform';
+import { setFocus } from '../../modules/SpatialManager';
+var forwardPropsList = Object.assign({}, forwardedProps.defaultProps, forwardedProps.accessibilityProps, forwardedProps.clickProps, forwardedProps.focusProps, forwardedProps.keyboardProps, forwardedProps.tvViewProps, forwardedProps.tvFocusGuideViewProps, forwardedProps.mouseProps, forwardedProps.touchProps, forwardedProps.styleProps, {
+  href: true,
+  lang: true,
+  onScroll: true,
+  onWheel: true,
+  pointerEvents: true
+});
+var pickProps = props => pick(props, forwardPropsList);
+var View = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
+  var hrefAttrs = props.hrefAttrs,
+    onLayout = props.onLayout,
+    onMoveShouldSetResponder = props.onMoveShouldSetResponder,
+    onMoveShouldSetResponderCapture = props.onMoveShouldSetResponderCapture,
+    onResponderEnd = props.onResponderEnd,
+    onResponderGrant = props.onResponderGrant,
+    onResponderMove = props.onResponderMove,
+    onResponderReject = props.onResponderReject,
+    onResponderRelease = props.onResponderRelease,
+    onResponderStart = props.onResponderStart,
+    onResponderTerminate = props.onResponderTerminate,
+    onResponderTerminationRequest = props.onResponderTerminationRequest,
+    onScrollShouldSetResponder = props.onScrollShouldSetResponder,
+    onScrollShouldSetResponderCapture = props.onScrollShouldSetResponderCapture,
+    onSelectionChangeShouldSetResponder = props.onSelectionChangeShouldSetResponder,
+    onSelectionChangeShouldSetResponderCapture = props.onSelectionChangeShouldSetResponderCapture,
+    onStartShouldSetResponder = props.onStartShouldSetResponder,
+    onStartShouldSetResponderCapture = props.onStartShouldSetResponderCapture,
+    hasTVPreferredFocus = props.hasTVPreferredFocus,
+    rest = _objectWithoutPropertiesLoose(props, _excluded);
+  if (process.env.NODE_ENV !== 'production') {
+    React.Children.toArray(props.children).forEach(item => {
+      if (typeof item === 'string') {
+        console.error("Unexpected text node: " + item + ". A text node cannot be a child of a <View>.");
+      }
+    });
+  }
+  var hasTextAncestor = React.useContext(TextAncestorContext);
+  var hostRef = React.useRef(null);
+  var _useLocaleContext = useLocaleContext(),
+    contextDirection = _useLocaleContext.direction;
+  useElementLayout(hostRef, onLayout);
+  useResponderEvents(hostRef, {
+    onMoveShouldSetResponder,
+    onMoveShouldSetResponderCapture,
+    onResponderEnd,
+    onResponderGrant,
+    onResponderMove,
+    onResponderReject,
+    onResponderRelease,
+    onResponderStart,
+    onResponderTerminate,
+    onResponderTerminationRequest,
+    onScrollShouldSetResponder,
+    onScrollShouldSetResponderCapture,
+    onSelectionChangeShouldSetResponder,
+    onSelectionChangeShouldSetResponderCapture,
+    onStartShouldSetResponder,
+    onStartShouldSetResponderCapture
+  });
+  var component = 'div';
+  var langDirection = props.lang != null ? getLocaleDirection(props.lang) : null;
+  var componentDirection = props.dir || langDirection;
+  var writingDirection = componentDirection || contextDirection;
+  var supportedProps = pickProps(rest);
+  supportedProps.dir = componentDirection;
+  supportedProps.style = [styles.view$raw, hasTextAncestor && styles.inline, props.style];
+  if (props.href != null) {
+    component = 'a';
+    if (hrefAttrs != null) {
+      var download = hrefAttrs.download,
+        rel = hrefAttrs.rel,
+        target = hrefAttrs.target;
+      if (download != null) {
+        supportedProps.download = download;
+      }
+      if (rel != null) {
+        supportedProps.rel = rel;
+      }
+      if (typeof target === 'string') {
+        supportedProps.target = target.charAt(0) !== '_' ? '_' + target : target;
+      }
+    }
+  }
+  var requestTVFocus = React.useCallback(() => {
+    setFocus(hostRef.current);
+  }, []);
+  var setLocalRef = React.useCallback(instance => {
+    // $FlowExpectedError[incompatible-type]
+    hostRef.current = instance;
+    if (instance != null) {
+      // $FlowFixMe[prop-missing]
+      // $FlowFixMe[unsafe-object-assign]
+      Object.assign(instance, {
+        requestTVFocus
+      });
+    }
+  }, [requestTVFocus]);
+
+  // On mount trigger focus event
+  // if hasTVPreferredFocus is set (TV platforms only)
+  React.useEffect(() => {
+    var _hostRef$current;
+    // The only possible way to (accurately) get this is from the tabindex
+    // attribute, as the current code in CreateDOMProps uses the other props
+    // to finally derive whether an element can be focussed or not.
+    var isFocusable = ((_hostRef$current = hostRef.current) == null ? void 0 : _hostRef$current.getAttribute('tabindex')) === '0';
+    if (Platform.isTV && hasTVPreferredFocus && isFocusable) {
+      setFocus(hostRef.current);
+    }
+  }, [hasTVPreferredFocus]);
+  var platformMethodsRef = usePlatformMethods(supportedProps);
+  var setRef = useMergeRefs(hostRef, platformMethodsRef, forwardedRef, setLocalRef);
+  supportedProps.ref = setRef;
+  supportedProps.isContainer = props.isContainer === true;
+  return createElement(component, supportedProps, {
+    writingDirection
+  });
+});
+View.displayName = 'View';
+var styles = StyleSheet.create({
+  view$raw: {
+    alignContent: 'flex-start',
+    alignItems: 'stretch',
+    backgroundColor: 'transparent',
+    border: '0 solid black',
+    boxSizing: 'border-box',
+    display: 'flex',
+    flexBasis: 'auto',
+    flexDirection: 'column',
+    flexShrink: 0,
+    listStyle: 'none',
+    margin: 0,
+    minHeight: 0,
+    minWidth: 0,
+    padding: 0,
+    position: 'relative',
+    textDecoration: 'none',
+    zIndex: 0
+  },
+  inline: {
+    display: 'inline-flex'
+  }
+});
+export default View;

package/dist/exports/View/index.js.flow

@@ -0,0 +1,177 @@
+/**
+ * Copyright (c) Nicolas Gallagher.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ * Modifications copyright (c) 2026 Harpreet Singh.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+'use client';
+
+import type { PlatformMethods } from '../../types';
+import type { ViewProps } from './types';
+import * as React from 'react';
+import createElement from '../createElement';
+import * as forwardedProps from '../../modules/forwardedProps';
+import pick from '../../modules/pick';
+import useElementLayout from '../../modules/useElementLayout';
+import useMergeRefs from '../../modules/useMergeRefs';
+import usePlatformMethods from '../../modules/usePlatformMethods';
+import useResponderEvents from '../../modules/useResponderEvents';
+import StyleSheet from '../StyleSheet';
+import TextAncestorContext from '../Text/TextAncestorContext';
+import { useLocaleContext, getLocaleDirection } from '../../modules/useLocale';
+import Platform from '../Platform';
+import { setFocus } from '../../modules/SpatialManager';
+const forwardPropsList = Object.assign({}, forwardedProps.defaultProps, forwardedProps.accessibilityProps, forwardedProps.clickProps, forwardedProps.focusProps, forwardedProps.keyboardProps, forwardedProps.tvViewProps, forwardedProps.tvFocusGuideViewProps, forwardedProps.mouseProps, forwardedProps.touchProps, forwardedProps.styleProps, {
+  href: true,
+  lang: true,
+  onScroll: true,
+  onWheel: true,
+  pointerEvents: true
+});
+declare var pickProps: (props: any) => any;
+const View: React.AbstractComponent<ViewProps, HTMLElement & PlatformMethods> = React.forwardRef((props, forwardedRef) => {
+  const {
+    hrefAttrs,
+    onLayout,
+    onMoveShouldSetResponder,
+    onMoveShouldSetResponderCapture,
+    onResponderEnd,
+    onResponderGrant,
+    onResponderMove,
+    onResponderReject,
+    onResponderRelease,
+    onResponderStart,
+    onResponderTerminate,
+    onResponderTerminationRequest,
+    onScrollShouldSetResponder,
+    onScrollShouldSetResponderCapture,
+    onSelectionChangeShouldSetResponder,
+    onSelectionChangeShouldSetResponderCapture,
+    onStartShouldSetResponder,
+    onStartShouldSetResponderCapture,
+    hasTVPreferredFocus,
+    ...rest
+  } = props;
+  if (process.env.NODE_ENV !== 'production') {
+    React.Children.toArray(props.children).forEach(item => {
+      if (typeof item === 'string') {
+        console.error(`Unexpected text node: ${item}. A text node cannot be a child of a <View>.`);
+      }
+    });
+  }
+  const hasTextAncestor = React.useContext(TextAncestorContext);
+  const hostRef = React.useRef(null);
+  const {
+    direction: contextDirection
+  } = useLocaleContext();
+  useElementLayout(hostRef, onLayout);
+  useResponderEvents(hostRef, {
+    onMoveShouldSetResponder,
+    onMoveShouldSetResponderCapture,
+    onResponderEnd,
+    onResponderGrant,
+    onResponderMove,
+    onResponderReject,
+    onResponderRelease,
+    onResponderStart,
+    onResponderTerminate,
+    onResponderTerminationRequest,
+    onScrollShouldSetResponder,
+    onScrollShouldSetResponderCapture,
+    onSelectionChangeShouldSetResponder,
+    onSelectionChangeShouldSetResponderCapture,
+    onStartShouldSetResponder,
+    onStartShouldSetResponderCapture
+  });
+  let component = 'div';
+  const langDirection = props.lang != null ? getLocaleDirection(props.lang) : null;
+  const componentDirection = props.dir || langDirection;
+  const writingDirection = componentDirection || contextDirection;
+  const supportedProps = pickProps(rest);
+  supportedProps.dir = componentDirection;
+  supportedProps.style = [styles.view$raw, hasTextAncestor && styles.inline, props.style];
+  if (props.href != null) {
+    component = 'a';
+    if (hrefAttrs != null) {
+      const {
+        download,
+        rel,
+        target
+      } = hrefAttrs;
+      if (download != null) {
+        supportedProps.download = download;
+      }
+      if (rel != null) {
+        supportedProps.rel = rel;
+      }
+      if (typeof target === 'string') {
+        supportedProps.target = target.charAt(0) !== '_' ? '_' + target : target;
+      }
+    }
+  }
+  const requestTVFocus = React.useCallback(() => {
+    setFocus(hostRef.current);
+  }, []);
+  const setLocalRef = React.useCallback((instance: /*HostInstance*/any | null) => {
+    // $FlowExpectedError[incompatible-type]
+    hostRef.current = instance;
+    if (instance != null) {
+      // $FlowFixMe[prop-missing]
+      // $FlowFixMe[unsafe-object-assign]
+      Object.assign(instance, {
+        requestTVFocus
+      });
+    }
+  }, [requestTVFocus]);
+
+  // On mount trigger focus event
+  // if hasTVPreferredFocus is set (TV platforms only)
+  React.useEffect(() => {
+    // The only possible way to (accurately) get this is from the tabindex
+    // attribute, as the current code in CreateDOMProps uses the other props
+    // to finally derive whether an element can be focussed or not.
+    const isFocusable = hostRef.current?.getAttribute('tabindex') === '0';
+    if (Platform.isTV && hasTVPreferredFocus && isFocusable) {
+      setFocus(hostRef.current);
+    }
+  }, [hasTVPreferredFocus]);
+  const platformMethodsRef = usePlatformMethods(supportedProps);
+  const setRef = useMergeRefs(hostRef, platformMethodsRef, forwardedRef, setLocalRef);
+  supportedProps.ref = setRef;
+  supportedProps.isContainer = ((props: any).isContainer: ?boolean) === true;
+  return createElement(component, supportedProps, {
+    writingDirection
+  });
+});
+View.displayName = 'View';
+const styles = StyleSheet.create({
+  view$raw: {
+    alignContent: 'flex-start',
+    alignItems: 'stretch',
+    backgroundColor: 'transparent',
+    border: '0 solid black',
+    boxSizing: 'border-box',
+    display: 'flex',
+    flexBasis: 'auto',
+    flexDirection: 'column',
+    flexShrink: 0,
+    listStyle: 'none',
+    margin: 0,
+    minHeight: 0,
+    minWidth: 0,
+    padding: 0,
+    position: 'relative',
+    textDecoration: 'none',
+    zIndex: 0
+  },
+  inline: {
+    display: 'inline-flex'
+  }
+});
+export type { ViewProps };
+export default View;