Fix the builds...

.flowconfig.android

@@ -22,6 +22,15 @@
 ; Ignore polyfills
 .*/Libraries/polyfills/.*
 
+; Ignore files that have a base platform file and an android file
+<PROJECT_ROOT>/Libraries/Image/Image.js
+<PROJECT_ROOT>/Libraries/Network/RCTNetworking.js
+<PROJECT_ROOT>/Libraries/Utilities/HMRLoadingView.js
+<PROJECT_ROOT>/Libraries/Components/Touchable/TouchableNativeFeedback.js
+
+; Ignore rn-cli.config.js
+<PROJECT_ROOT>/rn-cli.config.js
+
 ; These should not be required directly
 ; require from fbjs/lib instead: require('fbjs/lib/invariant')
 .*/node_modules/invariant/.*

Libraries/Components/Picker/PickerIOS.macos.js

@@ -25,6 +25,19 @@ var processColor = require('processColor');
 var createReactClass = require('create-react-class');
 var requireNativeComponent = require('requireNativeComponent');
 
+import type {ColorValue} from 'StyleSheetTypes';
+import type {ViewProps} from 'ViewPropTypes';
+import type {TextStyleProp} from 'StyleSheet';
+
+type PickerIOSChangeEvent = SyntheticEvent<
+ $ReadOnly<{|
+ newValue: any,
+ newIndex: number,
+ |}>,
+>;
+
+type Label = Stringish | number;
+
 type PickerIOSProps = $ReadOnly<{|
  ...ViewProps,
  children: React.ChildrenArray<React.Element<typeof PickerIOSItem>>,
@@ -34,6 +47,16 @@ type PickerIOSProps = $ReadOnly<{|
  selectedValue: any,
 |}>;
 
+type ItemProps = $ReadOnly<{|
+ label: ?Label,
+ value?: ?any,
+ color?: ?ColorValue,
+|}>;
+
+const PickerIOSItem = (props: ItemProps) => {
+ return null;
+};
+
 var PickerIOS = createReactClass({
  displayName: 'PickerIOS',
  mixins: [NativeMethodsMixin],

Libraries/Components/ProgressViewIOS/ProgressViewIOS.macos.js

@@ -22,65 +22,73 @@ var ViewPropTypes = require('ViewPropTypes');
 var createReactClass = require('create-react-class');
 var requireNativeComponent = require('requireNativeComponent');
 
+
+import type {NativeComponent} from 'ReactNative';
+import type {ImageSource} from 'ImageSource';
+import type {ColorValue} from 'StyleSheetTypes';
+import type {ViewProps} from 'ViewPropTypes';
+
+type Props = $ReadOnly<{|
+ ...ViewProps,
+
+ /**
+ * The progress bar style.
+ */
+ progressViewStyle?: ?('default' | 'bar'),
+
+ /**
+ * The progress value (between 0 and 1).
+ */
+ progress?: ?number,
+
+ /**
+ * The tint color of the progress bar itself.
+ */
+ progressTintColor?: ?ColorValue,
+
+ /**
+ * The tint color of the progress bar track.
+ */
+ trackTintColor?: ?ColorValue,
+
+ /**
+ * A stretchable image to display as the progress bar.
+ */
+ progressImage?: ?ImageSource,
+
+ /**
+ * A stretchable image to display behind the progress bar.
+ */
+ trackImage?: ?ImageSource,
+|}>;
+
+type NativeProgressViewIOS = Class<NativeComponent<Props>>;
+
+const RCTProgressView = ((requireNativeComponent(
+ 'RCTProgressView',
+): any): NativeProgressViewIOS);
+
 /**
  * Use `ProgressViewIOS` to render a UIProgressView on iOS.
  */
-var ProgressViewIOS = createReactClass({
- displayName: 'ProgressViewIOS',
- mixins: [NativeMethodsMixin],
-
- propTypes: {
- ...ViewPropTypes,
- /**
- * The progress bar style.
- */
- progressViewStyle: PropTypes.oneOf(['default', 'bar']),
-
- /**
- * The progress value (between 0 and 1).
- */
- progress: PropTypes.number,
-
- /**
- * The tint color of the progress bar itself.
- */
- progressTintColor: PropTypes.string,
-
- /**
- * The tint color of the progress bar track.
- */
- trackTintColor: PropTypes.string,
-
- /**
- * A stretchable image to display as the progress bar.
- */
- progressImage: Image.propTypes.source,
-
- /**
- * A stretchable image to display behind the progress bar.
- */
- trackImage: Image.propTypes.source,
- },
-
- render: function() {
- return (
- <RCTProgressView
- {...this.props}
- style={[styles.progressView, this.props.style]}
- />
- );
- },
-});
+const ProgressViewIOS = (
+ props: Props,
+ forwardedRef?: ?React.Ref<typeof RCTProgressView>,
+) => (
+ <RCTProgressView
+ {...props}
+ style={[styles.progressView, props.style]}
+ ref={forwardedRef}
+ />
+);
 
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
  progressView: {
  height: 2,
  },
 });
 
-var RCTProgressView = requireNativeComponent(
- 'RCTProgressView' /* TODO refactor to a class that extends React.Component<Props>,
- ProgressViewIOS*/,
-);
+// $FlowFixMe - TODO T29156721 `React.forwardRef` is not defined in Flow, yet.
+const ProgressViewIOSWithRef = React.forwardRef(ProgressViewIOS);
 
-module.exports = ProgressViewIOS;
+module.exports = (ProgressViewIOSWithRef: NativeProgressViewIOS);

Libraries/Components/SegmentedControlIOS/SegmentedControlIOS.macos.js

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2015-present, Facebook, Inc.
+ * Copyright (c) Facebook, Inc. and its affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -8,27 +8,70 @@
  * @flow
  */
 
-// TODO(macOS ISS#2323203)
+// TODO(macOS ISS#2323203)
 
 'use strict';
 
-var NativeMethodsMixin = require('NativeMethodsMixin');
-var React = require('React');
-var PropTypes = require('prop-types');
-var StyleSheet = require('StyleSheet');
-var ViewPropTypes = require('ViewPropTypes');
-
-var createReactClass = require('create-react-class');
-var requireNativeComponent = require('requireNativeComponent');
-
-type DefaultProps = {
- values: Array<string>,
- enabled: boolean,
-};
-
-var SEGMENTED_CONTROL_REFERENCE = 'segmentedcontrol';
-
-type Event = Object;
+const React = require('React');
+const StyleSheet = require('StyleSheet');
+
+const requireNativeComponent = require('requireNativeComponent');
+
+import type {SyntheticEvent} from 'CoreEventTypes';
+import type {ViewProps} from 'ViewPropTypes';
+import type {NativeComponent} from 'ReactNative';
+
+type Event = SyntheticEvent<
+ $ReadOnly<{|
+ value: number,
+ selectedSegmentIndex: number,
+ |}>,
+>;
+
+type SegmentedControlIOSProps = $ReadOnly<{|
+ ...ViewProps,
+ /**
+ * The labels for the control's segment buttons, in order.
+ */
+ values?: $ReadOnlyArray<string>,
+ /**
+ * The index in `props.values` of the segment to be (pre)selected.
+ */
+ selectedIndex?: ?number,
+ /**
+ * Callback that is called when the user taps a segment;
+ * passes the segment's value as an argument
+ */
+ onValueChange?: ?(value: number) => mixed,
+ /**
+ * Callback that is called when the user taps a segment;
+ * passes the event as an argument
+ */
+ onChange?: ?(event: Event) => mixed,
+ /**
+ * If false the user won't be able to interact with the control.
+ * Default value is true.
+ */
+ enabled?: boolean,
+ /**
+ * Accent color of the control.
+ */
+ tintColor?: ?string,
+ /**
+ * If true, then selecting a segment won't persist visually.
+ * The `onValueChange` callback will still work as expected.
+ */
+ momentary?: ?boolean,
+|}>;
+
+type Props = $ReadOnly<{|
+ ...SegmentedControlIOSProps,
+ forwardedRef: ?React.Ref<typeof RCTSegmentedControl>,
+|}>;
+
+type NativeSegmentedControlIOS = Class<
+ NativeComponent<SegmentedControlIOSProps>,
+>;
 
 /**
  * Use `SegmentedControlIOS` to render a UISegmentedControl iOS.
@@ -50,86 +93,50 @@ type Event = Object;
  * />
  * ````
  */
-var SegmentedControlIOS = createReactClass({
- displayName: 'SegmentedControlIOS',
- mixins: [NativeMethodsMixin],
-
- propTypes: {
- ...ViewPropTypes,
- /**
- * The labels for the control's segment buttons, in order.
- */
- values: PropTypes.arrayOf(PropTypes.string),
-
- /**
- * The index in `props.values` of the segment to be (pre)selected.
- */
- selectedIndex: PropTypes.number,
-
- /**
- * Callback that is called when the user taps a segment;
- * passes the segment's value as an argument
- */
- onValueChange: PropTypes.func,
-
- /**
- * Callback that is called when the user taps a segment;
- * passes the event as an argument
- */
- onChange: PropTypes.func,
-
- /**
- * If false the user won't be able to interact with the control.
- * Default value is true.
- */
- enabled: PropTypes.bool,
-
- /**
- * Accent color of the control.
- */
- tintColor: PropTypes.string,
-
- /**
- * If true, then selecting a segment won't persist visually.
- * The `onValueChange` callback will still work as expected.
- */
- momentary: PropTypes.bool,
- },
 
- getDefaultProps: function(): DefaultProps {
- return {
- values: [],
- enabled: true,
- };
- },
+const RCTSegmentedControl = ((requireNativeComponent(
+ 'RCTSegmentedControl',
+): any): NativeSegmentedControlIOS);
 
- _onChange: function(event: Event) {
+class SegmentedControlIOS extends React.Component<Props> {
+ static defaultProps = {
+ values: [],
+ enabled: true,
+ };
+
+ _onChange = (event: Event) => {
  this.props.onChange && this.props.onChange(event);
  this.props.onValueChange &&
  this.props.onValueChange(event.nativeEvent.value);
- },
+ };
 
- render: function() {
+ render() {
+ const {forwardedRef, ...props} = this.props;
  return (
  <RCTSegmentedControl
- {...this.props}
- ref={SEGMENTED_CONTROL_REFERENCE}
+ {...props}
+ ref={forwardedRef}
  style={[styles.segmentedControl, this.props.style]}
  onChange={this._onChange}
  />
  );
- },
-});
+ }
+}
 
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
  segmentedControl: {
  height: 28,
  },
 });
 
