Big Updates from Fri Mar 6

- [ReactNative] Oss RCTSlider | Tadeu Zagallo - [ReactNative] Oss RCTSwitch | Tadeu Zagallo - [ReactNative] Remove ImageSourcePropType | Christopher Chedeau - [ReactNative] s/Image.sourcePropType/Image.propTypes.source/ | Christopher Chedeau - [ReactNative] s/Text.stylePropType/Text.propTypes.style/ | Christopher Chedeau - [ReactNative] s/View.stylePropType/View.propTypes.style/ | Christopher Chedeau - [ReactNative] Remove nativePropTypes | Christopher Chedeau - [ReactNative] Inline ScrollViewPropTypes | Christopher Chedeau - [ReactNative] Unify ScrollView.android and ScrollView.ios | Christopher Chedeau - [ReactNative] Move around and reformat comments for the documentation | Christopher Chedeau - Improved Geolocation API | Nick Lockwood - [React Native] Move copyProperties and mergeHelpers to github dir | Ben Alpert - Fixed some misspellings that are propagating through our code | Skotch Vail - [ReactNative] OSS DatePicker | Spencer Ahrens - [React Native] Update core modules for React 0.13 | Ben Alpert - [React Native] Update React to v0.13.0-rc2 | Ben Alpert - [react-packager] onchange endpoint that informs of changes | Amjad Masad - [react-packager] dev option needs to default to true for backwards compat | Amjad Masad
2025-11-01 09:14:26 +00:00 · 2015-03-09 16:18:15 -07:00
parent 05ec075c94
commit cb9b1f7b29
50 changed files with 1998 additions and 653 deletions
@@ -0,0 +1,141 @@
+/**
+ * Copyright 2004-present Facebook. All Rights Reserved.
+ *
+ * @providesModule SwitchExample
+ */
+'use strict';
+
+var React = require('react-native');
+var {
+  SwitchIOS,
+  Text,
+  View
+} = React;
+
+var BasicSwitchExample = React.createClass({
+  getInitialState() {
+    return {
+      trueSwitchIsOn: true,
+      falseSwitchIsOn: false,
+    };
+  },
+  render() {
+    return (
+      <View>
+        <SwitchIOS
+          onValueChange={(value) => this.setState({falseSwitchIsOn: value})}
+          style={{marginBottom: 10}}
+          value={this.state.falseSwitchIsOn} />
+        <SwitchIOS
+          onValueChange={(value) => this.setState({trueSwitchIsOn: value})}
+          value={this.state.trueSwitchIsOn} />
+      </View>
+    );
+  }
+});
+
+var DisabledSwitchExample = React.createClass({
+  render() {
+    return (
+      <View>
+        <SwitchIOS
+          disabled={true}
+          style={{marginBottom: 10}}
+          value={true} />
+        <SwitchIOS
+          disabled={true}
+          value={false} />
+      </View>
+    );
+  },
+});
+
+var ColorSwitchExample = React.createClass({
+  getInitialState() {
+    return {
+      colorTrueSwitchIsOn: true,
+      colorFalseSwitchIsOn: false,
+    };
+  },
+  render() {
+    return (
+      <View>
+        <SwitchIOS
+          onValueChange={(value) => this.setState({colorFalseSwitchIsOn: value})}
+          onTintColor="#00ff00"
+          style={{marginBottom: 10}}
+          thumbTintColor="#0000ff"
+          tintColor="#ff0000"
+          value={this.state.colorFalseSwitchIsOn} />
+        <SwitchIOS
+          onValueChange={(value) => this.setState({colorTrueSwitchIsOn: value})}
+          onTintColor="#00ff00"
+          thumbTintColor="#0000ff"
+          tintColor="#ff0000"
+          value={this.state.colorTrueSwitchIsOn} />
+      </View>
+    );
+  },
+});
+
+var EventSwitchExample = React.createClass({
+  getInitialState() {
+    return {
+      eventSwitchIsOn: false,
+      eventSwitchRegressionIsOn: true,
+    };
+  },
+  render() {
+    return (
+      <View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
+        <View>
+          <SwitchIOS
+            onValueChange={(value) => this.setState({eventSwitchIsOn: value})}
+            style={{marginBottom: 10}}
+            value={this.state.eventSwitchIsOn} />
+          <SwitchIOS
+            onValueChange={(value) => this.setState({eventSwitchIsOn: value})}
+            style={{marginBottom: 10}}
+            value={this.state.eventSwitchIsOn} />
+            <Text>{this.state.eventSwitchIsOn ? "On" : "Off"}</Text>
+        </View>
+        <View>
+          <SwitchIOS
+            onValueChange={(value) => this.setState({eventSwitchRegressionIsOn: value})}
+            style={{marginBottom: 10}}
+            value={this.state.eventSwitchRegressionIsOn} />
+          <SwitchIOS
+            onValueChange={(value) => this.setState({eventSwitchRegressionIsOn: value})}
+            style={{marginBottom: 10}}
+            value={this.state.eventSwitchRegressionIsOn} />
+          <Text>{this.state.eventSwitchRegressionIsOn ? "On" : "Off"}</Text>
+        </View>
+      </View>
+    );
+  }
+});
+
+exports.title = '<SwitchIOS>';
+exports.description = 'Native boolean input';
+exports.examples = [
+  {
+    title: 'Switches can be set to true or false',
+    render() { return <BasicSwitchExample />; }
+  },
+  {
+    title: 'Switches can be disabled',
+    render() { return <DisabledSwitchExample />; }
+  },
+  {
+    title: 'Custom colors can be provided',
+    render() { return <ColorSwitchExample />; }
+  },
+  {
+    title: 'Change events can be detected',
+    render() { return <EventSwitchExample />; }
+  },
+  {
+    title: 'Switches are controlled components',
+    render() { return <SwitchIOS />; }
+  }
+];