Update mon 27 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/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/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}
         />

Libraries/BatchedBridge/BatchedBridgedModules/__mocks__/NativeModules.js

@@ -29,6 +29,7 @@ var NativeModules = {
   UIManager: {
     customBubblingEventTypes: {},
     customDirectEventTypes: {},
+    Dimensions: {},
   },
   AsyncLocalStorage: {
     getItem: jest.genMockFunction(),

Libraries/Components/ActivityIndicatorIOS/ActivityIndicatorIOS.ios.js

@@ -18,21 +18,16 @@ var React = require('React');
 var StyleSheet = require('StyleSheet');
 var View = require('View');
 
-var keyMirror = require('keyMirror');
 var requireNativeComponent = require('requireNativeComponent');
 var verifyPropTypes = require('verifyPropTypes');
 
-var SpinnerSize = keyMirror({
-  large: null,
-  small: null,
-});
-
 var GRAY = '#999999';
 
 type DefaultProps = {
   animating: boolean;
-  size: 'small' | 'large';
   color: string;
+  hidesWhenStopped: boolean;
+  size: 'small' | 'large';
 };
 
 var ActivityIndicatorIOS = React.createClass({
@@ -47,7 +42,10 @@ var ActivityIndicatorIOS = React.createClass({
      * The foreground color of the spinner (default is gray).
      */
     color: PropTypes.string,
-
+    /**
+     * Whether the indicator should hide when not animating (true by default).
+     */
+    hidesWhenStopped: PropTypes.bool,
     /**
      * Size of the indicator. Small has a height of 20, large has a height of 36.
      */
@@ -60,27 +58,18 @@ var ActivityIndicatorIOS = React.createClass({
   getDefaultProps: function(): DefaultProps {
     return {
       animating: true,
-      size: SpinnerSize.small,
       color: GRAY,
+      hidesWhenStopped: true,
+      size: 'small',
     };
   },
 
   render: function() {
-    var style = styles.sizeSmall;
-    var NativeConstants = NativeModules.UIManager.UIActivityIndicatorView.Constants;
-    var activityIndicatorViewStyle = NativeConstants.StyleWhite;
-    if (this.props.size === 'large') {
-      style = styles.sizeLarge;
-      activityIndicatorViewStyle = NativeConstants.StyleWhiteLarge;
-    }
+    var {style, ...props} = this.props;
+    var sizeStyle = (this.props.size === 'large') ? styles.sizeLarge : styles.sizeSmall;
     return (
-      <View
-        style={[styles.container, style, this.props.style]}>
-        <UIActivityIndicatorView
-          activityIndicatorViewStyle={activityIndicatorViewStyle}
-          animating={this.props.animating}
-          color={this.props.color}
-        />
+      <View style={[styles.container, sizeStyle, style]}>
+        <RCTActivityIndicatorView {...props} />
       </View>
     );
   }
@@ -99,15 +88,15 @@ var styles = StyleSheet.create({
   }
 });
 
-var UIActivityIndicatorView = requireNativeComponent(
-  'UIActivityIndicatorView',
+var RCTActivityIndicatorView = requireNativeComponent(
+  'RCTActivityIndicatorView',
   null
 );
 if (__DEV__) {
   var nativeOnlyProps = {activityIndicatorViewStyle: true};
   verifyPropTypes(
     ActivityIndicatorIOS,
-    UIActivityIndicatorView.viewConfig,
+    RCTActivityIndicatorView.viewConfig,
     nativeOnlyProps
   );
 }

Libraries/Components/TabBarIOS/TabBarItemIOS.ios.js

@@ -66,6 +66,9 @@ var TabBarItemIOS = React.createClass({
      * blank content, you probably forgot to add a selected one.
      */
     selected: React.PropTypes.bool,
+    /**
+     * React style object.
+     */
     style: View.propTypes.style,
     /**
      * Text that appears under the icon. It is ignored when a system icon

Libraries/Components/TextInput/TextInput.js

@@ -445,6 +445,7 @@ var TextInput = React.createClass({
           onSubmitEditing={this.props.onSubmitEditing}
           onSelectionChangeShouldSetResponder={() => true}
           placeholder={this.props.placeholder}
+          placeholderTextColor={this.props.placeholderTextColor}
           text={this.state.bufferedValue}
           autoCapitalize={autoCapitalize}
           autoCorrect={this.props.autoCorrect}

Libraries/Components/View/View.js

@@ -29,7 +29,7 @@ var stylePropType = StyleSheetPropType(ViewStylePropTypes);
  * container that supports layout with flexbox, style, some touch handling, and
  * accessibility controls, and is designed to be nested inside other views and
  * to have 0 to many children of any type. `View` maps directly to the native
- * view equivalent on whatever platform react is running on, whether that is a
+ * view equivalent on whatever platform React is running on, whether that is a
  * `UIView`, `<div>`, `android.view`, etc.  This example creates a `View` that
  * wraps two colored boxes and custom component in a row with padding.
  *

Libraries/Components/WebView/WebView.android.js

@@ -42,6 +42,7 @@ var WebView = React.createClass({
     onNavigationStateChange: PropTypes.func,
     startInLoadingState: PropTypes.bool, // force WebView to show loadingView on first load
     style: View.propTypes.style,
+    javaScriptEnabledAndroid: PropTypes.bool,
     /**
      * Used to locate this view in end-to-end tests.
      */
@@ -90,6 +91,7 @@ var WebView = React.createClass({
         key="webViewKey"
         style={webViewStyles}
         url={this.props.url}
+        javaScriptEnabledAndroid={this.props.javaScriptEnabledAndroid}
         contentInset={this.props.contentInset}
         automaticallyAdjustContentInsets={this.props.automaticallyAdjustContentInsets}
         onLoadingStart={this.onLoadingStart}
@@ -157,6 +159,7 @@ var WebView = React.createClass({
 var RCTWebView = createReactIOSNativeComponentClass({
   validAttributes: merge(ReactIOSViewAttributes.UIView, {
     url: true,
+    javaScriptEnabledAndroid: true,
   }),
   uiViewClassName: 'RCTWebView',
 });

Libraries/Components/WebView/WebView.ios.js

@@ -92,6 +92,10 @@ var WebView = React.createClass({
     onNavigationStateChange: PropTypes.func,
     startInLoadingState: PropTypes.bool, // force WebView to show loadingView on first load
     style: View.propTypes.style,
+    /**
+     * Used for android only, JS is enabled by default for WebView on iOS
+     */
+    javaScriptEnabledAndroid: PropTypes.bool,
   },
 
   getInitialState: function() {

Libraries/Geolocation/Geolocation.js

@@ -22,6 +22,12 @@ var subscriptions = [];
 
 var updatesEnabled = false;
 
+type GeoOptions = {
+  timeout: number;
+  maximumAge: number;
+  enableHighAccuracy: bool;
+}
+
 /**
  * You need to include the `NSLocationWhenInUseUsageDescription` key
  * in Info.plist to enable geolocation. Geolocation is enabled by default
@@ -32,10 +38,14 @@ var updatesEnabled = false;
  */
 var Geolocation = {
 
+  /*
+   * Invokes the success callback once with the latest location info.  Supported
+   * options: timeout (ms), maximumAge (ms), enableHighAccuracy (bool)
+   */
   getCurrentPosition: function(
     geo_success: Function,
     geo_error?: Function,
-    geo_options?: Object
+    geo_options?: GeoOptions
   ) {
     invariant(
       typeof geo_success === 'function',
@@ -48,7 +58,11 @@ var Geolocation = {
     );
   },
 
-  watchPosition: function(success: Function, error?: Function, options?: Object): number {
+  /*
+   * Invokes the success callback whenever the location changes.  Supported
+   * options: timeout (ms), maximumAge (ms), enableHighAccuracy (bool)
+   */
+  watchPosition: function(success: Function, error?: Function, options?: GeoOptions): number {
     if (!updatesEnabled) {
       RCTLocationObserver.startObserving(options || {});
       updatesEnabled = true;

Libraries/Geolocation/RCTLocationObserver.m

@@ -163,12 +163,12 @@ - (void)timeout:(NSTimer *)timer
 
 #pragma mark - Public API
 
-RCT_EXPORT_METHOD(startObserving:(NSDictionary *)optionsJSON)
+RCT_EXPORT_METHOD(startObserving:(RCTLocationOptions)options)
 {
   [self checkLocationConfig];
 
   // Select best options
-  _observerOptions = [RCTConvert RCTLocationOptions:optionsJSON];
+  _observerOptions = options;
   for (RCTLocationRequest *request in _pendingRequests) {
     _observerOptions.accuracy = MIN(_observerOptions.accuracy, request.options.accuracy);
   }
@@ -189,7 +189,7 @@ - (void)timeout:(NSTimer *)timer
   }
 }
 
-RCT_EXPORT_METHOD(getCurrentPosition:(NSDictionary *)optionsJSON
+RCT_EXPORT_METHOD(getCurrentPosition:(RCTLocationOptions)options
                   withSuccessCallback:(RCTResponseSenderBlock)successBlock
                   errorCallback:(RCTResponseSenderBlock)errorBlock)
 {
@@ -219,7 +219,6 @@ - (void)timeout:(NSTimer *)timer
   }
 
   // Check if previous recorded location exists and is good enough
-  RCTLocationOptions options = [RCTConvert RCTLocationOptions:optionsJSON];
   if (_lastLocationEvent &&
       CFAbsoluteTimeGetCurrent() - [RCTConvert NSTimeInterval:_lastLocationEvent[@"timestamp"]] < options.maximumAge &&
       [_lastLocationEvent[@"coords"][@"accuracy"] doubleValue] >= options.accuracy) {

Libraries/Image/Image.ios.js

@@ -31,7 +31,7 @@ var verifyPropTypes = require('verifyPropTypes');
 var warning = require('warning');
 
 /**
- * A react component for displaying different types of images,
+ * A React component for displaying different types of images,
  * including network images, static resources, temporary local images, and
  * images from local disk, such as the camera roll.
  *

Libraries/Image/__tests__/resolveAssetSource-test.js

@@ -32,6 +32,12 @@ describe('resolveAssetSource', () => {
     expect(resolveAssetSource(source2)).toBe(source2);
   });
 
+  it('ignores any weird data', () => {
+    expect(resolveAssetSource(null)).toBe(null);
+    expect(resolveAssetSource(42)).toBe(null);
+    expect(resolveAssetSource('nonsense')).toBe(null);
+  });
+
   describe('bundle was loaded from network', () => {
     beforeEach(() => {
       SourceCode.scriptURL = 'http://10.0.0.1:8081/main.bundle';

Libraries/Image/resolveAssetSource.js

@@ -43,10 +43,11 @@ function pickScale(scales, deviceScale) {
   return scales[scales.length - 1] || 1;
 }
 
-// TODO(frantic):
-//   * Pick best scale and append @Nx to file path
-//   * We are currently using httpServerLocation for both http and in-app bundle
 function resolveAssetSource(source) {
+  if (!source || typeof source !== 'object') {
+    return null;
+  }
+
   if (!source.__packager_asset) {
     return source;
   }

Libraries/ReactIOS/ReactIOSComponentMixin.js

@@ -46,7 +46,7 @@ var ReactInstanceMap = require('ReactInstanceMap');
  *
  * `mountImage`: A way to represent the potential to create lower level
  * resources whos `nodeHandle` can be discovered immediately by knowing the
- * `rootNodeID`. Today's web react represents this with `innerHTML` annotated
+ * `rootNodeID`. Today's web React represents this with `innerHTML` annotated
  * with DOM ids that match the `rootNodeID`.
  *
  * Opaque name      TodaysWebReact   FutureWebWorkerReact   ReactNative

Libraries/ReactIOS/ReactIOSMount.js

@@ -191,7 +191,7 @@ var ReactIOSMount = {
    * that has been rendered and unmounting it. There should just be one child
    * component at this time.
    */
-  unmountComponentAtNode: function(containerTag: number): bool {
+  unmountComponentAtNode: function(containerTag: number): boolean {
     if (!ReactIOSTagHandles.reactTagIsNativeTopRootID(containerTag)) {
       console.error('You cannot render into anything but a top root');
       return false;