-var RCTSegmentedControl = requireNativeComponent(
- 'RCTSegmentedControl' /* TODO refactor to a class that extends React.Component<Props>,
- SegmentedControlIOS*/,
+// $FlowFixMe - TODO T29156721 `React.forwardRef` is not defined in Flow, yet.
+const SegmentedControlIOSWithRef = React.forwardRef(
+ (
+ props: SegmentedControlIOSProps,
+ forwardedRef: ?React.Ref<typeof RCTSegmentedControl>,
+ ) => {
+ return <SegmentedControlIOS {...props} forwardedRef={forwardedRef} />;
+ },
 );
 
-module.exports = SegmentedControlIOS;
+module.exports = (SegmentedControlIOSWithRef: NativeSegmentedControlIOS);

.flowconfig.android

@@ -22,6 +22,15 @@
 ; Ignore polyfills
 .*/Libraries/polyfills/.*
 
+; Ignore files that have a base platform file and an android file
+<PROJECT_ROOT>/Libraries/Image/Image.js
+<PROJECT_ROOT>/Libraries/Network/RCTNetworking.js
+<PROJECT_ROOT>/Libraries/Utilities/HMRLoadingView.js
+<PROJECT_ROOT>/Libraries/Components/Touchable/TouchableNativeFeedback.js
+
+; Ignore rn-cli.config.js
+<PROJECT_ROOT>/rn-cli.config.js
+
 ; These should not be required directly
 ; require from fbjs/lib instead: require('fbjs/lib/invariant')
 .*/node_modules/invariant/.*

Libraries/Components/Picker/PickerIOS.macos.js

@@ -25,6 +25,19 @@ var processColor = require('processColor');
 var createReactClass = require('create-react-class');
 var requireNativeComponent = require('requireNativeComponent');
 
+import type {ColorValue} from 'StyleSheetTypes';
+import type {ViewProps} from 'ViewPropTypes';
+import type {TextStyleProp} from 'StyleSheet';
+
+type PickerIOSChangeEvent = SyntheticEvent<
+ $ReadOnly<{|
+ newValue: any,
+ newIndex: number,
+ |}>,
+>;
+
+type Label = Stringish | number;
+
 type PickerIOSProps = $ReadOnly<{|
  ...ViewProps,
  children: React.ChildrenArray<React.Element<typeof PickerIOSItem>>,
@@ -34,6 +47,16 @@ type PickerIOSProps = $ReadOnly<{|
  selectedValue: any,
 |}>;
 
+type ItemProps = $ReadOnly<{|
+ label: ?Label,
+ value?: ?any,
+ color?: ?ColorValue,
+|}>;
+
+const PickerIOSItem = (props: ItemProps) => {
+ return null;
+};
+
 var PickerIOS = createReactClass({
  displayName: 'PickerIOS',
  mixins: [NativeMethodsMixin],

Libraries/Components/ProgressViewIOS/ProgressViewIOS.macos.js

@@ -22,65 +22,73 @@ var ViewPropTypes = require('ViewPropTypes');
 var createReactClass = require('create-react-class');
 var requireNativeComponent = require('requireNativeComponent');
 
+
+import type {NativeComponent} from 'ReactNative';
+import type {ImageSource} from 'ImageSource';
+import type {ColorValue} from 'StyleSheetTypes';
+import type {ViewProps} from 'ViewPropTypes';
+
+type Props = $ReadOnly<{|
+ ...ViewProps,
+
+ /**
+ * The progress bar style.
+ */
+ progressViewStyle?: ?('default' | 'bar'),
+
+ /**
+ * The progress value (between 0 and 1).
+ */
+ progress?: ?number,
+
+ /**
+ * The tint color of the progress bar itself.
+ */
+ progressTintColor?: ?ColorValue,
+
+ /**
+ * The tint color of the progress bar track.
+ */
+ trackTintColor?: ?ColorValue,
+
+ /**
+ * A stretchable image to display as the progress bar.
+ */
+ progressImage?: ?ImageSource,
+
+ /**
+ * A stretchable image to display behind the progress bar.
+ */
+ trackImage?: ?ImageSource,
+|}>;
+
+type NativeProgressViewIOS = Class<NativeComponent<Props>>;
+
+const RCTProgressView = ((requireNativeComponent(
+ 'RCTProgressView',
+): any): NativeProgressViewIOS);
+
 /**
  * Use `ProgressViewIOS` to render a UIProgressView on iOS.
  */
-var ProgressViewIOS = createReactClass({
- displayName: 'ProgressViewIOS',
- mixins: [NativeMethodsMixin],
-
- propTypes: {
- ...ViewPropTypes,
- /**
- * The progress bar style.
- */
- progressViewStyle: PropTypes.oneOf(['default', 'bar']),
-
- /**
- * The progress value (between 0 and 1).
- */
- progress: PropTypes.number,
-
- /**
- * The tint color of the progress bar itself.
- */
- progressTintColor: PropTypes.string,
-
- /**
- * The tint color of the progress bar track.
- */
- trackTintColor: PropTypes.string,
-
- /**
- * A stretchable image to display as the progress bar.
- */
- progressImage: Image.propTypes.source,
-
- /**
- * A stretchable image to display behind the progress bar.
- */
- trackImage: Image.propTypes.source,
- },
-
- render: function() {
- return (
- <RCTProgressView
- {...this.props}
- style={[styles.progressView, this.props.style]}
- />
- );
- },
-});
+const ProgressViewIOS = (
+ props: Props,
+ forwardedRef?: ?React.Ref<typeof RCTProgressView>,
+) => (
+ <RCTProgressView
+ {...props}
+ style={[styles.progressView, props.style]}
+ ref={forwardedRef}
+ />
+);
 
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
  progressView: {
  height: 2,
  },
 });
 
-var RCTProgressView = requireNativeComponent(
- 'RCTProgressView' /* TODO refactor to a class that extends React.Component<Props>,
- ProgressViewIOS*/,
-);
+// $FlowFixMe - TODO T29156721 `React.forwardRef` is not defined in Flow, yet.
+const ProgressViewIOSWithRef = React.forwardRef(ProgressViewIOS);
 
-module.exports = ProgressViewIOS;
+module.exports = (ProgressViewIOSWithRef: NativeProgressViewIOS);

Libraries/Components/SegmentedControlIOS/SegmentedControlIOS.macos.js

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2015-present, Facebook, Inc.
+ * Copyright (c) Facebook, Inc. and its affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -8,27 +8,70 @@
  * @flow
  */
 
-// TODO(macOS ISS#2323203)
+// TODO(macOS ISS#2323203)
 
 'use strict';
 
-var NativeMethodsMixin = require('NativeMethodsMixin');
-var React = require('React');
-var PropTypes = require('prop-types');
-var StyleSheet = require('StyleSheet');
-var ViewPropTypes = require('ViewPropTypes');
-
-var createReactClass = require('create-react-class');
-var requireNativeComponent = require('requireNativeComponent');
-
-type DefaultProps = {
- values: Array<string>,
- enabled: boolean,
-};
-
-var SEGMENTED_CONTROL_REFERENCE = 'segmentedcontrol';
-
-type Event = Object;
+const React = require('React');
+const StyleSheet = require('StyleSheet');
+
+const requireNativeComponent = require('requireNativeComponent');
+
+import type {SyntheticEvent} from 'CoreEventTypes';
+import type {ViewProps} from 'ViewPropTypes';
+import type {NativeComponent} from 'ReactNative';
+
+type Event = SyntheticEvent<
+ $ReadOnly<{|
+ value: number,
+ selectedSegmentIndex: number,
+ |}>,
+>;
+
+type SegmentedControlIOSProps = $ReadOnly<{|
+ ...ViewProps,
+ /**
+ * The labels for the control's segment buttons, in order.
+ */
+ values?: $ReadOnlyArray<string>,
+ /**
+ * The index in `props.values` of the segment to be (pre)selected.
+ */
+ selectedIndex?: ?number,
+ /**
+ * Callback that is called when the user taps a segment;
+ * passes the segment's value as an argument
+ */
+ onValueChange?: ?(value: number) => mixed,
+ /**
+ * Callback that is called when the user taps a segment;
+ * passes the event as an argument
+ */
+ onChange?: ?(event: Event) => mixed,
+ /**
+ * If false the user won't be able to interact with the control.
+ * Default value is true.
+ */
+ enabled?: boolean,
+ /**
+ * Accent color of the control.
+ */
+ tintColor?: ?string,
+ /**
+ * If true, then selecting a segment won't persist visually.
+ * The `onValueChange` callback will still work as expected.
+ */
+ momentary?: ?boolean,
+|}>;
+
+type Props = $ReadOnly<{|
+ ...SegmentedControlIOSProps,
+ forwardedRef: ?React.Ref<typeof RCTSegmentedControl>,
+|}>;
+
+type NativeSegmentedControlIOS = Class<
+ NativeComponent<SegmentedControlIOSProps>,
+>;
 
 /**
  * Use `SegmentedControlIOS` to render a UISegmentedControl iOS.
@@ -50,86 +93,50 @@ type Event = Object;
  * />
  * ````
  */
-var SegmentedControlIOS = createReactClass({
- displayName: 'SegmentedControlIOS',
- mixins: [NativeMethodsMixin],
-
- propTypes: {
- ...ViewPropTypes,
- /**
- * The labels for the control's segment buttons, in order.
- */
- values: PropTypes.arrayOf(PropTypes.string),
-
- /**
- * The index in `props.values` of the segment to be (pre)selected.
- */
- selectedIndex: PropTypes.number,
-
- /**
- * Callback that is called when the user taps a segment;
- * passes the segment's value as an argument
- */
- onValueChange: PropTypes.func,
-
- /**
- * Callback that is called when the user taps a segment;
- * passes the event as an argument
- */
- onChange: PropTypes.func,
-
- /**
- * If false the user won't be able to interact with the control.
- * Default value is true.
- */
- enabled: PropTypes.bool,
-
- /**
- * Accent color of the control.
- */
- tintColor: PropTypes.string,
-
- /**
- * If true, then selecting a segment won't persist visually.
- * The `onValueChange` callback will still work as expected.
- */
- momentary: PropTypes.bool,
- },
 
- getDefaultProps: function(): DefaultProps {
- return {
- values: [],
- enabled: true,
- };
- },
+const RCTSegmentedControl = ((requireNativeComponent(
+ 'RCTSegmentedControl',
+): any): NativeSegmentedControlIOS);
 
- _onChange: function(event: Event) {
+class SegmentedControlIOS extends React.Component<Props> {
+ static defaultProps = {
+ values: [],
+ enabled: true,
+ };
+
+ _onChange = (event: Event) => {
  this.props.onChange && this.props.onChange(event);
  this.props.onValueChange &&
  this.props.onValueChange(event.nativeEvent.value);
- },
+ };
 
- render: function() {
+ render() {
+ const {forwardedRef, ...props} = this.props;
  return (
  <RCTSegmentedControl
- {...this.props}
- ref={SEGMENTED_CONTROL_REFERENCE}
+ {...props}
+ ref={forwardedRef}
  style={[styles.segmentedControl, this.props.style]}
  onChange={this._onChange}
  />
  );
- },
-});
+ }
+}
 
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
  segmentedControl: {
  height: 28,
  },
 });
 
