react-native 0.0.0-17be3a003 → 0.0.0-18697adec

package/Libraries/Components/ScrollView/AndroidHorizontalScrollViewNativeComponent.js

@@ -8,8 +8,8 @@
  * @format
  */
 
-import {type ScrollViewNativeProps as Props} from './ScrollViewNativeComponentType';
-import {type HostComponent} from '../../Renderer/shims/ReactNativeTypes';
+import type {ScrollViewNativeProps as Props} from './ScrollViewNativeComponentType';
+import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
 import * as NativeComponentRegistry from '../../NativeComponent/NativeComponentRegistry';
 
 const AndroidHorizontalScrollViewNativeComponent: HostComponent<Props> = NativeComponentRegistry.get<Props>(

package/Libraries/Components/ScrollView/ScrollContentViewNativeComponent.js

@@ -8,9 +8,9 @@
  * @flow
  */
 
-import {type HostComponent} from '../../Renderer/shims/ReactNativeTypes';
+import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
 import * as NativeComponentRegistry from '../../NativeComponent/NativeComponentRegistry';
-import {type ViewProps as Props} from '../View/ViewPropTypes';
+import type {ViewProps as Props} from '../View/ViewPropTypes';
 
 const ScrollContentViewNativeComponent: HostComponent<Props> = NativeComponentRegistry.get<Props>(
   'RCTScrollContentView',

package/Libraries/Components/ScrollView/ScrollView.js

@@ -171,6 +171,18 @@ type IOSProps = $ReadOnly<{|
    * @platform ios
    */
   automaticallyAdjustContentInsets?: ?boolean,
+  /**
+   * Controls whether the ScrollView should automatically adjust it's contentInset
+   * and scrollViewInsets when the Keyboard changes it's size. The default value is false.
+   * @platform ios
+   */
+  automaticallyAdjustKeyboardInsets?: ?boolean,
+  /**
+   * Controls whether iOS should automatically adjust the scroll indicator
+   * insets. The default value is true. Available on iOS 13 and later.
+   * @platform ios
+   */
+  automaticallyAdjustsScrollIndicatorInsets?: ?boolean,
   /**
    * The amount by which the scroll view content is inset from the edges
    * of the scroll view. Defaults to `{top: 0, left: 0, bottom: 0, right: 0}`.
@@ -988,6 +1000,7 @@ class ScrollView extends React.Component<Props, State> {
       UIManager.measureLayout(
         nodeHandle,
         ReactNative.findNodeHandle(this),
+        // $FlowFixMe[method-unbinding] added when improving typing for this parameters
         this._textInputFocusError,
         this._inputMeasureAndScrollToKeyboard,
       );
@@ -995,6 +1008,7 @@ class ScrollView extends React.Component<Props, State> {
       nodeHandle.measureLayout(
         this._innerViewRef,
         this._inputMeasureAndScrollToKeyboard,
+        // $FlowFixMe[method-unbinding] added when improving typing for this parameters
         this._textInputFocusError,
       );
     }
@@ -1170,11 +1184,6 @@ class ScrollView extends React.Component<Props, State> {
         );
       }
     }
-    if (Platform.OS === 'android') {
-      if (this.props.keyboardDismissMode === 'on-drag' && this._isTouching) {
-        dismissKeyboard();
-      }
-    }
     this._observedScrollSinceBecomingResponder = true;
     this.props.onScroll && this.props.onScroll(e);
   };
@@ -1291,6 +1300,14 @@ class ScrollView extends React.Component<Props, State> {
    */
   _handleScrollBeginDrag: (e: ScrollEvent) => void = (e: ScrollEvent) => {
     FrameRateLogger.beginScroll(); // TODO: track all scrolls after implementing onScrollEndAnimation
+
+    if (
+      Platform.OS === 'android' &&
+      this.props.keyboardDismissMode === 'on-drag'
+    ) {
+      dismissKeyboard();
+    }
+
     this.props.onScrollBeginDrag && this.props.onScrollBeginDrag(e);
   };
 

package/Libraries/Components/ScrollView/ScrollViewNativeComponent.js

@@ -8,8 +8,8 @@
  * @format
  */
 
-import {type ScrollViewNativeProps as Props} from './ScrollViewNativeComponentType';
-import {type HostComponent} from '../../Renderer/shims/ReactNativeTypes';
+import type {ScrollViewNativeProps as Props} from './ScrollViewNativeComponentType';
+import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
 import * as NativeComponentRegistry from '../../NativeComponent/NativeComponentRegistry';
 
 const ScrollViewNativeComponent: HostComponent<Props> = NativeComponentRegistry.get<Props>(
@@ -26,6 +26,7 @@ const ScrollViewNativeComponent: HostComponent<Props> = NativeComponentRegistry.
       alwaysBounceHorizontal: true,
       alwaysBounceVertical: true,
       automaticallyAdjustContentInsets: true,
+      automaticallyAdjustsScrollIndicatorInsets: true,
       bounces: true,
       bouncesZoom: true,
       canCancelContentTouches: true,

package/Libraries/Components/ScrollView/ScrollViewNativeComponentType.js

@@ -21,6 +21,8 @@ export type ScrollViewNativeProps = $ReadOnly<{
   alwaysBounceHorizontal?: ?boolean,
   alwaysBounceVertical?: ?boolean,
   automaticallyAdjustContentInsets?: ?boolean,
+  automaticallyAdjustKeyboardInsets?: ?boolean,
+  automaticallyAdjustsScrollIndicatorInsets?: ?boolean,
   bounces?: ?boolean,
   bouncesZoom?: ?boolean,
   canCancelContentTouches?: ?boolean,

package/Libraries/Components/ScrollView/ScrollViewStickyHeader.js

@@ -20,8 +20,6 @@ import Platform from '../../Utilities/Platform';
 
 import type {LayoutEvent} from '../../Types/CoreEventTypes';
 
-import ScrollViewStickyHeaderInjection from './ScrollViewStickyHeaderInjection';
-
 const AnimatedView = AnimatedImplementation.createAnimatedComponent(View);
 
 export type Props = $ReadOnly<{
@@ -67,10 +65,10 @@ class ScrollViewStickyHeader extends React.Component<Props, State> {
   _animatedValueListener: (valueObject: $ReadOnly<{|value: number|}>) => void;
   _debounceTimeout: number = Platform.OS === 'android' ? 15 : 64;
 
-  setNextHeaderY(y: number) {
+  setNextHeaderY: (y: number) => void = (y: number): void => {
     this._shouldRecreateTranslateY = true;
     this.setState({nextHeaderLayoutY: y});
-  }
+  };
 
   componentWillUnmount() {
     if (this._translateY != null && this._animatedValueListenerId != null) {
@@ -330,8 +328,4 @@ const styles = StyleSheet.create({
   },
 });
 
-const SHToExport: React.AbstractComponent<
-  Props,
-  $ReadOnly<{setNextHeaderY: number => void, ...}>,
-> = ScrollViewStickyHeaderInjection.unstable_SH ?? ScrollViewStickyHeader;
-module.exports = SHToExport;
+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.android.js

@@ -8,11 +8,10 @@
  */
 
 'use strict';
-
-const React = require('react');
-const StyleSheet = require('../../StyleSheet/StyleSheet');
-const Text = require('../../Text/Text');
-const View = require('../View/View');
+import * as React from 'react';
+import StyleSheet from '../../StyleSheet/StyleSheet';
+import Text from '../../Text/Text';
+import View from '../View/View';
 
 class DummySegmentedControlIOS extends React.Component {
   render() {

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}
       />
     );

package/Libraries/Components/Slider/Slider.js

@@ -8,16 +8,18 @@
  * @flow strict-local
  */
 
-const Platform = require('../../Utilities/Platform');
+import * as React from 'react';
+import Platform from '../../Utilities/Platform';
 import SliderNativeComponent from './SliderNativeComponent';
-const React = require('react');
-const StyleSheet = require('../../StyleSheet/StyleSheet');
+import StyleSheet, {
+  type ViewStyleProp,
+  type ColorValue,
+} from '../../StyleSheet/StyleSheet';
 
 import type {ImageSource} from '../../Image/ImageSource';
-import type {ViewStyleProp} from '../../StyleSheet/StyleSheet';
-import type {ColorValue} from '../../StyleSheet/StyleSheet';
 import type {ViewProps} from '../View/ViewPropTypes';
 import type {SyntheticEvent} from '../../Types/CoreEventTypes';
+import type {AccessibilityState} from '../View/ViewAccessibility';
 
 type Event = SyntheticEvent<
   $ReadOnly<{|
@@ -130,6 +132,11 @@ type Props = $ReadOnly<{|
    * Used to locate this view in UI automation tests.
    */
   testID?: ?string,
+
+  /**
+    Indicates to accessibility services that UI Component is in a specific State.
+   */
+  accessibilityState?: ?AccessibilityState,
 |}>;
 
 /**
@@ -199,7 +206,6 @@ const Slider = (
   const style = StyleSheet.compose(styles.slider, props.style);
 
   const {
-    disabled = false,
     value = 0.5,
     minimumValue = 0,
     maximumValue = 1,
@@ -229,9 +235,16 @@ const Slider = (
       }
     : null;
 
+  const disabled =
+    props.disabled === true || props.accessibilityState?.disabled === true;
+  const accessibilityState = disabled
+    ? {...props.accessibilityState, disabled: true}
+    : props.accessibilityState;
+
   return (
     <SliderNativeComponent
       {...localProps}
+      accessibilityState={accessibilityState}
       // TODO: Reconcile these across the two platforms.
       enabled={!disabled}
       disabled={disabled}

package/Libraries/Components/StatusBar/StatusBar.js

@@ -8,11 +8,10 @@
  * @flow
  */
 
-const Platform = require('../../Utilities/Platform');
-const React = require('react');
-
-const invariant = require('invariant');
-const processColor = require('../../StyleSheet/processColor');
+import * as React from 'react';
+import Platform from '../../Utilities/Platform';
+import invariant from 'invariant';
+import processColor from '../../StyleSheet/processColor';
 import type {ColorValue} from '../../StyleSheet/StyleSheet';
 
 import NativeStatusBarManagerAndroid from './NativeStatusBarManagerAndroid';
@@ -128,19 +127,21 @@ function mergePropsStack(
  * and the transition/animation info.
  */
 function createStackEntry(props: any): any {
+  const animated = props.animated ?? false;
+  const showHideTransition = props.showHideTransition ?? 'fade';
   return {
     backgroundColor:
       props.backgroundColor != null
         ? {
             value: props.backgroundColor,
-            animated: props.animated,
+            animated,
           }
         : null,
     barStyle:
       props.barStyle != null
         ? {
             value: props.barStyle,
-            animated: props.animated,
+            animated,
           }
         : null,
     translucent: props.translucent,
@@ -148,8 +149,8 @@ function createStackEntry(props: any): any {
       props.hidden != null
         ? {
             value: props.hidden,
-            animated: props.animated,
-            transition: props.showHideTransition,
+            animated,
+            transition: showHideTransition,
           }
         : null,
     networkActivityIndicatorVisible: props.networkActivityIndicatorVisible,
@@ -222,8 +223,6 @@ class StatusBar extends React.Component<Props> {
   static _propsStack = [];
 
   static _defaultProps = createStackEntry({
-    animated: false,
-    showHideTransition: 'fade',
     backgroundColor:
       Platform.OS === 'android'
         ? NativeStatusBarManagerAndroid.getConstants()
@@ -385,14 +384,6 @@ class StatusBar extends React.Component<Props> {
     return newEntry;
   }
 
-  static defaultProps: {|
-    animated: boolean,
-    showHideTransition: $TEMPORARY$string<'fade'>,
-  |} = {
-    animated: false,
-    showHideTransition: 'fade',
-  };
-
   _stackEntry = null;
 
   componentDidMount() {

package/Libraries/Components/Switch/Switch.js

@@ -12,7 +12,7 @@
 import Platform from '../../Utilities/Platform';
 import * as React from 'react';
 import StyleSheet from '../../StyleSheet/StyleSheet';
-import SwitchInjection from './SwitchInjection';
+import useMergeRefs from '../../Utilities/useMergeRefs';
 
 import AndroidSwitchNativeComponent, {
   Commands as AndroidSwitchCommands,
@@ -86,6 +86,8 @@ export type Props = $ReadOnly<{|
    */
   onValueChange?: ?(value: boolean) => Promise<void> | void,
 |}>;
+const returnsFalse = () => false;
+const returnsTrue = () => true;
 
 /**
   Renders a boolean input.
@@ -128,132 +130,114 @@ export type Props = $ReadOnly<{|
   export default App;
   ```
  */
-class Switch extends React.Component<Props> {
-  _nativeSwitchRef: ?React.ElementRef<
+
+const SwitchWithForwardedRef: React.AbstractComponent<
+  Props,
+  React.ElementRef<
+    typeof SwitchNativeComponent | typeof AndroidSwitchNativeComponent,
+  >,
+> = React.forwardRef(function Switch(props, forwardedRef): React.Node {
+  const {
+    disabled,
+    ios_backgroundColor,
+    onChange,
+    onValueChange,
+    style,
+    thumbColor,
+    trackColor,
+    value,
+    ...restProps
+  } = props;
+  const trackColorForFalse = trackColor?.false;
+  const trackColorForTrue = trackColor?.true;
+
+  const nativeSwitchRef = React.useRef<React.ElementRef<
     typeof SwitchNativeComponent | typeof AndroidSwitchNativeComponent,
-  >;
-  _lastNativeValue: ?boolean;
+  > | null>(null);
 
-  render(): React.Node {
-    const {
-      disabled,
-      ios_backgroundColor,
-      onChange,
-      onValueChange,
-      style,
-      thumbColor,
-      trackColor,
-      value,
-      ...props
-    } = this.props;
-
-    const trackColorForFalse = trackColor?.false;
-    const trackColorForTrue = trackColor?.true;
-
-    if (Platform.OS === 'android') {
-      const platformProps = {
-        enabled: disabled !== true,
-        on: value === true,
-        style,
-        thumbTintColor: thumbColor,
-        trackColorForFalse: trackColorForFalse,
-        trackColorForTrue: trackColorForTrue,
-        trackTintColor: value === true ? trackColorForTrue : trackColorForFalse,
-      };
-
-      return (
-        <AndroidSwitchNativeComponent
-          {...props}
-          {...platformProps}
-          accessibilityRole={props.accessibilityRole ?? 'switch'}
-          onChange={this._handleChange}
-          onResponderTerminationRequest={returnsFalse}
-          onStartShouldSetResponder={returnsTrue}
-          ref={this._handleSwitchNativeComponentRef}
-        />
-      );
-    } else {
-      const platformProps = {
-        disabled,
-        onTintColor: trackColorForTrue,
-        style: StyleSheet.compose(
-          {height: 31, width: 51},
-          StyleSheet.compose(
-            style,
-            ios_backgroundColor == null
-              ? null
-              : {
-                  backgroundColor: ios_backgroundColor,
-                  borderRadius: 16,
-                },
-          ),
-        ),
-        thumbTintColor: thumbColor,
-        tintColor: trackColorForFalse,
-        value: value === true,
-      };
-
-      return (
-        <SwitchNativeComponent
-          {...props}
-          {...platformProps}
-          accessibilityRole={props.accessibilityRole ?? 'switch'}
-          onChange={this._handleChange}
-          onResponderTerminationRequest={returnsFalse}
-          onStartShouldSetResponder={returnsTrue}
-          ref={this._handleSwitchNativeComponentRef}
-        />
-      );
-    }
-  }
+  const ref = useMergeRefs(nativeSwitchRef, forwardedRef);
+
+  const [native, setNative] = React.useState({value: null});
 
-  componentDidUpdate() {
+  const handleChange = (event: SwitchChangeEvent) => {
+    onChange?.(event);
+    onValueChange?.(event.nativeEvent.value);
+    setNative({value: event.nativeEvent.value});
+  };
+
+  React.useLayoutEffect(() => {
     // This is necessary in case native updates the switch and JS decides
     // that the update should be ignored and we should stick with the value
     // that we have in JS.
-    const value = this.props.value === true;
-    const nativeValue = this._lastNativeValue !== value ? value : null;
-
+    const jsValue = value === true;
+    const shouldUpdateNativeSwitch = native.value !== jsValue;
     if (
-      nativeValue != null &&
-      this._nativeSwitchRef &&
-      this._nativeSwitchRef.setNativeProps
+      shouldUpdateNativeSwitch &&
+      nativeSwitchRef.current?.setNativeProps != null
     ) {
       if (Platform.OS === 'android') {
-        AndroidSwitchCommands.setNativeValue(
-          this._nativeSwitchRef,
-          nativeValue,
-        );
+        AndroidSwitchCommands.setNativeValue(nativeSwitchRef.current, jsValue);
       } else {
-        SwitchCommands.setValue(this._nativeSwitchRef, nativeValue);
+        SwitchCommands.setValue(nativeSwitchRef.current, jsValue);
       }
     }
-  }
-
-  _handleChange = (event: SwitchChangeEvent) => {
-    if (this.props.onChange != null) {
-      this.props.onChange(event);
-    }
-
-    if (this.props.onValueChange != null) {
-      this.props.onValueChange(event.nativeEvent.value);
-    }
+  }, [value, native]);
 
-    this._lastNativeValue = event.nativeEvent.value;
-    this.forceUpdate();
-  };
+  if (Platform.OS === 'android') {
+    const platformProps = {
+      enabled: disabled !== true,
+      on: value === true,
+      style,
+      thumbTintColor: thumbColor,
+      trackColorForFalse: trackColorForFalse,
+      trackColorForTrue: trackColorForTrue,
+      trackTintColor: value === true ? trackColorForTrue : trackColorForFalse,
+    };
 
-  _handleSwitchNativeComponentRef = (
-    ref: ?React.ElementRef<
-      typeof SwitchNativeComponent | typeof AndroidSwitchNativeComponent,
-    >,
-  ) => {
-    this._nativeSwitchRef = ref;
-  };
-}
+    return (
+      <AndroidSwitchNativeComponent
+        {...restProps}
+        {...platformProps}
+        accessibilityRole={props.accessibilityRole ?? 'switch'}
+        onChange={handleChange}
+        onResponderTerminationRequest={returnsFalse}
+        onStartShouldSetResponder={returnsTrue}
+        ref={ref}
+      />
+    );
+  } else {
+    const platformProps = {
+      disabled,
+      onTintColor: trackColorForTrue,
+      style: StyleSheet.compose(
+        {height: 31, width: 51},
+        StyleSheet.compose(
+          style,
+          ios_backgroundColor == null
+            ? null
+            : {
+                backgroundColor: ios_backgroundColor,
+                borderRadius: 16,
+              },
+        ),
+      ),
+      thumbTintColor: thumbColor,
+      tintColor: trackColorForFalse,
+      value: value === true,
+    };
 
-const returnsFalse = () => false;
-const returnsTrue = () => true;
+    return (
+      <SwitchNativeComponent
+        {...restProps}
+        {...platformProps}
+        accessibilityRole={props.accessibilityRole ?? 'switch'}
+        onChange={handleChange}
+        onResponderTerminationRequest={returnsFalse}
+        onStartShouldSetResponder={returnsTrue}
+        ref={ref}
+      />
+    );
+  }
+});
 
-module.exports = (SwitchInjection.unstable_Switch ??
-  Switch: React.AbstractComponent<React.ElementConfig<typeof Switch>>);
+export default SwitchWithForwardedRef;

package/Libraries/Components/TextInput/AndroidTextInputNativeComponent.js

@@ -18,9 +18,11 @@ import type {
   WithDefault,
 } from '../../Types/CodegenTypes';
 import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
-import type {TextStyleProp, ViewStyleProp} from '../../StyleSheet/StyleSheet';
-import type {ColorValue} from '../../StyleSheet/StyleSheet';
-import requireNativeComponent from '../../ReactNative/requireNativeComponent';
+import type {
+  TextStyleProp,
+  ViewStyleProp,
+  ColorValue,
+} from '../../StyleSheet/StyleSheet';
 import codegenNativeCommands from '../../Utilities/codegenNativeCommands';
 import type {TextInputNativeCommands} from './TextInputNativeCommands';
 import AndroidTextInputViewConfig from './AndroidTextInputViewConfig';
@@ -34,10 +36,10 @@ export type KeyboardType =
   | 'phone-pad'
   | 'number-pad'
   | 'decimal-pad'
+  | 'url'
   // iOS-only
   | 'ascii-capable'
   | 'numbers-and-punctuation'
-  | 'url'
   | 'name-phone-pad'
   | 'twitter'
   | 'web-search'
@@ -94,7 +96,7 @@ export type NativeProps = $ReadOnly<{|
    *
    * @platform android
    */
-  autoCompleteType?: WithDefault<
+  autoComplete?: WithDefault<
     | 'cc-csc'
     | 'cc-exp'
     | 'cc-exp-month'
@@ -241,6 +243,7 @@ export type NativeProps = $ReadOnly<{|
    * - `decimal-pad`
    * - `email-address`
    * - `phone-pad`
+   * - `url`
    *
    * *Android Only*
    *
@@ -411,7 +414,7 @@ export type NativeProps = $ReadOnly<{|
   /**
    * The string that will be rendered before text input has been entered.
    */
-  placeholder?: ?string,
+  placeholder?: ?Stringish,
 
   /**
    * The text color of the placeholder string.

package/Libraries/Components/TextInput/AndroidTextInputViewConfig.js

@@ -9,7 +9,7 @@
  */
 
 import ReactNativeViewViewConfig from '../../Components/View/ReactNativeViewViewConfig';
-import {type PartialViewConfig} from 'react-native/Libraries/Renderer/shims/ReactNativeTypes';
+import type {PartialViewConfig} from 'react-native/Libraries/Renderer/shims/ReactNativeTypes';
 
 const AndroidTextInputViewConfig = {
   uiViewClassName: 'AndroidTextInput',
@@ -83,6 +83,7 @@ const AndroidTextInputViewConfig = {
     multiline: true,
     color: {process: require('../../StyleSheet/processColor')},
     autoCompleteType: true,
+    autoComplete: true,
     numberOfLines: true,
     letterSpacing: true,
     returnKeyLabel: true,