Add SegmentedControlIOS

Examples/UIExplorer/SegmentedControlIOSExample.js

@@ -0,0 +1,169 @@
+/**
+ * The examples provided by Facebook are for non-commercial testing and
+ * evaluation purposes only.
+ *
+ * Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ *
+ * @flow
+ */
+'use strict';
+
+var React = require('react-native');
+var {
+  SegmentedControlIOS,
+  Text,
+  View,
+  StyleSheet
+} = React;
+
+var BasicSegmentedControlExample = React.createClass({
+  render() {
+    return (
+      <View>
+        <View style={{marginBottom: 10}}>
+          <SegmentedControlIOS values={["One", "Two"]} />
+        </View>
+        <View>
+          <SegmentedControlIOS values={["One", "Two", "Three", "Four", "Five"]} />
+        </View>
+      </View>
+    );
+  }
+});
+
+var PreSelectedSegmentedControlExample = React.createClass({
+  render() {
+    return (
+      <View>
+        <View>
+          <SegmentedControlIOS values={["One", "Two"]} selectedSegmentIndex={0} />
+        </View>
+      </View>
+    );
+  }
+});
+
+var MomentarySegmentedControlExample = React.createClass({
+  render() {
+    return (
+      <View>
+        <View>
+          <SegmentedControlIOS values={["One", "Two"]} momentary={true} />
+        </View>
+      </View>
+    );
+  }
+});
+
+var DisabledSegmentedControlExample = React.createClass({
+  render() {
+    return (
+      <View>
+        <View>
+          <SegmentedControlIOS disabled={true} values={["One", "Two"]} selectedSegmentIndex={1} />
+        </View>
+      </View>
+    );
+  },
+});
+
+var ColorSegmentedControlExample = React.createClass({
+  render() {
+    return (
+      <View>
+        <View style={{marginBottom: 10}}>
+          <SegmentedControlIOS tintColor="#ff0000" values={["One", "Two", "Three", "Four"]} selectedSegmentIndex={0} />
+        </View>
+        <View>
+          <SegmentedControlIOS tintColor="#00ff00" values={["One", "Two", "Three"]} selectedSegmentIndex={1} />
+        </View>
+      </View>
+    );
+  },
+});
+
+var EventSegmentedControlExample = React.createClass({
+  getInitialState() {
+    return {
+      values: ["One", "Two", "Three"],
+      value: 'Not selected',
+      selectedSegmentIndex: undefined
+    };
+  },
+
+  render() {
+    return (
+      <View>
+        <Text style={styles.text} >
+          Value: {this.state.value}
+        </Text>
+        <Text style={styles.text} >
+          Index: {this.state.selectedSegmentIndex}
+        </Text>
+        <SegmentedControlIOS
+          values={this.state.values}
+          selectedSegmentIndex={this.state.selectedSegmentIndex}
+          onChange={this._onChange}
+          onValueChange={this._onValueChange} />
+      </View>
+    );
+  },
+
+  _onChange(event) {
+    this.setState({
+      selectedSegmentIndex: event.nativeEvent.selectedSegmentIndex,
+    });
+  },
+
+  _onValueChange(value) {
+    this.setState({
+      value: value,
+    });
+  }
+});
+
+var styles = StyleSheet.create({
+  text: {
+    fontSize: 14,
+    textAlign: 'center',
+    fontWeight: '500',
+    margin: 10,
+  },
+});
+
+exports.title = '<SegmentedControlIOS>';
+exports.displayName = 'SegmentedControlExample';
+exports.description = 'Native segmented control';
+exports.examples = [
+  {
+    title: 'Segmented controls can have values',
+    render(): ReactElement { return <BasicSegmentedControlExample />; }
+  },
+  {
+    title: 'Segmented controls can have a pre-selected value',
+    render(): ReactElement { return <PreSelectedSegmentedControlExample />; }
+  },
+  {
+    title: 'Segmented controls can be momentary',
+    render(): ReactElement { return <MomentarySegmentedControlExample />; }
+  },
+  {
+    title: 'Segmented controls can be disabled',
+    render(): ReactElement { return <DisabledSegmentedControlExample />; }
+  },
+  {
+    title: 'Custom colors can be provided',
+    render(): ReactElement { return <ColorSegmentedControlExample />; }
+  },
+  {
+    title: 'Change events can be detected',
+    render(): ReactElement { return <EventSegmentedControlExample />; }
+  }
+];

Examples/UIExplorer/UIExplorerList.js

@@ -43,6 +43,7 @@ var COMPONENTS = [
   NavigatorExample,
   require('./PickerExample'),
   require('./ScrollViewExample'),
+  require('./SegmentedControlIOSExample'),
   require('./SliderIOSExample'),
   require('./SwitchExample'),
   require('./TabBarExample'),

IntegrationTests/IntegrationTestsApp.js

@@ -26,6 +26,7 @@ var TESTS = [
   require('./TimersTest'),
   require('./AsyncStorageTest'),
   require('./SimpleSnapshotTest'),
+  require('./SegmentedControlIOSSnapshotTest'),
 ];
 
 TESTS.forEach(

IntegrationTests/IntegrationTestsTests/IntegrationTestsTests.m

@@ -72,6 +72,11 @@ - (void)testSimpleSnapshot
   [_runner runTest:_cmd module:@"SimpleSnapshotTest"];
 }
 
+- (void)testSegmentedControlIOS
+{
+  [_runner runTest:_cmd module:@"SegmentedControlIOSSnapshotTest"];
+}
+
 - (void)testZZZ_NotInRecordMode
 {
   RCTAssert(_runner.recordMode == NO, @"Don't forget to turn record mode back to NO before commit.");

IntegrationTests/SegmentedControlIOSSnapshotTest.js

@@ -0,0 +1,64 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+'use strict';
+
+var React = require('react-native');
+var {
+  StyleSheet,
+  View,
+  SegmentedControlIOS,
+} = React;
+
+var { TestModule } = React.addons;
+
+var SegmentedControlIOSSnapshotTest = React.createClass({
+  componentDidMount() {
+    if (!TestModule.verifySnapshot) {
+      throw new Error('TestModule.verifySnapshot not defined.');
+    }
+    requestAnimationFrame(() => TestModule.verifySnapshot(this.done));
+  },
+
+  done() {
+    TestModule.markTestCompleted();
+  },
+
+  render() {
+    return (
+      <View>
+        <View style={styles.testRow}>
+          <SegmentedControlIOS values={["One", "Two"]} />
+        </View>
+        <View style={styles.testRow}>
+          <SegmentedControlIOS values={["One", "Two"]} selectedSegmentIndex={0} />
+        </View>
+        <View style={styles.testRow}>
+          <SegmentedControlIOS values={["One", "Two", "Three", "Four", "Five"]} />
+        </View>
+        <View style={styles.testRow}>
+          <SegmentedControlIOS disabled={true} values={["One", "Two"]} selectedSegmentIndex={1} />
+        </View>
+        <View style={styles.testRow}>
+          <SegmentedControlIOS tintColor="#ff0000" values={["One", "Two", "Three", "Four"]} selectedSegmentIndex={0} />
+        </View>
+        <View style={styles.testRow}>
+          <SegmentedControlIOS tintColor="#00ff00" values={["One", "Two", "Three"]} selectedSegmentIndex={1} />
+        </View>
+      </View>
+    );
+  }
+});
+
+var styles = StyleSheet.create({
+  testRow: {
+    marginBottom: 10,
+  }
+});
+
+module.exports = SegmentedControlIOSSnapshotTest;