-var RCTSegmentedControl = requireNativeComponent(
- 'RCTSegmentedControl' /* TODO refactor to a class that extends React.Component<Props>,
- SegmentedControlIOS*/,
+// $FlowFixMe - TODO T29156721 `React.forwardRef` is not defined in Flow, yet.
+const SegmentedControlIOSWithRef = React.forwardRef(
+ (
+ props: SegmentedControlIOSProps,
+ forwardedRef: ?React.Ref<typeof RCTSegmentedControl>,
+ ) => {
+ return <SegmentedControlIOS {...props} forwardedRef={forwardedRef} />;
+ },
 );
 
-module.exports = SegmentedControlIOS;
+module.exports = (SegmentedControlIOSWithRef: NativeSegmentedControlIOS);

.flowconfig.android

@@ -22,6 +22,15 @@
 ; Ignore polyfills
 .*/Libraries/polyfills/.*
 
+; Ignore files that have a base platform file and an android file
+<PROJECT_ROOT>/Libraries/Image/Image.js
+<PROJECT_ROOT>/Libraries/Network/RCTNetworking.js
+<PROJECT_ROOT>/Libraries/Utilities/HMRLoadingView.js
+<PROJECT_ROOT>/Libraries/Components/Touchable/TouchableNativeFeedback.js
+
+; Ignore rn-cli.config.js
+<PROJECT_ROOT>/rn-cli.config.js
+
 ; These should not be required directly
 ; require from fbjs/lib instead: require('fbjs/lib/invariant')
 .*/node_modules/invariant/.*

Libraries/Components/Picker/PickerIOS.macos.js

@@ -25,6 +25,19 @@ var processColor = require('processColor');
 var createReactClass = require('create-react-class');
 var requireNativeComponent = require('requireNativeComponent');
 
+import type {ColorValue} from 'StyleSheetTypes';
+import type {ViewProps} from 'ViewPropTypes';
+import type {TextStyleProp} from 'StyleSheet';
+
+type PickerIOSChangeEvent = SyntheticEvent<
+ $ReadOnly<{|
+ newValue: any,
+ newIndex: number,
+ |}>,
+>;
+
+type Label = Stringish | number;
+
 type PickerIOSProps = $ReadOnly<{|
  ...ViewProps,
  children: React.ChildrenArray<React.Element<typeof PickerIOSItem>>,
@@ -34,6 +47,16 @@ type PickerIOSProps = $ReadOnly<{|
  selectedValue: any,
 |}>;
 
+type ItemProps = $ReadOnly<{|
+ label: ?Label,
+ value?: ?any,
+ color?: ?ColorValue,
+|}>;
+
+const PickerIOSItem = (props: ItemProps) => {
+ return null;
+};
+
 var PickerIOS = createReactClass({
  displayName: 'PickerIOS',
  mixins: [NativeMethodsMixin],

Libraries/Components/ProgressViewIOS/ProgressViewIOS.macos.js

@@ -22,65 +22,73 @@ var ViewPropTypes = require('ViewPropTypes');
 var createReactClass = require('create-react-class');
 var requireNativeComponent = require('requireNativeComponent');
 
+
+import type {NativeComponent} from 'ReactNative';
+import type {ImageSource} from 'ImageSource';
+import type {ColorValue} from 'StyleSheetTypes';
+import type {ViewProps} from 'ViewPropTypes';
+
+type Props = $ReadOnly<{|
+ ...ViewProps,
+
+ /**
+ * The progress bar style.
+ */
+ progressViewStyle?: ?('default' | 'bar'),
+
+ /**
+ * The progress value (between 0 and 1).
+ */
+ progress?: ?number,
+
+ /**
+ * The tint color of the progress bar itself.
+ */
+ progressTintColor?: ?ColorValue,
+
+ /**
+ * The tint color of the progress bar track.
+ */
+ trackTintColor?: ?ColorValue,
+
+ /**
+ * A stretchable image to display as the progress bar.
+ */
+ progressImage?: ?ImageSource,
+
+ /**
+ * A stretchable image to display behind the progress bar.
+ */
+ trackImage?: ?ImageSource,
+|}>;
+
+type NativeProgressViewIOS = Class<NativeComponent<Props>>;
+
+const RCTProgressView = ((requireNativeComponent(
+ 'RCTProgressView',
+): any): NativeProgressViewIOS);
+
 /**
  * Use `ProgressViewIOS` to render a UIProgressView on iOS.
  */
-var ProgressViewIOS = createReactClass({
- displayName: 'ProgressViewIOS',
- mixins: [NativeMethodsMixin],
-
- propTypes: {
- ...ViewPropTypes,
- /**
- * The progress bar style.
- */
- progressViewStyle: PropTypes.oneOf(['default', 'bar']),
-
- /**
- * The progress value (between 0 and 1).
- */
- progress: PropTypes.number,
-
- /**
- * The tint color of the progress bar itself.
- */
- progressTintColor: PropTypes.string,
-
- /**
- * The tint color of the progress bar track.
- */
- trackTintColor: PropTypes.string,
-
- /**
- * A stretchable image to display as the progress bar.
- */
- progressImage: Image.propTypes.source,
-
- /**
- * A stretchable image to display behind the progress bar.
- */
- trackImage: Image.propTypes.source,
- },
-
- render: function() {
- return (
- <RCTProgressView
- {...this.props}
- style={[styles.progressView, this.props.style]}
- />
- );
- },
-});
+const ProgressViewIOS = (
+ props: Props,
+ forwardedRef?: ?React.Ref<typeof RCTProgressView>,
+) => (
+ <RCTProgressView
+ {...props}
+ style={[styles.progressView, props.style]}
+ ref={forwardedRef}
+ />
+);
 
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
  progressView: {
  height: 2,
  },
 });
 
-var RCTProgressView = requireNativeComponent(
- 'RCTProgressView' /* TODO refactor to a class that extends React.Component<Props>,
- ProgressViewIOS*/,
-);
+// $FlowFixMe - TODO T29156721 `React.forwardRef` is not defined in Flow, yet.
+const ProgressViewIOSWithRef = React.forwardRef(ProgressViewIOS);
 
-module.exports = ProgressViewIOS;
+module.exports = (ProgressViewIOSWithRef: NativeProgressViewIOS);

Libraries/Components/SegmentedControlIOS/SegmentedControlIOS.macos.js

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2015-present, Facebook, Inc.
+ * Copyright (c) Facebook, Inc. and its affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -8,27 +8,70 @@
  * @flow
  */
 
-// TODO(macOS ISS#2323203)
+// TODO(macOS ISS#2323203)
 
 'use strict';
 
-var NativeMethodsMixin = require('NativeMethodsMixin');
-var React = require('React');
-var PropTypes = require('prop-types');
-var StyleSheet = require('StyleSheet');
-var ViewPropTypes = require('ViewPropTypes');
-
-var createReactClass = require('create-react-class');
-var requireNativeComponent = require('requireNativeComponent');
-
-type DefaultProps = {
- values: Array<string>,
- enabled: boolean,
-};
-
-var SEGMENTED_CONTROL_REFERENCE = 'segmentedcontrol';
-
-type Event = Object;
+const React = require('React');
+const StyleSheet = require('StyleSheet');
+
+const requireNativeComponent = require('requireNativeComponent');
+
+import type {SyntheticEvent} from 'CoreEventTypes';
+import type {ViewProps} from 'ViewPropTypes';
+import type {NativeComponent} from 'ReactNative';
+
+type Event = SyntheticEvent<
+ $ReadOnly<{|
+ value: number,
+ selectedSegmentIndex: number,
+ |}>,
+>;
+
+type SegmentedControlIOSProps = $ReadOnly<{|
+ ...ViewProps,
+ /**
+ * The labels for the control's segment buttons, in order.
+ */
+ values?: $ReadOnlyArray<string>,
+ /**
+ * The index in `props.values` of the segment to be (pre)selected.
+ */
+ selectedIndex?: ?number,
+ /**
+ * Callback that is called when the user taps a segment;
+ * passes the segment's value as an argument
+ */
+ onValueChange?: ?(value: number) => mixed,
+ /**
+ * Callback that is called when the user taps a segment;
+ * passes the event as an argument
+ */
+ onChange?: ?(event: Event) => mixed,
+ /**
+ * If false the user won't be able to interact with the control.
+ * Default value is true.
+ */
+ enabled?: boolean,
+ /**
+ * Accent color of the control.
+ */
+ tintColor?: ?string,
+ /**
+ * If true, then selecting a segment won't persist visually.
+ * The `onValueChange` callback will still work as expected.
+ */
+ momentary?: ?boolean,
+|}>;
+
+type Props = $ReadOnly<{|
+ ...SegmentedControlIOSProps,
+ forwardedRef: ?React.Ref<typeof RCTSegmentedControl>,
+|}>;
+
+type NativeSegmentedControlIOS = Class<
+ NativeComponent<SegmentedControlIOSProps>,
+>;
 
 /**
  * Use `SegmentedControlIOS` to render a UISegmentedControl iOS.
@@ -50,86 +93,50 @@ type Event = Object;
  * />
  * ````
  */
-var SegmentedControlIOS = createReactClass({
- displayName: 'SegmentedControlIOS',
- mixins: [NativeMethodsMixin],
-
- propTypes: {
- ...ViewPropTypes,
- /**
- * The labels for the control's segment buttons, in order.
- */
- values: PropTypes.arrayOf(PropTypes.string),
-
- /**
- * The index in `props.values` of the segment to be (pre)selected.
- */
- selectedIndex: PropTypes.number,
-
- /**
- * Callback that is called when the user taps a segment;
- * passes the segment's value as an argument
- */
- onValueChange: PropTypes.func,
-
- /**
- * Callback that is called when the user taps a segment;
- * passes the event as an argument
- */
- onChange: PropTypes.func,
-
- /**
- * If false the user won't be able to interact with the control.
- * Default value is true.
- */
- enabled: PropTypes.bool,
-
- /**
- * Accent color of the control.
- */
- tintColor: PropTypes.string,
-
- /**
- * If true, then selecting a segment won't persist visually.
- * The `onValueChange` callback will still work as expected.
- */
- momentary: PropTypes.bool,
- },
 
- getDefaultProps: function(): DefaultProps {
- return {
- values: [],
- enabled: true,
- };
- },
+const RCTSegmentedControl = ((requireNativeComponent(
+ 'RCTSegmentedControl',
+): any): NativeSegmentedControlIOS);
 
- _onChange: function(event: Event) {
+class SegmentedControlIOS extends React.Component<Props> {
+ static defaultProps = {
+ values: [],
+ enabled: true,
+ };
+
+ _onChange = (event: Event) => {
  this.props.onChange && this.props.onChange(event);
  this.props.onValueChange &&
  this.props.onValueChange(event.nativeEvent.value);
- },
+ };
 
- render: function() {
+ render() {
+ const {forwardedRef, ...props} = this.props;
  return (
  <RCTSegmentedControl
- {...this.props}
- ref={SEGMENTED_CONTROL_REFERENCE}
+ {...props}
+ ref={forwardedRef}
  style={[styles.segmentedControl, this.props.style]}
  onChange={this._onChange}
  />
  );
- },
-});
+ }
+}
 
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
  segmentedControl: {
  height: 28,
  },
 });
 
