diff --git a/Libraries/Components/SegmentedControlIOS/RCTSegmentedControlNativeComponent.js b/Libraries/Components/SegmentedControlIOS/RCTSegmentedControlNativeComponent.js new file mode 100644 index 000000000..37b944d18 --- /dev/null +++ b/Libraries/Components/SegmentedControlIOS/RCTSegmentedControlNativeComponent.js @@ -0,0 +1,67 @@ +/** + * 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. + * + * @flow + * @format + */ +'use strict'; + +const requireNativeComponent = require('requireNativeComponent'); + +import type {ViewProps} from 'ViewPropTypes'; +import type {SyntheticEvent} from 'CoreEventTypes'; +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, + /** + * 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 NativeSegmentedControlIOS = Class< + NativeComponent, +>; + +module.exports = ((requireNativeComponent( + 'RCTSegmentedControl', +): any): NativeSegmentedControlIOS); diff --git a/Libraries/Components/SegmentedControlIOS/SegmentedControlIOS.ios.js b/Libraries/Components/SegmentedControlIOS/SegmentedControlIOS.ios.js index aa447cf76..8dc88c1c7 100644 --- a/Libraries/Components/SegmentedControlIOS/SegmentedControlIOS.ios.js +++ b/Libraries/Components/SegmentedControlIOS/SegmentedControlIOS.ios.js @@ -13,11 +13,10 @@ const React = require('React'); const StyleSheet = require('StyleSheet'); -const requireNativeComponent = require('requireNativeComponent'); +const RCTSegmentedControlNativeComponent = require('RCTSegmentedControlNativeComponent'); import type {SyntheticEvent} from 'CoreEventTypes'; import type {ViewProps} from 'ViewPropTypes'; -import type {NativeComponent} from 'ReactNative'; type Event = SyntheticEvent< $ReadOnly<{| @@ -64,13 +63,9 @@ type SegmentedControlIOSProps = $ReadOnly<{| type Props = $ReadOnly<{| ...SegmentedControlIOSProps, - forwardedRef: ?React.Ref, + forwardedRef: ?React.Ref, |}>; -type NativeSegmentedControlIOS = Class< - NativeComponent, ->; - /** * Use `SegmentedControlIOS` to render a UISegmentedControl iOS. * @@ -92,10 +87,6 @@ type NativeSegmentedControlIOS = Class< * ```` */ -const RCTSegmentedControl = ((requireNativeComponent( - 'RCTSegmentedControl', -): any): NativeSegmentedControlIOS); - class SegmentedControlIOS extends React.Component { static defaultProps = { values: [], @@ -111,7 +102,7 @@ class SegmentedControlIOS extends React.Component { render() { const {forwardedRef, ...props} = this.props; return ( - , + forwardedRef: ?React.Ref, ) => { return ; },