react-native 0.0.0-263478b91 → 0.0.0-268efb102

package/Libraries/Components/ScrollView/ScrollViewStickyHeader.js

@@ -4,25 +4,29 @@
  * 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
+ * @flow
  * @format
  */
 
-import type {LayoutEvent} from '../../Types/CoreEventTypes';
-import setAndForwardRef from 'react-native/Libraries/Utilities/setAndForwardRef';
-import Platform from '../../Utilities/Platform';
-import StyleSheet from '../../StyleSheet/StyleSheet';
-import Animated from '../../Animated/Animated';
+import AnimatedImplementation from '../../Animated/AnimatedImplementation';
+import AnimatedAddition from '../../Animated/nodes/AnimatedAddition';
+import AnimatedDiffClamp from '../../Animated/nodes/AnimatedDiffClamp';
+import AnimatedNode from '../../Animated/nodes/AnimatedNode';
+
 import * as React from 'react';
-import {useEffect, useMemo, useRef, useCallback} from 'react';
+import StyleSheet from '../../StyleSheet/StyleSheet';
+import View from '../View/View';
+import Platform from '../../Utilities/Platform';
+
+import type {LayoutEvent} from '../../Types/CoreEventTypes';
 
-const AnimatedView = Animated.View;
+const AnimatedView = AnimatedImplementation.createAnimatedComponent(View);
 
 export type Props = $ReadOnly<{
-  children?: React.Element<$FlowFixMe>,
+  children?: React.Element<any>,
   nextHeaderLayoutY: ?number,
   onLayout: (event: LayoutEvent) => void,
-  scrollAnimatedValue: Animated.Value,
+  scrollAnimatedValue: AnimatedImplementation.Value,
   // Will cause sticky headers to stick at the bottom of the ScrollView instead
   // of the top.
   inverted: ?boolean,
@@ -32,275 +36,287 @@ export type Props = $ReadOnly<{
   hiddenOnScroll?: ?boolean,
 }>;
 
-const ScrollViewStickyHeaderWithForwardedRef: React.AbstractComponent<
-  Props,
-  $ReadOnly<{
-    setNextHeaderY: number => void,
-    ...$Exact<React.ElementRef<typeof AnimatedView>>,
-  }>,
-> = React.forwardRef(function ScrollViewStickyHeader(props, forwardedRef) {
-  const {
-    inverted,
-    scrollViewHeight,
-    hiddenOnScroll,
-    scrollAnimatedValue,
-    nextHeaderLayoutY: _nextHeaderLayoutY,
-  } = props;
+type State = {
+  measured: boolean,
+  layoutY: number,
+  layoutHeight: number,
+  nextHeaderLayoutY: ?number,
+  translateY: ?number,
+  ...
+};
 
-  const [measured, setMeasured] = React.useState<boolean>(false);
-  const [layoutY, setLayoutY] = React.useState<number>(0);
-  const [layoutHeight, setLayoutHeight] = React.useState<number>(0);
-  const [translateY, setTranslateY] = React.useState<?number>(null);
-  const [nextHeaderLayoutY, setNextHeaderLayoutY] = React.useState<?number>(
-    _nextHeaderLayoutY,
-  );
-  const [isFabric, setIsFabric] = React.useState<boolean>(false);
+class ScrollViewStickyHeader extends React.Component<Props, State> {
+  state: State = {
+    measured: false,
+    layoutY: 0,
+    layoutHeight: 0,
+    nextHeaderLayoutY: this.props.nextHeaderLayoutY,
+    translateY: null,
+  };
 
-  const componentRef = React.useRef<?React.ElementRef<typeof AnimatedView>>();
-  const _setNativeRef = setAndForwardRef({
-    getForwardedRef: () => forwardedRef,
-    setLocalRef: ref => {
-      componentRef.current = ref;
-      if (ref) {
-        ref.setNextHeaderY = value => {
-          setNextHeaderLayoutY(value);
-        };
-        setIsFabric(
-          !!(
-            // An internal transform mangles variables with leading "_" as private.
-            // eslint-disable-next-line dot-notation
-            ref['_internalInstanceHandle']?.stateNode?.canonical
-          ),
-        );
-      }
-    },
-  });
+  _translateY: ?AnimatedNode = null;
+  _shouldRecreateTranslateY: boolean = true;
+  _haveReceivedInitialZeroTranslateY: boolean = true;
+  _ref: any; // TODO T53738161: flow type this, and the whole file
 
-  const offset = useMemo(
-    () =>
-      hiddenOnScroll === true
-        ? Animated.diffClamp(
-            scrollAnimatedValue
-              .interpolate({
-                extrapolateLeft: 'clamp',
-                inputRange: [layoutY, layoutY + 1],
-                outputRange: ([0, 1]: Array<number>),
-              })
-              .interpolate({
-                inputRange: [0, 1],
-                outputRange: ([0, -1]: Array<number>),
-              }),
-            -layoutHeight,
-            0,
-          )
-        : null,
-    [scrollAnimatedValue, layoutHeight, layoutY, hiddenOnScroll],
-  );
+  // Fabric-only:
+  _timer: ?TimeoutID;
+  _animatedValueListenerId: string;
+  _animatedValueListener: (valueObject: $ReadOnly<{|value: number|}>) => void;
+  _debounceTimeout: number = Platform.OS === 'android' ? 15 : 64;
 
-  const [
-    animatedTranslateY,
-    setAnimatedTranslateY,
-  ] = React.useState<Animated.Node>(() => {
-    const inputRange: Array<number> = [-1, 0];
-    const outputRange: Array<number> = [0, 0];
-    const initialTranslateY: Animated.Interpolation = scrollAnimatedValue.interpolate(
-      {
-        inputRange,
-        outputRange,
-      },
-    );
+  setNextHeaderY: (y: number) => void = (y: number): void => {
+    this._shouldRecreateTranslateY = true;
+    this.setState({nextHeaderLayoutY: y});
+  };
 
-    if (offset != null) {
-      return Animated.add(initialTranslateY, offset);
+  componentWillUnmount() {
+    if (this._translateY != null && this._animatedValueListenerId != null) {
+      this._translateY.removeListener(this._animatedValueListenerId);
+    }
+    if (this._timer) {
+      clearTimeout(this._timer);
     }
-    return initialTranslateY;
-  });
+  }
 
-  const _haveReceivedInitialZeroTranslateY = useRef<boolean>(true);
-  const _timer = useRef<?TimeoutID>(null);
+  UNSAFE_componentWillReceiveProps(nextProps: Props) {
+    if (
+      nextProps.scrollViewHeight !== this.props.scrollViewHeight ||
+      nextProps.scrollAnimatedValue !== this.props.scrollAnimatedValue ||
+      nextProps.inverted !== this.props.inverted
+    ) {
+      this._shouldRecreateTranslateY = true;
+    }
+  }
 
-  useEffect(() => {
-    if (translateY !== 0 && translateY != null) {
-      _haveReceivedInitialZeroTranslateY.current = false;
+  updateTranslateListener(
+    translateY: AnimatedImplementation.Interpolation,
+    isFabric: boolean,
+    offset: AnimatedDiffClamp | null,
+  ) {
+    if (this._translateY != null && this._animatedValueListenerId != null) {
+      this._translateY.removeListener(this._animatedValueListenerId);
     }
-  }, [translateY]);
+    offset
+      ? (this._translateY = new AnimatedAddition(translateY, offset))
+      : (this._translateY = translateY);
 
-  // This is called whenever the (Interpolated) Animated Value
-  // updates, which is several times per frame during scrolling.
-  // To ensure that the Fabric ShadowTree has the most recent
-  // translate style of this node, we debounce the value and then
-  // pass it through to the underlying node during render.
-  // This is:
-  // 1. Only an issue in Fabric.
-  // 2. Worse in Android than iOS. In Android, but not iOS, you
-  //    can touch and move your finger slightly and still trigger
-  //    a "tap" event. In iOS, moving will cancel the tap in
-  //    both Fabric and non-Fabric. On Android when you move
-  //    your finger, the hit-detection moves from the Android
-  //    platform to JS, so we need the ShadowTree to have knowledge
-  //    of the current position.
-  const animatedValueListener = useCallback(
-    ({value}) => {
-      const _debounceTimeout: number = Platform.OS === 'android' ? 15 : 64;
-      // When the AnimatedInterpolation is recreated, it always initializes
-      // to a value of zero and emits a value change of 0 to its listeners.
-      if (value === 0 && !_haveReceivedInitialZeroTranslateY.current) {
-        _haveReceivedInitialZeroTranslateY.current = true;
-        return;
-      }
-      if (_timer.current != null) {
-        clearTimeout(_timer.current);
-      }
-      _timer.current = setTimeout(() => {
-        if (value !== translateY) {
-          setTranslateY(value);
-        }
-      }, _debounceTimeout);
-    },
-    [translateY],
-  );
+    this._shouldRecreateTranslateY = false;
 
-  useEffect(() => {
-    const inputRange: Array<number> = [-1, 0];
-    const outputRange: Array<number> = [0, 0];
+    if (!isFabric) {
+      return;
+    }
 
-    if (measured) {
-      if (inverted === true) {
-        // The interpolation looks like:
-        // - Negative scroll: no translation
-        // - `stickStartPoint` is the point at which the header will start sticking.
-        //   It is calculated using the ScrollView viewport height so it is a the bottom.
-        // - Headers that are in the initial viewport will never stick, `stickStartPoint`
-        //   will be negative.
-        // - From 0 to `stickStartPoint` no translation. This will cause the header
-        //   to scroll normally until it reaches the top of the scroll view.
-        // - From `stickStartPoint` to when the next header y hits the bottom edge of the header: translate
-        //   equally to scroll. This will cause the header to stay at the top of the scroll view.
-        // - Past the collision with the next header y: no more translation. This will cause the
-        //   header to continue scrolling up and make room for the next sticky header.
-        //   In the case that there is no next header just translate equally to
-        //   scroll indefinitely.
-        if (scrollViewHeight != null) {
-          const stickStartPoint = layoutY + layoutHeight - scrollViewHeight;
-          if (stickStartPoint > 0) {
-            inputRange.push(stickStartPoint);
-            outputRange.push(0);
-            inputRange.push(stickStartPoint + 1);
-            outputRange.push(1);
-            // If the next sticky header has not loaded yet (probably windowing) or is the last
-            // we can just keep it sticked forever.
-            const collisionPoint =
-              (nextHeaderLayoutY || 0) - layoutHeight - scrollViewHeight;
-            if (collisionPoint > stickStartPoint) {
-              inputRange.push(collisionPoint, collisionPoint + 1);
-              outputRange.push(
-                collisionPoint - stickStartPoint,
-                collisionPoint - stickStartPoint,
-              );
-            }
-          }
+    if (!this._animatedValueListener) {
+      // This is called whenever the (Interpolated) Animated Value
+      // updates, which is several times per frame during scrolling.
+      // To ensure that the Fabric ShadowTree has the most recent
+      // translate style of this node, we debounce the value and then
+      // pass it through to the underlying node during render.
+      // This is:
+      // 1. Only an issue in Fabric.
+      // 2. Worse in Android than iOS. In Android, but not iOS, you
+      //    can touch and move your finger slightly and still trigger
+      //    a "tap" event. In iOS, moving will cancel the tap in
+      //    both Fabric and non-Fabric. On Android when you move
+      //    your finger, the hit-detection moves from the Android
+      //    platform to JS, so we need the ShadowTree to have knowledge
+      //    of the current position.
+      this._animatedValueListener = ({value}) => {
+        // When the AnimatedInterpolation is recreated, it always initializes
+        // to a value of zero and emits a value change of 0 to its listeners.
+        if (value === 0 && !this._haveReceivedInitialZeroTranslateY) {
+          this._haveReceivedInitialZeroTranslateY = true;
+          return;
         }
-      } else {
-        // The interpolation looks like:
-        // - Negative scroll: no translation
-        // - From 0 to the y of the header: no translation. This will cause the header
-        //   to scroll normally until it reaches the top of the scroll view.
-        // - From header y to when the next header y hits the bottom edge of the header: translate
-        //   equally to scroll. This will cause the header to stay at the top of the scroll view.
-        // - Past the collision with the next header y: no more translation. This will cause the
-        //   header to continue scrolling up and make room for the next sticky header.
-        //   In the case that there is no next header just translate equally to
-        //   scroll indefinitely.
-        inputRange.push(layoutY);
-        outputRange.push(0);
-        // If the next sticky header has not loaded yet (probably windowing) or is the last
-        // we can just keep it sticked forever.
-        const collisionPoint = (nextHeaderLayoutY || 0) - layoutHeight;
-        if (collisionPoint >= layoutY) {
-          inputRange.push(collisionPoint, collisionPoint + 1);
-          outputRange.push(collisionPoint - layoutY, collisionPoint - layoutY);
-        } else {
-          inputRange.push(layoutY + 1);
-          outputRange.push(1);
+        if (this._timer) {
+          clearTimeout(this._timer);
         }
-      }
-    }
-
-    let newAnimatedTranslateY: Animated.Node = scrollAnimatedValue.interpolate({
-      inputRange,
-      outputRange,
-    });
-
-    if (offset != null) {
-      newAnimatedTranslateY = Animated.add(newAnimatedTranslateY, offset);
+        this._timer = setTimeout(() => {
+          if (value !== this.state.translateY) {
+            this.setState({
+              translateY: value,
+            });
+          }
+        }, this._debounceTimeout);
+      };
     }
-
-    // add the event listener
-    let animatedListenerId;
-    if (isFabric) {
-      animatedListenerId = newAnimatedTranslateY.addListener(
-        animatedValueListener,
-      );
+    if (this.state.translateY !== 0 && this.state.translateY != null) {
+      this._haveReceivedInitialZeroTranslateY = false;
     }
+    this._animatedValueListenerId = translateY.addListener(
+      this._animatedValueListener,
+    );
+  }
 
-    setAnimatedTranslateY(newAnimatedTranslateY);
+  _onLayout = event => {
+    const layoutY = event.nativeEvent.layout.y;
+    const layoutHeight = event.nativeEvent.layout.height;
+    const measured = true;
 
-    // clean up the event listener and timer
-    return () => {
-      if (animatedListenerId) {
-        newAnimatedTranslateY.removeListener(animatedListenerId);
-      }
-      if (_timer.current != null) {
-        clearTimeout(_timer.current);
-      }
-    };
-  }, [nextHeaderLayoutY, measured, layoutHeight, layoutY, scrollViewHeight, scrollAnimatedValue, inverted, offset, animatedValueListener, isFabric]);
+    if (
+      layoutY !== this.state.layoutY ||
+      layoutHeight !== this.state.layoutHeight ||
+      measured !== this.state.measured
+    ) {
+      this._shouldRecreateTranslateY = true;
+    }
 
-  const _onLayout = (event: LayoutEvent) => {
-    setLayoutY(event.nativeEvent.layout.y);
-    setLayoutHeight(event.nativeEvent.layout.height);
-    setMeasured(true);
+    this.setState({
+      measured,
+      layoutY,
+      layoutHeight,
+    });
 
-    props.onLayout(event);
-    const child = React.Children.only(props.children);
+    this.props.onLayout(event);
+    const child = React.Children.only(this.props.children);
     if (child.props.onLayout) {
       child.props.onLayout(event);
     }
   };
 
-  const child = React.Children.only(props.children);
+  _setComponentRef = ref => {
+    this._ref = ref;
+  };
+
+  render(): React.Node {
+    // Fabric Detection
+    const isFabric = !!(
+      // An internal transform mangles variables with leading "_" as private.
+      // eslint-disable-next-line dot-notation
+      (this._ref && this._ref['_internalInstanceHandle']?.stateNode?.canonical)
+    );
+    // Initially and in the case of updated props or layout, we
+    // recreate this interpolated value. Otherwise, we do not recreate
+    // when there are state changes.
+    if (this._shouldRecreateTranslateY) {
+      const {inverted, scrollViewHeight} = this.props;
+      const {measured, layoutHeight, layoutY, nextHeaderLayoutY} = this.state;
+      const inputRange: Array<number> = [-1, 0];
+      const outputRange: Array<number> = [0, 0];
 
-  // TODO T68319535: remove this if NativeAnimated is rewritten for Fabric
-  const passthroughAnimatedPropExplicitValues =
-    isFabric && translateY != null
-      ? {
-          style: {transform: [{translateY: translateY}]},
+      if (measured) {
+        if (inverted) {
+          // The interpolation looks like:
+          // - Negative scroll: no translation
+          // - `stickStartPoint` is the point at which the header will start sticking.
+          //   It is calculated using the ScrollView viewport height so it is a the bottom.
+          // - Headers that are in the initial viewport will never stick, `stickStartPoint`
+          //   will be negative.
+          // - From 0 to `stickStartPoint` no translation. This will cause the header
+          //   to scroll normally until it reaches the top of the scroll view.
+          // - From `stickStartPoint` to when the next header y hits the bottom edge of the header: translate
+          //   equally to scroll. This will cause the header to stay at the top of the scroll view.
+          // - Past the collision with the next header y: no more translation. This will cause the
+          //   header to continue scrolling up and make room for the next sticky header.
+          //   In the case that there is no next header just translate equally to
+          //   scroll indefinitely.
+          if (scrollViewHeight != null) {
+            const stickStartPoint = layoutY + layoutHeight - scrollViewHeight;
+            if (stickStartPoint > 0) {
+              inputRange.push(stickStartPoint);
+              outputRange.push(0);
+              inputRange.push(stickStartPoint + 1);
+              outputRange.push(1);
+              // If the next sticky header has not loaded yet (probably windowing) or is the last
+              // we can just keep it sticked forever.
+              const collisionPoint =
+                (nextHeaderLayoutY || 0) - layoutHeight - scrollViewHeight;
+              if (collisionPoint > stickStartPoint) {
+                inputRange.push(collisionPoint, collisionPoint + 1);
+                outputRange.push(
+                  collisionPoint - stickStartPoint,
+                  collisionPoint - stickStartPoint,
+                );
+              }
+            }
+          }
+        } else {
+          // The interpolation looks like:
+          // - Negative scroll: no translation
+          // - From 0 to the y of the header: no translation. This will cause the header
+          //   to scroll normally until it reaches the top of the scroll view.
+          // - From header y to when the next header y hits the bottom edge of the header: translate
+          //   equally to scroll. This will cause the header to stay at the top of the scroll view.
+          // - Past the collision with the next header y: no more translation. This will cause the
+          //   header to continue scrolling up and make room for the next sticky header.
+          //   In the case that there is no next header just translate equally to
+          //   scroll indefinitely.
+          inputRange.push(layoutY);
+          outputRange.push(0);
+          // If the next sticky header has not loaded yet (probably windowing) or is the last
+          // we can just keep it sticked forever.
+          const collisionPoint = (nextHeaderLayoutY || 0) - layoutHeight;
+          if (collisionPoint >= layoutY) {
+            inputRange.push(collisionPoint, collisionPoint + 1);
+            outputRange.push(
+              collisionPoint - layoutY,
+              collisionPoint - layoutY,
+            );
+          } else {
+            inputRange.push(layoutY + 1);
+            outputRange.push(1);
+          }
         }
-      : null;
+      }
 
-  return (
-    /* $FlowFixMe[prop-missing] passthroughAnimatedPropExplicitValues isn't properly
-       included in the Animated.View flow type. */
-    <AnimatedView
-      collapsable={false}
-      nativeID={props.nativeID}
-      onLayout={_onLayout}
-      ref={_setNativeRef}
-      style={[
-        child.props.style,
-        styles.header,
-        {transform: [{translateY: animatedTranslateY}]},
-      ]}
-      passthroughAnimatedPropExplicitValues={
-        passthroughAnimatedPropExplicitValues
-      }>
-      {React.cloneElement(child, {
-        style: styles.fill, // We transfer the child style to the wrapper.
-        onLayout: undefined, // we call this manually through our this._onLayout
-      })}
-    </AnimatedView>
-  );
-});
+      this.updateTranslateListener(
+        this.props.scrollAnimatedValue.interpolate({
+          inputRange,
+          outputRange,
+        }),
+        isFabric,
+        this.props.hiddenOnScroll
+          ? new AnimatedDiffClamp(
+              this.props.scrollAnimatedValue
+                .interpolate({
+                  extrapolateLeft: 'clamp',
+                  inputRange: [layoutY, layoutY + 1],
+                  outputRange: ([0, 1]: Array<number>),
+                })
+                .interpolate({
+                  inputRange: [0, 1],
+                  outputRange: ([0, -1]: Array<number>),
+                }),
+              -this.state.layoutHeight,
+              0,
+            )
+          : null,
+      );
+    }
+
+    const child = React.Children.only(this.props.children);
+
+    // TODO T68319535: remove this if NativeAnimated is rewritten for Fabric
+    const passthroughAnimatedPropExplicitValues =
+      isFabric && this.state.translateY != null
+        ? {
+            style: {transform: [{translateY: this.state.translateY}]},
+          }
+        : null;
+
+    return (
+      <AnimatedView
+        collapsable={false}
+        nativeID={this.props.nativeID}
+        onLayout={this._onLayout}
+        ref={this._setComponentRef}
+        style={[
+          child.props.style,
+          styles.header,
+          {transform: [{translateY: this._translateY}]},
+        ]}
+        passthroughAnimatedPropExplicitValues={
+          passthroughAnimatedPropExplicitValues
+        }>
+        {React.cloneElement(child, {
+          style: styles.fill, // We transfer the child style to the wrapper.
+          onLayout: undefined, // we call this manually through our this._onLayout
+        })}
+      </AnimatedView>
+    );
+  }
+}
 
 const styles = StyleSheet.create({
   header: {
@@ -312,4 +328,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default ScrollViewStickyHeaderWithForwardedRef;
+module.exports = ScrollViewStickyHeader;

package/Libraries/Components/ScrollView/ScrollViewViewConfig.js

@@ -24,6 +24,8 @@ const ScrollViewViewConfig = {
     alwaysBounceHorizontal: true,
     alwaysBounceVertical: true,
     automaticallyAdjustContentInsets: true,
+    automaticallyAdjustKeyboardInsets: true,
+    automaticallyAdjustsScrollIndicatorInsets: true,
     bounces: true,
     bouncesZoom: true,
     canCancelContentTouches: true,

package/Libraries/Components/SegmentedControlIOS/SegmentedControlIOS.ios.js

@@ -19,6 +19,8 @@ type SegmentedControlIOSProps = $ReadOnly<{|
   ...ViewProps,
   /**
    * The labels for the control's segment buttons, in order.
+   *
+   * The default value is an empty array.
    */
   values?: $ReadOnlyArray<string>,
   /**
@@ -27,6 +29,8 @@ type SegmentedControlIOSProps = $ReadOnly<{|
   selectedIndex?: ?number,
   /**
    * If false the user won't be able to interact with the control.
+   *
+   * The default value is true.
    */
   enabled?: boolean,
   /**
@@ -76,11 +80,6 @@ type Props = $ReadOnly<{|
  */
 
 class SegmentedControlIOS extends React.Component<Props> {
-  static defaultProps = {
-    values: [],
-    enabled: true,
-  };
-
   _onChange = (event: SyntheticEvent<OnChangeEvent>) => {
     this.props.onChange && this.props.onChange(event);
     this.props.onValueChange &&
@@ -88,12 +87,21 @@ class SegmentedControlIOS extends React.Component<Props> {
   };
 
   render() {
-    const {forwardedRef, onValueChange, style, ...props} = this.props;
+    const {
+      enabled,
+      forwardedRef,
+      onValueChange,
+      style,
+      values,
+      ...props
+    } = this.props;
     return (
       <RCTSegmentedControlNativeComponent
         {...props}
         ref={forwardedRef}
         style={[styles.segmentedControl, style]}
+        enabled={enabled !== false}
+        values={values ?? []}
         onChange={this._onChange}
       />
     );