-var RCTSegmentedControl = requireNativeComponent(
- 'RCTSegmentedControl' /* TODO refactor to a class that extends React.Component<Props>,
- SegmentedControlIOS*/,
+// $FlowFixMe - TODO T29156721 `React.forwardRef` is not defined in Flow, yet.
+const SegmentedControlIOSWithRef = React.forwardRef(
+ (
+ props: SegmentedControlIOSProps,
+ forwardedRef: ?React.Ref<typeof RCTSegmentedControl>,
+ ) => {
+ return <SegmentedControlIOS {...props} forwardedRef={forwardedRef} />;
+ },
 );
 
-module.exports = SegmentedControlIOS;
+module.exports = (SegmentedControlIOSWithRef: NativeSegmentedControlIOS);

.flowconfig.android

@@ -22,6 +22,15 @@
 ; Ignore polyfills
 .*/Libraries/polyfills/.*
 
+; Ignore files that have a base platform file and an android file
+<PROJECT_ROOT>/Libraries/Image/Image.js
+<PROJECT_ROOT>/Libraries/Network/RCTNetworking.js
+<PROJECT_ROOT>/Libraries/Utilities/HMRLoadingView.js
+<PROJECT_ROOT>/Libraries/Components/Touchable/TouchableNativeFeedback.js
+
+; Ignore rn-cli.config.js
+<PROJECT_ROOT>/rn-cli.config.js
+
 ; These should not be required directly
 ; require from fbjs/lib instead: require('fbjs/lib/invariant')
 .*/node_modules/invariant/.*

Libraries/Components/Picker/PickerIOS.macos.js

@@ -25,6 +25,19 @@ var processColor = require('processColor');
 var createReactClass = require('create-react-class');
 var requireNativeComponent = require('requireNativeComponent');
 
+import type {ColorValue} from 'StyleSheetTypes';
+import type {ViewProps} from 'ViewPropTypes';
+import type {TextStyleProp} from 'StyleSheet';
+
+type PickerIOSChangeEvent = SyntheticEvent<
+ $ReadOnly<{|
+ newValue: any,
+ newIndex: number,
+ |}>,
+>;
+
+type Label = Stringish | number;
+
 type PickerIOSProps = $ReadOnly<{|
  ...ViewProps,
  children: React.ChildrenArray<React.Element<typeof PickerIOSItem>>,
@@ -34,6 +47,16 @@ type PickerIOSProps = $ReadOnly<{|
  selectedValue: any,
 |}>;
 
+type ItemProps = $ReadOnly<{|
+ label: ?Label,
+ value?: ?any,
+ color?: ?ColorValue,
+|}>;
+
+const PickerIOSItem = (props: ItemProps) => {
+ return null;
+};
+
 var PickerIOS = createReactClass({
  displayName: 'PickerIOS',
  mixins: [NativeMethodsMixin],

Libraries/Components/ProgressViewIOS/ProgressViewIOS.macos.js

@@ -22,65 +22,73 @@ var ViewPropTypes = require('ViewPropTypes');
 var createReactClass = require('create-react-class');
 var requireNativeComponent = require('requireNativeComponent');
 
+
+import type {NativeComponent} from 'ReactNative';
+import type {ImageSource} from 'ImageSource';
+import type {ColorValue} from 'StyleSheetTypes';
+import type {ViewProps} from 'ViewPropTypes';
+
+type Props = $ReadOnly<{|
+ ...ViewProps,
+
+ /**
+ * The progress bar style.
+ */
+ progressViewStyle?: ?('default' | 'bar'),
+
+ /**
+ * The progress value (between 0 and 1).
+ */
+ progress?: ?number,
+
+ /**
+ * The tint color of the progress bar itself.
+ */
+ progressTintColor?: ?ColorValue,
+
+ /**
+ * The tint color of the progress bar track.
+ */
+ trackTintColor?: ?ColorValue,
+
+ /**
+ * A stretchable image to display as the progress bar.
+ */
+ progressImage?: ?ImageSource,
+
+ /**
+ * A stretchable image to display behind the progress bar.
+ */
+ trackImage?: ?ImageSource,
+|}>;
+
+type NativeProgressViewIOS = Class<NativeComponent<Props>>;
+
+const RCTProgressView = ((requireNativeComponent(
+ 'RCTProgressView',
+): any): NativeProgressViewIOS);
+
 /**
  * Use `ProgressViewIOS` to render a UIProgressView on iOS.
  */
-var ProgressViewIOS = createReactClass({
- displayName: 'ProgressViewIOS',
- mixins: [NativeMethodsMixin],
-
- propTypes: {
- ...ViewPropTypes,
- /**
- * The progress bar style.
- */
- progressViewStyle: PropTypes.oneOf(['default', 'bar']),
-
- /**
- * The progress value (between 0 and 1).
- */
- progress: PropTypes.number,
-
- /**
- * The tint color of the progress bar itself.
- */
- progressTintColor: PropTypes.string,
-
- /**
- * The tint color of the progress bar track.
- */
- trackTintColor: PropTypes.string,
-
- /**
- * A stretchable image to display as the progress bar.
- */
- progressImage: Image.propTypes.source,
-
- /**
- * A stretchable image to display behind the progress bar.
- */
- trackImage: Image.propTypes.source,
- },
-
- render: function() {
- return (
- <RCTProgressView
- {...this.props}
- style={[styles.progressView, this.props.style]}
- />
- );
- },
-});
+const ProgressViewIOS = (
+ props: Props,
+ forwardedRef?: ?React.Ref<typeof RCTProgressView>,
+) => (
+ <RCTProgressView
+ {...props}
+ style={[styles.progressView, props.style]}
+ ref={forwardedRef}
+ />
+);
 
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
  progressView: {
  height: 2,
  },
 });
 
-var RCTProgressView = requireNativeComponent(
- 'RCTProgressView' /* TODO refactor to a class that extends React.Component<Props>,
- ProgressViewIOS*/,
-);
+// $FlowFixMe - TODO T29156721 `React.forwardRef` is not defined in Flow, yet.
+const ProgressViewIOSWithRef = React.forwardRef(ProgressViewIOS);
 
-module.exports = ProgressViewIOS;
+module.exports = (ProgressViewIOSWithRef: NativeProgressViewIOS);

Libraries/Components/SegmentedControlIOS/SegmentedControlIOS.macos.js

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2015-present, Facebook, Inc.
+ * Copyright (c) Facebook, Inc. and its affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -8,27 +8,70 @@
  * @flow
  */
 
-// TODO(macOS ISS#2323203)
+// TODO(macOS ISS#2323203)
 
 'use strict';
 
-var NativeMethodsMixin = require('NativeMethodsMixin');
-var React = require('React');
-var PropTypes = require('prop-types');
-var StyleSheet = require('StyleSheet');
-var ViewPropTypes = require('ViewPropTypes');
-
-var createReactClass = require('create-react-class');
-var requireNativeComponent = require('requireNativeComponent');
-
-type DefaultProps = {
- values: Array<string>,
- enabled: boolean,
-};
-
-var SEGMENTED_CONTROL_REFERENCE = 'segmentedcontrol';
-
-type Event = Object;
+const React = require('React');
+const StyleSheet = require('StyleSheet');
+
+const requireNativeComponent = require('requireNativeComponent');
+
+import type {SyntheticEvent} from 'CoreEventTypes';
+import type {ViewProps} from 'ViewPropTypes';
+import type {NativeComponent} from 'ReactNative';
+
+type Event = SyntheticEvent<
+ $ReadOnly<{|
+ value: number,
+ selectedSegmentIndex: number,
+ |}>,
+>;
+
+type SegmentedControlIOSProps = $ReadOnly<{|
+ ...ViewProps,
+ /**
+ * The labels for the control's segment buttons, in order.
+ */
+ values?: $ReadOnlyArray<string>,
+ /**
+ * The index in `props.values` of the segment to be (pre)selected.
+ */
+ selectedIndex?: ?number,
+ /**
+ * Callback that is called when the user taps a segment;
+ * passes the segment's value as an argument
+ */
+ onValueChange?: ?(value: number) => mixed,
+ /**
+ * Callback that is called when the user taps a segment;
+ * passes the event as an argument
+ */
+ onChange?: ?(event: Event) => mixed,
+ /**
+ * If false the user won't be able to interact with the control.
+ * Default value is true.
+ */
+ enabled?: boolean,
+ /**
+ * Accent color of the control.
+ */
+ tintColor?: ?string,
+ /**
+ * If true, then selecting a segment won't persist visually.
+ * The `onValueChange` callback will still work as expected.
+ */
+ momentary?: ?boolean,
+|}>;
+
+type Props = $ReadOnly<{|
+ ...SegmentedControlIOSProps,
+ forwardedRef: ?React.Ref<typeof RCTSegmentedControl>,
+|}>;
+
+type NativeSegmentedControlIOS = Class<
+ NativeComponent<SegmentedControlIOSProps>,
+>;
 
 /**
  * Use `SegmentedControlIOS` to render a UISegmentedControl iOS.
@@ -50,86 +93,50 @@ type Event = Object;
  * />
  * ````
  */
-var SegmentedControlIOS = createReactClass({
- displayName: 'SegmentedControlIOS',
- mixins: [NativeMethodsMixin],
-
- propTypes: {
- ...ViewPropTypes,
- /**
- * The labels for the control's segment buttons, in order.
- */
- values: PropTypes.arrayOf(PropTypes.string),
-
- /**
- * The index in `props.values` of the segment to be (pre)selected.
- */
- selectedIndex: PropTypes.number,
-
- /**
- * Callback that is called when the user taps a segment;
- * passes the segment's value as an argument
- */
- onValueChange: PropTypes.func,
-
- /**
- * Callback that is called when the user taps a segment;
- * passes the event as an argument
- */
- onChange: PropTypes.func,
-
- /**
- * If false the user won't be able to interact with the control.
- * Default value is true.
- */
- enabled: PropTypes.bool,
-
- /**
- * Accent color of the control.
- */
- tintColor: PropTypes.string,
-
- /**
- * If true, then selecting a segment won't persist visually.
- * The `onValueChange` callback will still work as expected.
- */
- momentary: PropTypes.bool,
- },
 
- getDefaultProps: function(): DefaultProps {
- return {
- values: [],
- enabled: true,
- };
- },
+const RCTSegmentedControl = ((requireNativeComponent(
+ 'RCTSegmentedControl',
+): any): NativeSegmentedControlIOS);
 
- _onChange: function(event: Event) {
+class SegmentedControlIOS extends React.Component<Props> {
+ static defaultProps = {
+ values: [],
+ enabled: true,
+ };
+
+ _onChange = (event: Event) => {
  this.props.onChange && this.props.onChange(event);
  this.props.onValueChange &&
  this.props.onValueChange(event.nativeEvent.value);
- },
+ };
 
- render: function() {
+ render() {
+ const {forwardedRef, ...props} = this.props;
  return (
  <RCTSegmentedControl
- {...this.props}
- ref={SEGMENTED_CONTROL_REFERENCE}
+ {...props}
+ ref={forwardedRef}
  style={[styles.segmentedControl, this.props.style]}
  onChange={this._onChange}
  />
  );
- },
-});
+ }
+}
 
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
  segmentedControl: {
  height: 28,
  },
 });
 
