diff --git a/RNTester/js/examples/SegmentedControlIOS/SegmentedControlExampleComponents.js b/RNTester/js/examples/SegmentedControlIOS/SegmentedControlExampleComponents.js
new file mode 100644
index 00000000000..8b06f064fda
--- /dev/null
+++ b/RNTester/js/examples/SegmentedControlIOS/SegmentedControlExampleComponents.js
@@ -0,0 +1,114 @@
+/**
+ * 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.
+ *
+ * @format
+ * @flow strict-local
+ */
+
+'use strict';
+
+import * as React from 'react';
+import {SegmentedControlIOS, Text, View, StyleSheet} from 'react-native';
+
+export function BasicSegmentedControlExample(): React.Node {
+ return (
+
+
+
+
+
+
+
+
+ );
+}
+
+export function PreSelectedSegmentedControlExample(): React.Node {
+ return (
+
+
+
+
+
+ );
+}
+
+export function MomentarySegmentedControlExample(): React.Node {
+ return (
+
+
+
+
+
+ );
+}
+
+export function DisabledSegmentedControlExample(): React.Node {
+ return (
+
+
+
+
+
+ );
+}
+
+export function ColorSegmentedControlExample(): React.Node {
+ return (
+
+
+
+
+
+
+
+
+ );
+}
+
+export function EventSegmentedControlExample(): React.Node {
+ const [selectedIndex, setSelectedIndex] = React.useState(undefined);
+ const [value, setValue] = React.useState('Not selected');
+ const values = ['One', 'Two', 'Three'];
+
+ return (
+
+ Value: {value}
+ Index: {selectedIndex}
+ {
+ setSelectedIndex(event.nativeEvent.selectedSegmentIndex);
+ }}
+ onValueChange={changedValue => {
+ setValue(changedValue);
+ }}
+ />
+
+ );
+}
+
+const styles = StyleSheet.create({
+ text: {
+ fontSize: 14,
+ textAlign: 'center',
+ fontWeight: '500',
+ margin: 10,
+ },
+});
diff --git a/RNTester/js/examples/SegmentedControlIOS/SegmentedControlIOSExample.js b/RNTester/js/examples/SegmentedControlIOS/SegmentedControlIOSExample.js
index 0c20da7b148..2824475b838 100644
--- a/RNTester/js/examples/SegmentedControlIOS/SegmentedControlIOSExample.js
+++ b/RNTester/js/examples/SegmentedControlIOS/SegmentedControlIOSExample.js
@@ -11,134 +11,14 @@
'use strict';
const React = require('react');
-const {SegmentedControlIOS, Text, View, StyleSheet} = require('react-native');
-
-class BasicSegmentedControlExample extends React.Component<{...}> {
- render() {
- return (
-
-
-
-
-
-
-
-
- );
- }
-}
-
-class PreSelectedSegmentedControlExample extends React.Component<{...}> {
- render() {
- return (
-
-
-
-
-
- );
- }
-}
-
-class MomentarySegmentedControlExample extends React.Component<{...}> {
- render() {
- return (
-
-
-
-
-
- );
- }
-}
-
-class DisabledSegmentedControlExample extends React.Component<{...}> {
- render() {
- return (
-
-
-
-
-
- );
- }
-}
-
-class ColorSegmentedControlExample extends React.Component<{...}> {
- render() {
- return (
-
-
-
-
-
-
-
-
- );
- }
-}
-
-class EventSegmentedControlExample extends React.Component<
- {...},
- $FlowFixMeState,
-> {
- state = {
- values: ['One', 'Two', 'Three'],
- value: 'Not selected',
- selectedIndex: undefined,
- };
-
- render() {
- return (
-
- Value: {this.state.value}
- Index: {this.state.selectedIndex}
-
-
- );
- }
-
- _onChange = event => {
- this.setState({
- selectedIndex: event.nativeEvent.selectedSegmentIndex,
- });
- };
-
- _onValueChange = value => {
- this.setState({
- value: value,
- });
- };
-}
-
-const styles = StyleSheet.create({
- text: {
- fontSize: 14,
- textAlign: 'center',
- fontWeight: '500',
- margin: 10,
- },
-});
+const {
+ BasicSegmentedControlExample,
+ PreSelectedSegmentedControlExample,
+ MomentarySegmentedControlExample,
+ DisabledSegmentedControlExample,
+ ColorSegmentedControlExample,
+ EventSegmentedControlExample,
+} = require('./SegmentedControlExampleComponents');
exports.title = '';
exports.displayName = 'SegmentedControlExample';