Merge pull request facebook#1068 from spicyj/update-04-29

Updates from Wed 29 Apr

.flowconfig

@@ -29,3 +29,6 @@ Examples/UIExplorer/ImageMocks.js
 
 [options]
 module.system=haste
+
+[version]
+0.10.0

Examples/UIExplorer/BorderExample.js

@@ -57,6 +57,17 @@ var styles = StyleSheet.create({
     borderLeftWidth: 40,
     borderLeftColor: 'blue',
   },
+  border5: {
+    borderRadius: 50,
+    borderTopWidth: 10,
+    borderTopColor: 'red',
+    borderRightWidth: 20,
+    borderRightColor: 'yellow',
+    borderBottomWidth: 30,
+    borderBottomColor: 'green',
+    borderLeftWidth: 40,
+    borderLeftColor: 'blue',
+  },
 });
 
 exports.title = 'Border';
@@ -71,7 +82,7 @@ exports.examples = [
   },
   {
     title: 'Equal-Width / Same-Color',
-    description: 'borderWidth & borderColor',
+    description: 'borderWidth & borderColor & borderRadius',
     render() {
       return <View style={[styles.box, styles.borderRadius]} />;
     }
@@ -97,4 +108,11 @@ exports.examples = [
       return <View style={[styles.box, styles.border4]} />;
     }
   },
+  {
+    title: 'Custom Borders',
+    description: 'border*Width & border*Color',
+    render() {
+      return <View style={[styles.box, styles.border5]} />;
+    }
+  },
 ];

Examples/UIExplorer/GeolocationExample.js

@@ -50,7 +50,8 @@ var GeolocationExample = React.createClass({
   componentDidMount: function() {
     navigator.geolocation.getCurrentPosition(
       (initialPosition) => this.setState({initialPosition}),
-      (error) => console.error(error)
+      (error) => console.error(error),
+      {enableHighAccuracy: true, timeout: 100, maximumAge: 1000}
     );
     this.watchID = navigator.geolocation.watchPosition((lastPosition) => {
       this.setState({lastPosition});

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']} selectedIndex={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 enabled={false} values={['One', 'Two']} selectedIndex={1} />
+        </View>
+      </View>
+    );
+  },
+});
+
+var ColorSegmentedControlExample = React.createClass({
+  render() {
+    return (
+      <View>
+        <View style={{marginBottom: 10}}>
+          <SegmentedControlIOS tintColor="#ff0000" values={['One', 'Two', 'Three', 'Four']} selectedIndex={0} />
+        </View>
+        <View>
+          <SegmentedControlIOS tintColor="#00ff00" values={['One', 'Two', 'Three']} selectedIndex={1} />
+        </View>
+      </View>
+    );
+  },
+});
+
+var EventSegmentedControlExample = React.createClass({
+  getInitialState() {
+    return {
+      values: ['One', 'Two', 'Three'],
+      value: 'Not selected',
+      selectedIndex: undefined
+    };
+  },
+
+  render() {
+    return (
+      <View>
+        <Text style={styles.text} >
+          Value: {this.state.value}
+        </Text>
+        <Text style={styles.text} >
+          Index: {this.state.selectedIndex}
+        </Text>
+        <SegmentedControlIOS
+          values={this.state.values}
+          selectedIndex={this.state.selectedIndex}
+          onChange={this._onChange}
+          onValueChange={this._onValueChange} />
+      </View>
+    );
+  },
+
+  _onChange(event) {
+    this.setState({
+      selectedIndex: event.nativeEvent.selectedIndex,
+    });
+  },
+
+  _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/TextInputExample.js

@@ -88,16 +88,32 @@ var styles = StyleSheet.create({
     height: 26,
     borderWidth: 0.5,
     borderColor: '#0f0f0f',
-    padding: 4,
     flex: 1,
     fontSize: 13,
+    padding: 4,
   },
   multiline: {
     borderWidth: 0.5,
     borderColor: '#0f0f0f',
     flex: 1,
     fontSize: 13,
     height: 50,
+    padding: 4,
+    marginBottom: 4,
+  },
+  multilineWithFontStyles: {
+    color: 'blue',
+    fontWeight: 'bold',
+    fontSize: 18,
+    fontFamily: 'Cochin',
+    height: 60,
+  },
+  multilineChild: {
+    width: 50,
+    height: 40,
+    position: 'absolute',
+    right: 5,
+    backgroundColor: 'red',
   },
   eventLabel: {
     margin: 3,
@@ -118,7 +134,7 @@ var styles = StyleSheet.create({
 });
 
 exports.title = '<TextInput>';
-exports.description = 'Single-line text inputs.';
+exports.description = 'Single and multi-line text inputs.';
 exports.examples = [
   {
     title: 'Auto-focus',
@@ -313,7 +329,7 @@ exports.examples = [
   },
   {
     title: 'Clear and select',
-    render: function () {
+    render: function() {
       return (
         <View>
           <WithLabel label="clearTextOnFocus">
@@ -336,4 +352,42 @@ exports.examples = [
       );
     }
   },
+  {
+    title: 'Multiline',
+    render: function() {
+      return (
+        <View>
+          <TextInput
+            placeholder="multiline text input"
+            multiline={true}
+            style={styles.multiline}
+          />
+          <TextInput
+            placeholder="mutliline text input with font styles and placeholder"
+            multiline={true}
+            clearTextOnFocus={true}
+            autoCorrect={true}
+            autoCapitalize="words"
+            placeholderTextColor="red"
+            keyboardType="url"
+            style={[styles.multiline, styles.multilineWithFontStyles]}
+          />
+          <TextInput
+            placeholder="uneditable mutliline text input"
+            editable={false}
+            multiline={true}
+            style={styles.multiline}
+          />
+          <TextInput
+            placeholder="multiline with children"
+            multiline={true}
+            enablesReturnKeyAutomatically={true}
+            returnKeyType="go"
+            style={styles.multiline}>
+            <View style={styles.multilineChild}/>
+          </TextInput>
+        </View>
+      )
+    }
+  }
 ];

Examples/UIExplorer/UIExplorerBlock.js

@@ -70,6 +70,7 @@ var styles = StyleSheet.create({
   },
   titleContainer: {
     borderWidth: 0.5,
+    borderRadius: 2.5,
     borderColor: '#d6d7da',
     backgroundColor: '#f6f7f8',
     paddingHorizontal: 10,
@@ -78,8 +79,10 @@ var styles = StyleSheet.create({
   titleRow: {
     flexDirection: 'row',
     justifyContent: 'space-between',
+    backgroundColor: 'transparent',
   },
   titleText: {
+    backgroundColor: 'transparent',
     fontSize: 14,
     fontWeight: '500',
   },
@@ -97,6 +100,7 @@ var styles = StyleSheet.create({
     height: 8,
   },
   children: {
+    backgroundColor: 'transparent',
     padding: 10,
   }
 });

Examples/UIExplorer/UIExplorerList.js

@@ -43,6 +43,7 @@ var COMPONENTS = [
   require('./NavigatorIOSExample'),
   require('./PickerIOSExample'),
   require('./ScrollViewExample'),
+  require('./SegmentedControlIOSExample'),
   require('./SliderIOSExample'),
   require('./SwitchIOSExample'),
   require('./TabBarIOSExample'),

Examples/UIExplorer/WebViewExample.js

@@ -94,6 +94,7 @@ var WebViewExample = React.createClass({
           automaticallyAdjustContentInsets={false}
           style={styles.webView}
           url={this.state.url}
+          javaScriptEnabledAndroid={true}
           onNavigationStateChange={this.onNavigationStateChange}
           startInLoadingState={true}
         />