-var RCTSegmentedControl = requireNativeComponent(
- 'RCTSegmentedControl' /* TODO refactor to a class that extends React.Component<Props>,
- SegmentedControlIOS*/,
+// $FlowFixMe - TODO T29156721 `React.forwardRef` is not defined in Flow, yet.
+const SegmentedControlIOSWithRef = React.forwardRef(
+ (
+ props: SegmentedControlIOSProps,
+ forwardedRef: ?React.Ref<typeof RCTSegmentedControl>,
+ ) => {
+ return <SegmentedControlIOS {...props} forwardedRef={forwardedRef} />;
+ },
 );
 
-module.exports = SegmentedControlIOS;
+module.exports = (SegmentedControlIOSWithRef: NativeSegmentedControlIOS);

.flowconfig.android

@@ -22,6 +22,15 @@
 ; Ignore polyfills
 .*/Libraries/polyfills/.*
 
+; Ignore files that have a base platform file and an android file
+<PROJECT_ROOT>/Libraries/Image/Image.js
+<PROJECT_ROOT>/Libraries/Network/RCTNetworking.js
+<PROJECT_ROOT>/Libraries/Utilities/HMRLoadingView.js
+<PROJECT_ROOT>/Libraries/Components/Touchable/TouchableNativeFeedback.js
+
+; Ignore rn-cli.config.js
+<PROJECT_ROOT>/rn-cli.config.js
+
 ; These should not be required directly
 ; require from fbjs/lib instead: require('fbjs/lib/invariant')
 .*/node_modules/invariant/.*

Libraries/Components/Picker/PickerIOS.macos.js

@@ -25,6 +25,19 @@ var processColor = require('processColor');
 var createReactClass = require('create-react-class');
 var requireNativeComponent = require('requireNativeComponent');
 
+import type {ColorValue} from 'StyleSheetTypes';
+import type {ViewProps} from 'ViewPropTypes';
+import type {TextStyleProp} from 'StyleSheet';
+
+type PickerIOSChangeEvent = SyntheticEvent<
+ $ReadOnly<{|
+ newValue: any,
+ newIndex: number,
+ |}>,
+>;
+
+type Label = Stringish | number;
+
 type PickerIOSProps = $ReadOnly<{|
  ...ViewProps,
  children: React.ChildrenArray<React.Element<typeof PickerIOSItem>>,
@@ -34,6 +47,16 @@ type PickerIOSProps = $ReadOnly<{|
  selectedValue: any,
 |}>;
 
+type ItemProps = $ReadOnly<{|
+ label: ?Label,
+ value?: ?any,
+ color?: ?ColorValue,
+|}>;
+
+const PickerIOSItem = (props: ItemProps) => {
+ return null;
+};
+
 var PickerIOS = createReactClass({
  displayName: 'PickerIOS',
  mixins: [NativeMethodsMixin],

Libraries/Components/ProgressViewIOS/ProgressViewIOS.macos.js

@@ -22,65 +22,73 @@ var ViewPropTypes = require('ViewPropTypes');
 var createReactClass = require('create-react-class');
 var requireNativeComponent = require('requireNativeComponent');
 
+
+import type {NativeComponent} from 'ReactNative';
+import type {ImageSource} from 'ImageSource';
+import type {ColorValue} from 'StyleSheetTypes';
+import type {ViewProps} from 'ViewPropTypes';
+
+type Props = $ReadOnly<{|
+ ...ViewProps,
+
+ /**
+ * The progress bar style.
+ */
+ progressViewStyle?: ?('default' | 'bar'),
+
+ /**
+ * The progress value (between 0 and 1).
+ */
+ progress?: ?number,
+
+ /**
+ * The tint color of the progress bar itself.
+ */
+ progressTintColor?: ?ColorValue,
+
+ /**
+ * The tint color of the progress bar track.
+ */
+ trackTintColor?: ?ColorValue,
+
+ /**
+ * A stretchable image to display as the progress bar.
+ */
+ progressImage?: ?ImageSource,
+
+ /**
+ * A stretchable image to display behind the progress bar.
+ */
+ trackImage?: ?ImageSource,
+|}>;
+
+type NativeProgressViewIOS = Class<NativeComponent<Props>>;
+
+const RCTProgressView = ((requireNativeComponent(
+ 'RCTProgressView',
+): any): NativeProgressViewIOS);
+
 /**
  * Use `ProgressViewIOS` to render a UIProgressView on iOS.
  */
-var ProgressViewIOS = createReactClass({
- displayName: 'ProgressViewIOS',
- mixins: [NativeMethodsMixin],
-
- propTypes: {
- ...ViewPropTypes,
- /**
- * The progress bar style.
- */
- progressViewStyle: PropTypes.oneOf(['default', 'bar']),
-
- /**
- * The progress value (between 0 and 1).
- */
- progress: PropTypes.number,
-
- /**
- * The tint color of the progress bar itself.
- */
- progressTintColor: PropTypes.string,
-
- /**
- * The tint color of the progress bar track.
- */
- trackTintColor: PropTypes.string,
-
- /**
- * A stretchable image to display as the progress bar.
- */
- progressImage: Image.propTypes.source,
-
- /**
- * A stretchable image to display behind the progress bar.
- */
- trackImage: Image.propTypes.source,
- },
-
- render: function() {
- return (
- <RCTProgressView
- {...this.props}
- style={[styles.progressView, this.props.style]}
- />
- );
- },
-});
+const ProgressViewIOS = (
+ props: Props,
+ forwardedRef?: ?React.Ref<typeof RCTProgressView>,
+) => (
+ <RCTProgressView
+ {...props}
+ style={[styles.progressView, props.style]}
+ ref={forwardedRef}
+ />
+);
 
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
  progressView: {
  height: 2,
  },
 });
 
-var RCTProgressView = requireNativeComponent(
- 'RCTProgressView' /* TODO refactor to a class that extends React.Component<Props>,
- ProgressViewIOS*/,
-);
+// $FlowFixMe - TODO T29156721 `React.forwardRef` is not defined in Flow, yet.
+const ProgressViewIOSWithRef = React.forwardRef(ProgressViewIOS);
 
-module.exports = ProgressViewIOS;
+module.exports = (ProgressViewIOSWithRef: NativeProgressViewIOS);

Libraries/Components/SegmentedControlIOS/SegmentedControlIOS.macos.js

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2015-present, Facebook, Inc.
+ * Copyright (c) Facebook, Inc. and its affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -8,27 +8,70 @@
  * @flow
  */
 
-// TODO(macOS ISS#2323203)
+// TODO(macOS ISS#2323203)
 
 'use strict';
 
-var NativeMethodsMixin = require('NativeMethodsMixin');
-var React = require('React');
-var PropTypes = require('prop-types');
-var StyleSheet = require('StyleSheet');
-var ViewPropTypes = require('ViewPropTypes');
-
-var createReactClass = require('create-react-class');
-var requireNativeComponent = require('requireNativeComponent');
-
-type DefaultProps = {
- values: Array<string>,
- enabled: boolean,
-};
-
-var SEGMENTED_CONTROL_REFERENCE = 'segmentedcontrol';
-
-type Event = Object;
+const React = require('React');
+const StyleSheet = require('StyleSheet');
+
+const requireNativeComponent = require('requireNativeComponent');
+
+import type {SyntheticEvent} from 'CoreEventTypes';
+import type {ViewProps} from 'ViewPropTypes';
+import type {NativeComponent} from 'ReactNative';
+
+type Event = SyntheticEvent<
+ $ReadOnly<{|
+ value: number,
+ selectedSegmentIndex: number,
+ |}>,
+>;
+
+type SegmentedControlIOSProps = $ReadOnly<{|
+ ...ViewProps,
+ /**
+ * The labels for the control's segment buttons, in order.
+ */
+ values?: $ReadOnlyArray<string>,
+ /**
+ * The index in `props.values` of the segment to be (pre)selected.
+ */
+ selectedIndex?: ?number,
+ /**
+ * Callback that is called when the user taps a segment;
+ * passes the segment's value as an argument
+ */
+ onValueChange?: ?(value: number) => mixed,
+ /**
+ * Callback that is called when the user taps a segment;
+ * passes the event as an argument
+ */
+ onChange?: ?(event: Event) => mixed,
+ /**
+ * If false the user won't be able to interact with the control.
+ * Default value is true.
+ */
+ enabled?: boolean,
+ /**
+ * Accent color of the control.
+ */
+ tintColor?: ?string,
+ /**
+ * If true, then selecting a segment won't persist visually.
+ * The `onValueChange` callback will still work as expected.
+ */
+ momentary?: ?boolean,
+|}>;
+
+type Props = $ReadOnly<{|
+ ...SegmentedControlIOSProps,
+ forwardedRef: ?React.Ref<typeof RCTSegmentedControl>,
+|}>;
+
+type NativeSegmentedControlIOS = Class<
+ NativeComponent<SegmentedControlIOSProps>,
+>;
 
 /**
  * Use `SegmentedControlIOS` to render a UISegmentedControl iOS.
@@ -50,86 +93,50 @@ type Event = Object;
  * />
  * ````
  */
-var SegmentedControlIOS = createReactClass({
- displayName: 'SegmentedControlIOS',
- mixins: [NativeMethodsMixin],
-
- propTypes: {
- ...ViewPropTypes,
- /**
- * The labels for the control's segment buttons, in order.
- */
- values: PropTypes.arrayOf(PropTypes.string),
-
- /**
- * The index in `props.values` of the segment to be (pre)selected.
- */
- selectedIndex: PropTypes.number,
-
- /**
- * Callback that is called when the user taps a segment;
- * passes the segment's value as an argument
- */
- onValueChange: PropTypes.func,
-
- /**
- * Callback that is called when the user taps a segment;
- * passes the event as an argument
- */
- onChange: PropTypes.func,
-
- /**
- * If false the user won't be able to interact with the control.
- * Default value is true.
- */
- enabled: PropTypes.bool,
-
- /**
- * Accent color of the control.
- */
- tintColor: PropTypes.string,
-
- /**
- * If true, then selecting a segment won't persist visually.
- * The `onValueChange` callback will still work as expected.
- */
- momentary: PropTypes.bool,
- },
 
- getDefaultProps: function(): DefaultProps {
- return {
- values: [],
- enabled: true,
- };
- },
+const RCTSegmentedControl = ((requireNativeComponent(
+ 'RCTSegmentedControl',
+): any): NativeSegmentedControlIOS);
 
- _onChange: function(event: Event) {
+class SegmentedControlIOS extends React.Component<Props> {
+ static defaultProps = {
+ values: [],
+ enabled: true,
+ };
+
+ _onChange = (event: Event) => {
  this.props.onChange && this.props.onChange(event);
  this.props.onValueChange &&
  this.props.onValueChange(event.nativeEvent.value);
- },
+ };
 
- render: function() {
+ render() {
+ const {forwardedRef, ...props} = this.props;
  return (
  <RCTSegmentedControl
- {...this.props}
- ref={SEGMENTED_CONTROL_REFERENCE}
+ {...props}
+ ref={forwardedRef}
  style={[styles.segmentedControl, this.props.style]}
  onChange={this._onChange}
  />
  );
- },
-});
+ }
+}
 
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
  segmentedControl: {
  height: 28,
  },
 });
 
-var RCTSegmentedControl = requireNativeComponent(
- 'RCTSegmentedControl' /* TODO refactor to a class that extends React.Component<Props>,
- SegmentedControlIOS*/,
+// $FlowFixMe - TODO T29156721 `React.forwardRef` is not defined in Flow, yet.
+const SegmentedControlIOSWithRef = React.forwardRef(
+ (
+ props: SegmentedControlIOSProps,
+ forwardedRef: ?React.Ref<typeof RCTSegmentedControl>,
+ ) => {
+ return <SegmentedControlIOS {...props} forwardedRef={forwardedRef} />;
+ },
 );
 
-module.exports = SegmentedControlIOS;
+module.exports = (SegmentedControlIOSWithRef: NativeSegmentedControlIOS);

.flowconfig.android

@@ -22,6 +22,15 @@
 ; Ignore polyfills
 .*/Libraries/polyfills/.*
 
+; Ignore files that have a base platform file and an android file
+<PROJECT_ROOT>/Libraries/Image/Image.js
+<PROJECT_ROOT>/Libraries/Network/RCTNetworking.js
+<PROJECT_ROOT>/Libraries/Utilities/HMRLoadingView.js
+<PROJECT_ROOT>/Libraries/Components/Touchable/TouchableNativeFeedback.js
+
+; Ignore rn-cli.config.js
+<PROJECT_ROOT>/rn-cli.config.js
+
 ; These should not be required directly
 ; require from fbjs/lib instead: require('fbjs/lib/invariant')
 .*/node_modules/invariant/.*

Libraries/Components/Picker/PickerIOS.macos.js

@@ -25,6 +25,19 @@ var processColor = require('processColor');
 var createReactClass = require('create-react-class');
 var requireNativeComponent = require('requireNativeComponent');
 
+import type {ColorValue} from 'StyleSheetTypes';
+import type {ViewProps} from 'ViewPropTypes';
+import type {TextStyleProp} from 'StyleSheet';
+
+type PickerIOSChangeEvent = SyntheticEvent<
+ $ReadOnly<{|
+ newValue: any,
+ newIndex: number,
+ |}>,
+>;
+
+type Label = Stringish | number;
+
 type PickerIOSProps = $ReadOnly<{|
  ...ViewProps,
  children: React.ChildrenArray<React.Element<typeof PickerIOSItem>>,
@@ -34,6 +47,16 @@ type PickerIOSProps = $ReadOnly<{|
  selectedValue: any,
 |}>;
 
+type ItemProps = $ReadOnly<{|
+ label: ?Label,
+ value?: ?any,
+ color?: ?ColorValue,
+|}>;
+
+const PickerIOSItem = (props: ItemProps) => {
+ return null;
+};
+
 var PickerIOS = createReactClass({
  displayName: 'PickerIOS',
  mixins: [NativeMethodsMixin],

Libraries/Components/ProgressViewIOS/ProgressViewIOS.macos.js

@@ -22,65 +22,73 @@ var ViewPropTypes = require('ViewPropTypes');
 var createReactClass = require('create-react-class');
 var requireNativeComponent = require('requireNativeComponent');
 
+
+import type {NativeComponent} from 'ReactNative';
+import type {ImageSource} from 'ImageSource';
+import type {ColorValue} from 'StyleSheetTypes';
+import type {ViewProps} from 'ViewPropTypes';
+
+type Props = $ReadOnly<{|
+ ...ViewProps,
+
+ /**
+ * The progress bar style.
+ */
+ progressViewStyle?: ?('default' | 'bar'),
+
+ /**
+ * The progress value (between 0 and 1).
+ */
+ progress?: ?number,
+
+ /**
+ * The tint color of the progress bar itself.
+ */
+ progressTintColor?: ?ColorValue,
+
+ /**
+ * The tint color of the progress bar track.
+ */
+ trackTintColor?: ?ColorValue,
+
+ /**
+ * A stretchable image to display as the progress bar.
+ */
+ progressImage?: ?ImageSource,
+
+ /**
+ * A stretchable image to display behind the progress bar.
+ */
+ trackImage?: ?ImageSource,
+|}>;
+
+type NativeProgressViewIOS = Class<NativeComponent<Props>>;
+
+const RCTProgressView = ((requireNativeComponent(
+ 'RCTProgressView',
+): any): NativeProgressViewIOS);
+
 /**
  * Use `ProgressViewIOS` to render a UIProgressView on iOS.
  */
-var ProgressViewIOS = createReactClass({
- displayName: 'ProgressViewIOS',
- mixins: [NativeMethodsMixin],
-
- propTypes: {
- ...ViewPropTypes,
- /**
- * The progress bar style.
- */
- progressViewStyle: PropTypes.oneOf(['default', 'bar']),
-
- /**
- * The progress value (between 0 and 1).
- */
- progress: PropTypes.number,
-
- /**
- * The tint color of the progress bar itself.
- */
- progressTintColor: PropTypes.string,
-
- /**
- * The tint color of the progress bar track.
- */
- trackTintColor: PropTypes.string,
-
- /**
- * A stretchable image to display as the progress bar.
- */
- progressImage: Image.propTypes.source,
-
- /**
- * A stretchable image to display behind the progress bar.
- */
- trackImage: Image.propTypes.source,
- },
-
- render: function() {
- return (
- <RCTProgressView
- {...this.props}
- style={[styles.progressView, this.props.style]}
- />
- );
- },
-});
+const ProgressViewIOS = (
+ props: Props,
+ forwardedRef?: ?React.Ref<typeof RCTProgressView>,
+) => (
+ <RCTProgressView
+ {...props}
+ style={[styles.progressView, props.style]}
+ ref={forwardedRef}
+ />
+);
 
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
  progressView: {
  height: 2,
  },
 });
 
-var RCTProgressView = requireNativeComponent(
- 'RCTProgressView' /* TODO refactor to a class that extends React.Component<Props>,
- ProgressViewIOS*/,
-);
+// $FlowFixMe - TODO T29156721 `React.forwardRef` is not defined in Flow, yet.
+const ProgressViewIOSWithRef = React.forwardRef(ProgressViewIOS);
 
-module.exports = ProgressViewIOS;
+module.exports = (ProgressViewIOSWithRef: NativeProgressViewIOS);

Libraries/Components/SegmentedControlIOS/SegmentedControlIOS.macos.js

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2015-present, Facebook, Inc.
+ * Copyright (c) Facebook, Inc. and its affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -8,27 +8,70 @@
  * @flow
  */
 
-// TODO(macOS ISS#2323203)
+// TODO(macOS ISS#2323203)
 
 'use strict';
 
-var NativeMethodsMixin = require('NativeMethodsMixin');
-var React = require('React');
-var PropTypes = require('prop-types');
-var StyleSheet = require('StyleSheet');
-var ViewPropTypes = require('ViewPropTypes');
-
-var createReactClass = require('create-react-class');
-var requireNativeComponent = require('requireNativeComponent');
-
-type DefaultProps = {
- values: Array<string>,
- enabled: boolean,
-};
-
-var SEGMENTED_CONTROL_REFERENCE = 'segmentedcontrol';
-
-type Event = Object;
+const React = require('React');
+const StyleSheet = require('StyleSheet');
+
+const requireNativeComponent = require('requireNativeComponent');
+
+import type {SyntheticEvent} from 'CoreEventTypes';
+import type {ViewProps} from 'ViewPropTypes';
+import type {NativeComponent} from 'ReactNative';
+
+type Event = SyntheticEvent<
+ $ReadOnly<{|
+ value: number,
+ selectedSegmentIndex: number,
+ |}>,
+>;
+
+type SegmentedControlIOSProps = $ReadOnly<{|
+ ...ViewProps,
+ /**
+ * The labels for the control's segment buttons, in order.
+ */
+ values?: $ReadOnlyArray<string>,
+ /**
+ * The index in `props.values` of the segment to be (pre)selected.
+ */
+ selectedIndex?: ?number,
+ /**
+ * Callback that is called when the user taps a segment;
+ * passes the segment's value as an argument
+ */
+ onValueChange?: ?(value: number) => mixed,
+ /**
+ * Callback that is called when the user taps a segment;
+ * passes the event as an argument
+ */
+ onChange?: ?(event: Event) => mixed,
+ /**
+ * If false the user won't be able to interact with the control.
+ * Default value is true.
+ */
+ enabled?: boolean,
+ /**
+ * Accent color of the control.
+ */
+ tintColor?: ?string,
+ /**
+ * If true, then selecting a segment won't persist visually.
+ * The `onValueChange` callback will still work as expected.
+ */
+ momentary?: ?boolean,
+|}>;
+
+type Props = $ReadOnly<{|
+ ...SegmentedControlIOSProps,
+ forwardedRef: ?React.Ref<typeof RCTSegmentedControl>,
+|}>;
+
+type NativeSegmentedControlIOS = Class<
+ NativeComponent<SegmentedControlIOSProps>,
+>;
 
 /**
  * Use `SegmentedControlIOS` to render a UISegmentedControl iOS.
@@ -50,86 +93,50 @@ type Event = Object;
  * />
  * ````
  */
-var SegmentedControlIOS = createReactClass({
- displayName: 'SegmentedControlIOS',
- mixins: [NativeMethodsMixin],
-
- propTypes: {
- ...ViewPropTypes,
- /**
- * The labels for the control's segment buttons, in order.
- */
- values: PropTypes.arrayOf(PropTypes.string),
-
- /**
- * The index in `props.values` of the segment to be (pre)selected.
- */
- selectedIndex: PropTypes.number,
-
- /**
- * Callback that is called when the user taps a segment;
- * passes the segment's value as an argument
- */
- onValueChange: PropTypes.func,
-
- /**
- * Callback that is called when the user taps a segment;
- * passes the event as an argument
- */
- onChange: PropTypes.func,
-
- /**
- * If false the user won't be able to interact with the control.
- * Default value is true.
- */
- enabled: PropTypes.bool,
-
- /**
- * Accent color of the control.
- */
- tintColor: PropTypes.string,
-
- /**
- * If true, then selecting a segment won't persist visually.
- * The `onValueChange` callback will still work as expected.
- */
- momentary: PropTypes.bool,
- },
 
- getDefaultProps: function(): DefaultProps {
- return {
- values: [],
- enabled: true,
- };
- },
+const RCTSegmentedControl = ((requireNativeComponent(
+ 'RCTSegmentedControl',
+): any): NativeSegmentedControlIOS);
 
- _onChange: function(event: Event) {
+class SegmentedControlIOS extends React.Component<Props> {
+ static defaultProps = {
+ values: [],
+ enabled: true,
+ };
+
+ _onChange = (event: Event) => {
  this.props.onChange && this.props.onChange(event);
  this.props.onValueChange &&
  this.props.onValueChange(event.nativeEvent.value);
- },
+ };
 
- render: function() {
+ render() {
+ const {forwardedRef, ...props} = this.props;
  return (
  <RCTSegmentedControl
- {...this.props}
- ref={SEGMENTED_CONTROL_REFERENCE}
+ {...props}
+ ref={forwardedRef}
  style={[styles.segmentedControl, this.props.style]}
  onChange={this._onChange}
  />
  );
- },
-});
+ }
+}
 
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
  segmentedControl: {
  height: 28,
  },
 });
 
-var RCTSegmentedControl = requireNativeComponent(
- 'RCTSegmentedControl' /* TODO refactor to a class that extends React.Component<Props>,
- SegmentedControlIOS*/,
+// $FlowFixMe - TODO T29156721 `React.forwardRef` is not defined in Flow, yet.
+const SegmentedControlIOSWithRef = React.forwardRef(
+ (
+ props: SegmentedControlIOSProps,
+ forwardedRef: ?React.Ref<typeof RCTSegmentedControl>,
+ ) => {
+ return <SegmentedControlIOS {...props} forwardedRef={forwardedRef} />;
+ },
 );
 
-module.exports = SegmentedControlIOS;
+module.exports = (SegmentedControlIOSWithRef: NativeSegmentedControlIOS);

.flowconfig.android

@@ -22,6 +22,15 @@
 ; Ignore polyfills
 .*/Libraries/polyfills/.*
 
+; Ignore files that have a base platform file and an android file
+<PROJECT_ROOT>/Libraries/Image/Image.js
+<PROJECT_ROOT>/Libraries/Network/RCTNetworking.js
+<PROJECT_ROOT>/Libraries/Utilities/HMRLoadingView.js
+<PROJECT_ROOT>/Libraries/Components/Touchable/TouchableNativeFeedback.js
+
+; Ignore rn-cli.config.js
+<PROJECT_ROOT>/rn-cli.config.js
+
 ; These should not be required directly
 ; require from fbjs/lib instead: require('fbjs/lib/invariant')
 .*/node_modules/invariant/.*

Libraries/Components/Picker/PickerIOS.macos.js

@@ -25,6 +25,19 @@ var processColor = require('processColor');
 var createReactClass = require('create-react-class');
 var requireNativeComponent = require('requireNativeComponent');
 
+import type {ColorValue} from 'StyleSheetTypes';
+import type {ViewProps} from 'ViewPropTypes';
+import type {TextStyleProp} from 'StyleSheet';
+
+type PickerIOSChangeEvent = SyntheticEvent<
+ $ReadOnly<{|
+ newValue: any,
+ newIndex: number,
+ |}>,
+>;
+
+type Label = Stringish | number;
+
 type PickerIOSProps = $ReadOnly<{|
  ...ViewProps,
  children: React.ChildrenArray<React.Element<typeof PickerIOSItem>>,
@@ -34,6 +47,16 @@ type PickerIOSProps = $ReadOnly<{|
  selectedValue: any,
 |}>;
 
+type ItemProps = $ReadOnly<{|
+ label: ?Label,
+ value?: ?any,
+ color?: ?ColorValue,
+|}>;
+
+const PickerIOSItem = (props: ItemProps) => {
+ return null;
+};
+
 var PickerIOS = createReactClass({
  displayName: 'PickerIOS',
  mixins: [NativeMethodsMixin],

Libraries/Components/ProgressViewIOS/ProgressViewIOS.macos.js

@@ -22,65 +22,73 @@ var ViewPropTypes = require('ViewPropTypes');
 var createReactClass = require('create-react-class');
 var requireNativeComponent = require('requireNativeComponent');
 
+
+import type {NativeComponent} from 'ReactNative';
+import type {ImageSource} from 'ImageSource';
+import type {ColorValue} from 'StyleSheetTypes';
+import type {ViewProps} from 'ViewPropTypes';
+
+type Props = $ReadOnly<{|
+ ...ViewProps,
+
+ /**
+ * The progress bar style.
+ */
+ progressViewStyle?: ?('default' | 'bar'),
+
+ /**
+ * The progress value (between 0 and 1).
+ */
+ progress?: ?number,
+
+ /**
+ * The tint color of the progress bar itself.
+ */
+ progressTintColor?: ?ColorValue,
+
+ /**
+ * The tint color of the progress bar track.
+ */
+ trackTintColor?: ?ColorValue,
+
+ /**
+ * A stretchable image to display as the progress bar.
+ */
+ progressImage?: ?ImageSource,
+
+ /**
+ * A stretchable image to display behind the progress bar.
+ */
+ trackImage?: ?ImageSource,
+|}>;
+
+type NativeProgressViewIOS = Class<NativeComponent<Props>>;
+
+const RCTProgressView = ((requireNativeComponent(
+ 'RCTProgressView',
+): any): NativeProgressViewIOS);
+
 /**
  * Use `ProgressViewIOS` to render a UIProgressView on iOS.
  */
-var ProgressViewIOS = createReactClass({
- displayName: 'ProgressViewIOS',
- mixins: [NativeMethodsMixin],
-
- propTypes: {
- ...ViewPropTypes,
- /**
- * The progress bar style.
- */
- progressViewStyle: PropTypes.oneOf(['default', 'bar']),
-
- /**
- * The progress value (between 0 and 1).
- */
- progress: PropTypes.number,
-
- /**
- * The tint color of the progress bar itself.
- */
- progressTintColor: PropTypes.string,
-
- /**
- * The tint color of the progress bar track.
- */
- trackTintColor: PropTypes.string,
-
- /**
- * A stretchable image to display as the progress bar.
- */
- progressImage: Image.propTypes.source,
-
- /**
- * A stretchable image to display behind the progress bar.
- */
- trackImage: Image.propTypes.source,
- },
-
- render: function() {
- return (
- <RCTProgressView
- {...this.props}
- style={[styles.progressView, this.props.style]}
- />
- );
- },
-});
+const ProgressViewIOS = (
+ props: Props,
+ forwardedRef?: ?React.Ref<typeof RCTProgressView>,
+) => (
+ <RCTProgressView
+ {...props}
+ style={[styles.progressView, props.style]}
+ ref={forwardedRef}
+ />
+);
 
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
  progressView: {
  height: 2,
  },
 });
 
-var RCTProgressView = requireNativeComponent(
- 'RCTProgressView' /* TODO refactor to a class that extends React.Component<Props>,
- ProgressViewIOS*/,
-);
+// $FlowFixMe - TODO T29156721 `React.forwardRef` is not defined in Flow, yet.
+const ProgressViewIOSWithRef = React.forwardRef(ProgressViewIOS);
 
-module.exports = ProgressViewIOS;
+module.exports = (ProgressViewIOSWithRef: NativeProgressViewIOS);

Libraries/Components/SegmentedControlIOS/SegmentedControlIOS.macos.js

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2015-present, Facebook, Inc.
+ * Copyright (c) Facebook, Inc. and its affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -8,27 +8,70 @@
  * @flow
  */
 
-// TODO(macOS ISS#2323203)
+// TODO(macOS ISS#2323203)
 
 'use strict';
 
-var NativeMethodsMixin = require('NativeMethodsMixin');
-var React = require('React');
-var PropTypes = require('prop-types');
-var StyleSheet = require('StyleSheet');
-var ViewPropTypes = require('ViewPropTypes');
-
-var createReactClass = require('create-react-class');
-var requireNativeComponent = require('requireNativeComponent');
-
-type DefaultProps = {
- values: Array<string>,
- enabled: boolean,
-};
-
-var SEGMENTED_CONTROL_REFERENCE = 'segmentedcontrol';
-
-type Event = Object;
+const React = require('React');
+const StyleSheet = require('StyleSheet');
+
+const requireNativeComponent = require('requireNativeComponent');
+
+import type {SyntheticEvent} from 'CoreEventTypes';
+import type {ViewProps} from 'ViewPropTypes';
+import type {NativeComponent} from 'ReactNative';
+
+type Event = SyntheticEvent<
+ $ReadOnly<{|
+ value: number,
+ selectedSegmentIndex: number,
+ |}>,
+>;
+
+type SegmentedControlIOSProps = $ReadOnly<{|
+ ...ViewProps,
+ /**
+ * The labels for the control's segment buttons, in order.
+ */
+ values?: $ReadOnlyArray<string>,
+ /**
+ * The index in `props.values` of the segment to be (pre)selected.
+ */
+ selectedIndex?: ?number,
+ /**
+ * Callback that is called when the user taps a segment;
+ * passes the segment's value as an argument
+ */
+ onValueChange?: ?(value: number) => mixed,
+ /**
+ * Callback that is called when the user taps a segment;
+ * passes the event as an argument
+ */
+ onChange?: ?(event: Event) => mixed,
+ /**
+ * If false the user won't be able to interact with the control.
+ * Default value is true.
+ */
+ enabled?: boolean,
+ /**
+ * Accent color of the control.
+ */
+ tintColor?: ?string,
+ /**
+ * If true, then selecting a segment won't persist visually.
+ * The `onValueChange` callback will still work as expected.
+ */
+ momentary?: ?boolean,
+|}>;
+
+type Props = $ReadOnly<{|
+ ...SegmentedControlIOSProps,
+ forwardedRef: ?React.Ref<typeof RCTSegmentedControl>,
+|}>;
+
+type NativeSegmentedControlIOS = Class<
+ NativeComponent<SegmentedControlIOSProps>,
+>;
 
 /**
  * Use `SegmentedControlIOS` to render a UISegmentedControl iOS.
@@ -50,86 +93,50 @@ type Event = Object;
  * />
  * ````
  */
-var SegmentedControlIOS = createReactClass({
- displayName: 'SegmentedControlIOS',
- mixins: [NativeMethodsMixin],
-
- propTypes: {
- ...ViewPropTypes,
- /**
- * The labels for the control's segment buttons, in order.
- */
- values: PropTypes.arrayOf(PropTypes.string),
-
- /**
- * The index in `props.values` of the segment to be (pre)selected.
- */
- selectedIndex: PropTypes.number,
-
- /**
- * Callback that is called when the user taps a segment;
- * passes the segment's value as an argument
- */
- onValueChange: PropTypes.func,
-
- /**
- * Callback that is called when the user taps a segment;
- * passes the event as an argument
- */
- onChange: PropTypes.func,
-
- /**
- * If false the user won't be able to interact with the control.
- * Default value is true.
- */
- enabled: PropTypes.bool,
-
- /**
- * Accent color of the control.
- */
- tintColor: PropTypes.string,
-
- /**
- * If true, then selecting a segment won't persist visually.
- * The `onValueChange` callback will still work as expected.
- */
- momentary: PropTypes.bool,
- },
 
- getDefaultProps: function(): DefaultProps {
- return {
- values: [],
- enabled: true,
- };
- },
+const RCTSegmentedControl = ((requireNativeComponent(
+ 'RCTSegmentedControl',
+): any): NativeSegmentedControlIOS);
 
- _onChange: function(event: Event) {
+class SegmentedControlIOS extends React.Component<Props> {
+ static defaultProps = {
+ values: [],
+ enabled: true,
+ };
+
+ _onChange = (event: Event) => {
  this.props.onChange && this.props.onChange(event);
  this.props.onValueChange &&
  this.props.onValueChange(event.nativeEvent.value);
- },
+ };
 
- render: function() {
+ render() {
+ const {forwardedRef, ...props} = this.props;
  return (
  <RCTSegmentedControl
- {...this.props}
- ref={SEGMENTED_CONTROL_REFERENCE}
+ {...props}
+ ref={forwardedRef}
  style={[styles.segmentedControl, this.props.style]}
  onChange={this._onChange}
  />
  );
- },
-});
+ }
+}
 
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
  segmentedControl: {
  height: 28,
  },
 });
 
-var RCTSegmentedControl = requireNativeComponent(
- 'RCTSegmentedControl' /* TODO refactor to a class that extends React.Component<Props>,
- SegmentedControlIOS*/,
+// $FlowFixMe - TODO T29156721 `React.forwardRef` is not defined in Flow, yet.
+const SegmentedControlIOSWithRef = React.forwardRef(
+ (
+ props: SegmentedControlIOSProps,
+ forwardedRef: ?React.Ref<typeof RCTSegmentedControl>,
+ ) => {
+ return <SegmentedControlIOS {...props} forwardedRef={forwardedRef} />;
+ },
 );
 
-module.exports = SegmentedControlIOS;
+module.exports = (SegmentedControlIOSWithRef: NativeSegmentedControlIOS);

.flowconfig.android

@@ -22,6 +22,15 @@
 ; Ignore polyfills
 .*/Libraries/polyfills/.*
 
+; Ignore files that have a base platform file and an android file
+<PROJECT_ROOT>/Libraries/Image/Image.js
+<PROJECT_ROOT>/Libraries/Network/RCTNetworking.js
+<PROJECT_ROOT>/Libraries/Utilities/HMRLoadingView.js
+<PROJECT_ROOT>/Libraries/Components/Touchable/TouchableNativeFeedback.js
+
+; Ignore rn-cli.config.js
+<PROJECT_ROOT>/rn-cli.config.js
+
 ; These should not be required directly
 ; require from fbjs/lib instead: require('fbjs/lib/invariant')
 .*/node_modules/invariant/.*

Libraries/Components/Picker/PickerIOS.macos.js

@@ -25,6 +25,19 @@ var processColor = require('processColor');
 var createReactClass = require('create-react-class');
 var requireNativeComponent = require('requireNativeComponent');
 
+import type {ColorValue} from 'StyleSheetTypes';
+import type {ViewProps} from 'ViewPropTypes';
+import type {TextStyleProp} from 'StyleSheet';
+
+type PickerIOSChangeEvent = SyntheticEvent<
+ $ReadOnly<{|
+ newValue: any,
+ newIndex: number,
+ |}>,
+>;
+
+type Label = Stringish | number;
+
 type PickerIOSProps = $ReadOnly<{|
  ...ViewProps,
  children: React.ChildrenArray<React.Element<typeof PickerIOSItem>>,
@@ -34,6 +47,16 @@ type PickerIOSProps = $ReadOnly<{|
  selectedValue: any,
 |}>;
 
+type ItemProps = $ReadOnly<{|
+ label: ?Label,
+ value?: ?any,
+ color?: ?ColorValue,
+|}>;
+
+const PickerIOSItem = (props: ItemProps) => {
+ return null;
+};
+
 var PickerIOS = createReactClass({
  displayName: 'PickerIOS',
  mixins: [NativeMethodsMixin],

Libraries/Components/ProgressViewIOS/ProgressViewIOS.macos.js

@@ -22,65 +22,73 @@ var ViewPropTypes = require('ViewPropTypes');
 var createReactClass = require('create-react-class');
 var requireNativeComponent = require('requireNativeComponent');
 
+
+import type {NativeComponent} from 'ReactNative';
+import type {ImageSource} from 'ImageSource';
+import type {ColorValue} from 'StyleSheetTypes';
+import type {ViewProps} from 'ViewPropTypes';
+
+type Props = $ReadOnly<{|
+ ...ViewProps,
+
+ /**
+ * The progress bar style.
+ */
+ progressViewStyle?: ?('default' | 'bar'),
+
+ /**
+ * The progress value (between 0 and 1).
+ */
+ progress?: ?number,
+
+ /**
+ * The tint color of the progress bar itself.
+ */
+ progressTintColor?: ?ColorValue,
+
+ /**
+ * The tint color of the progress bar track.
+ */
+ trackTintColor?: ?ColorValue,
+
+ /**
+ * A stretchable image to display as the progress bar.
+ */
+ progressImage?: ?ImageSource,
+
+ /**
+ * A stretchable image to display behind the progress bar.
+ */
+ trackImage?: ?ImageSource,
+|}>;
+
+type NativeProgressViewIOS = Class<NativeComponent<Props>>;
+
+const RCTProgressView = ((requireNativeComponent(
+ 'RCTProgressView',
+): any): NativeProgressViewIOS);
+
 /**
  * Use `ProgressViewIOS` to render a UIProgressView on iOS.
  */
-var ProgressViewIOS = createReactClass({
- displayName: 'ProgressViewIOS',
- mixins: [NativeMethodsMixin],
-
- propTypes: {
- ...ViewPropTypes,
- /**
- * The progress bar style.
- */
- progressViewStyle: PropTypes.oneOf(['default', 'bar']),
-
- /**
- * The progress value (between 0 and 1).
- */
- progress: PropTypes.number,
-
- /**
- * The tint color of the progress bar itself.
- */
- progressTintColor: PropTypes.string,
-
- /**
- * The tint color of the progress bar track.
- */
- trackTintColor: PropTypes.string,
-
- /**
- * A stretchable image to display as the progress bar.
- */
- progressImage: Image.propTypes.source,
-
- /**
- * A stretchable image to display behind the progress bar.
- */
- trackImage: Image.propTypes.source,
- },
-
- render: function() {
- return (
- <RCTProgressView
- {...this.props}
- style={[styles.progressView, this.props.style]}
- />
- );
- },
-});
+const ProgressViewIOS = (
+ props: Props,
+ forwardedRef?: ?React.Ref<typeof RCTProgressView>,
+) => (
+ <RCTProgressView
+ {...props}
+ style={[styles.progressView, props.style]}
+ ref={forwardedRef}
+ />
+);
 
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
  progressView: {
  height: 2,
  },
 });
 
-var RCTProgressView = requireNativeComponent(
- 'RCTProgressView' /* TODO refactor to a class that extends React.Component<Props>,
- ProgressViewIOS*/,
-);
+// $FlowFixMe - TODO T29156721 `React.forwardRef` is not defined in Flow, yet.
+const ProgressViewIOSWithRef = React.forwardRef(ProgressViewIOS);
 
-module.exports = ProgressViewIOS;
+module.exports = (ProgressViewIOSWithRef: NativeProgressViewIOS);

Libraries/Components/SegmentedControlIOS/SegmentedControlIOS.macos.js

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2015-present, Facebook, Inc.
+ * Copyright (c) Facebook, Inc. and its affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -8,27 +8,70 @@
  * @flow
  */
 
-// TODO(macOS ISS#2323203)
+// TODO(macOS ISS#2323203)
 
 'use strict';
 
-var NativeMethodsMixin = require('NativeMethodsMixin');
-var React = require('React');
-var PropTypes = require('prop-types');
-var StyleSheet = require('StyleSheet');
-var ViewPropTypes = require('ViewPropTypes');
-
-var createReactClass = require('create-react-class');
-var requireNativeComponent = require('requireNativeComponent');
-
-type DefaultProps = {
- values: Array<string>,
- enabled: boolean,
-};
-
-var SEGMENTED_CONTROL_REFERENCE = 'segmentedcontrol';
-
-type Event = Object;
+const React = require('React');
+const StyleSheet = require('StyleSheet');
+
+const requireNativeComponent = require('requireNativeComponent');
+
+import type {SyntheticEvent} from 'CoreEventTypes';
+import type {ViewProps} from 'ViewPropTypes';
+import type {NativeComponent} from 'ReactNative';
+
+type Event = SyntheticEvent<
+ $ReadOnly<{|
+ value: number,
+ selectedSegmentIndex: number,
+ |}>,
+>;
+
+type SegmentedControlIOSProps = $ReadOnly<{|
+ ...ViewProps,
+ /**
+ * The labels for the control's segment buttons, in order.
+ */
+ values?: $ReadOnlyArray<string>,
+ /**
+ * The index in `props.values` of the segment to be (pre)selected.
+ */
+ selectedIndex?: ?number,
+ /**
+ * Callback that is called when the user taps a segment;
+ * passes the segment's value as an argument
+ */
+ onValueChange?: ?(value: number) => mixed,
+ /**
+ * Callback that is called when the user taps a segment;
+ * passes the event as an argument
+ */
+ onChange?: ?(event: Event) => mixed,
+ /**
+ * If false the user won't be able to interact with the control.
+ * Default value is true.
+ */
+ enabled?: boolean,
+ /**
+ * Accent color of the control.
+ */
+ tintColor?: ?string,
+ /**
+ * If true, then selecting a segment won't persist visually.
+ * The `onValueChange` callback will still work as expected.
+ */
+ momentary?: ?boolean,
+|}>;
+
+type Props = $ReadOnly<{|
+ ...SegmentedControlIOSProps,
+ forwardedRef: ?React.Ref<typeof RCTSegmentedControl>,
+|}>;
+
+type NativeSegmentedControlIOS = Class<
+ NativeComponent<SegmentedControlIOSProps>,
+>;
 
 /**
  * Use `SegmentedControlIOS` to render a UISegmentedControl iOS.
@@ -50,86 +93,50 @@ type Event = Object;
  * />
  * ````
  */
-var SegmentedControlIOS = createReactClass({
- displayName: 'SegmentedControlIOS',
- mixins: [NativeMethodsMixin],
-
- propTypes: {
- ...ViewPropTypes,
- /**
- * The labels for the control's segment buttons, in order.
- */
- values: PropTypes.arrayOf(PropTypes.string),
-
- /**
- * The index in `props.values` of the segment to be (pre)selected.
- */
- selectedIndex: PropTypes.number,
-
- /**
- * Callback that is called when the user taps a segment;
- * passes the segment's value as an argument
- */
- onValueChange: PropTypes.func,
-
- /**
- * Callback that is called when the user taps a segment;
- * passes the event as an argument
- */
- onChange: PropTypes.func,
-
- /**
- * If false the user won't be able to interact with the control.
- * Default value is true.
- */
- enabled: PropTypes.bool,
-
- /**
- * Accent color of the control.
- */
- tintColor: PropTypes.string,
-
- /**
- * If true, then selecting a segment won't persist visually.
- * The `onValueChange` callback will still work as expected.
- */
- momentary: PropTypes.bool,
- },
 
- getDefaultProps: function(): DefaultProps {
- return {
- values: [],
- enabled: true,
- };
- },
+const RCTSegmentedControl = ((requireNativeComponent(
+ 'RCTSegmentedControl',
+): any): NativeSegmentedControlIOS);
 
- _onChange: function(event: Event) {
+class SegmentedControlIOS extends React.Component<Props> {
+ static defaultProps = {
+ values: [],
+ enabled: true,
+ };
+
+ _onChange = (event: Event) => {
  this.props.onChange && this.props.onChange(event);
  this.props.onValueChange &&
  this.props.onValueChange(event.nativeEvent.value);
- },
+ };
 
- render: function() {
+ render() {
+ const {forwardedRef, ...props} = this.props;
  return (
  <RCTSegmentedControl
- {...this.props}
- ref={SEGMENTED_CONTROL_REFERENCE}
+ {...props}
+ ref={forwardedRef}
  style={[styles.segmentedControl, this.props.style]}
  onChange={this._onChange}
  />
  );
- },
-});
+ }
+}
 
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
  segmentedControl: {
  height: 28,
  },
 });
 
-var RCTSegmentedControl = requireNativeComponent(
- 'RCTSegmentedControl' /* TODO refactor to a class that extends React.Component<Props>,
- SegmentedControlIOS*/,
+// $FlowFixMe - TODO T29156721 `React.forwardRef` is not defined in Flow, yet.
+const SegmentedControlIOSWithRef = React.forwardRef(
+ (
+ props: SegmentedControlIOSProps,
+ forwardedRef: ?React.Ref<typeof RCTSegmentedControl>,
+ ) => {
+ return <SegmentedControlIOS {...props} forwardedRef={forwardedRef} />;
+ },
 );
 
-module.exports = SegmentedControlIOS;
+module.exports = (SegmentedControlIOSWithRef: NativeSegmentedControlIOS);