,\n+ initialProps: P,\n+ rootTag: any\n+) {\n+ invariant(\n+ rootTag,\n+ 'Expect to have a valid rootTag, instead got ', rootTag\n+ );\n+ React.render(\n+ ,\n+ rootTag\n+ );\n+}\n+\n+var styles = StyleSheet.create({\n+ \/\/ This is needed so the application covers the whole screen\n+ \/\/ and therefore the contents of the Portal are not clipped.\n+ appContainer: {\n+ position: 'absolute',\n+ left: 0,\n+ top: 0,\n+ right: 0,\n+ bottom: 0,\n+ },\n+});\n+\n+module.exports = renderApplication;\ndiff --git a\/src\/renderers\/native\/ReactIOS\/renderApplication.ios.js b\/src\/renderers\/native\/ReactIOS\/renderApplication.ios.js\nnew file mode 100644\nindex 0000000000..c3e4f81780\n--- \/dev\/null\n+++ b\/src\/renderers\/native\/ReactIOS\/renderApplication.ios.js\n@@ -0,0 +1,96 @@\n+\/**\n+ * Copyright (c) 2015-present, Facebook, Inc.\n+ * All rights reserved.\n+ *\n+ * This source code is licensed under the BSD-style license found in the\n+ * LICENSE file in the root directory of this source tree. An additional grant\n+ * of patent rights can be found in the PATENTS file in the same directory.\n+ *\n+ * @providesModule renderApplication\n+ * @noflow\n+ *\/\n+\n+'use strict';\n+\n+var RCTDeviceEventEmitter = require('RCTDeviceEventEmitter');\n+var React = require('React');\n+var StyleSheet = require('StyleSheet');\n+var Subscribable = require('Subscribable');\n+var View = require('View');\n+\n+var invariant = require('fbjs\/lib\/invariant');\n+\n+var Inspector = __DEV__ ? require('Inspector') : null;\n+var YellowBox = __DEV__ ? require('YellowBox') : null;\n+\n+var AppContainer = React.createClass({\n+ mixins: [Subscribable.Mixin],\n+\n+ getInitialState: function() {\n+ return { inspector: null };\n+ },\n+\n+ toggleElementInspector: function() {\n+ var inspector = !__DEV__ || this.state.inspector\n+ ? null\n+ : ;\n+ this.setState({inspector});\n+ },\n+\n+ componentDidMount: function() {\n+ this.addListenerOn(\n+ RCTDeviceEventEmitter,\n+ 'toggleElementInspector',\n+ this.toggleElementInspector\n+ );\n+ },\n+\n+ render: function() {\n+ let yellowBox = null;\n+ if (__DEV__) {\n+ yellowBox = ;\n+ }\n+ return (\n+ \n+ \n+ {this.props.children}\n+ <\/View>\n+ {yellowBox}\n+ {this.state.inspector}\n+ <\/View>\n+ );\n+ }\n+});\n+\n+function renderApplication(\n+ RootComponent: ReactClass

,\n+ initialProps: P,\n+ rootTag: any\n+) {\n+ invariant(\n+ rootTag,\n+ 'Expect to have a valid rootTag, instead got ', rootTag\n+ );\n+ \/* eslint-disable jsx-no-undef-with-namespace *\/\n+ React.render(\n+ \n+ \n+ <\/AppContainer>,\n+ rootTag\n+ );\n+ \/* eslint-enable jsx-no-undef-with-namespace *\/\n+}\n+\n+var styles = StyleSheet.create({\n+ appContainer: {\n+ flex: 1,\n+ },\n+});\n+\n+module.exports = renderApplication;\ndiff --git a\/src\/renderers\/native\/ReactIOS\/requireNativeComponent.js b\/src\/renderers\/native\/ReactIOS\/requireNativeComponent.js\nnew file mode 100644\nindex 0000000000..61993f799f\n--- \/dev\/null\n+++ b\/src\/renderers\/native\/ReactIOS\/requireNativeComponent.js\n@@ -0,0 +1,127 @@\n+\/**\n+ * Copyright (c) 2015-present, Facebook, Inc.\n+ * All rights reserved.\n+ *\n+ * This source code is licensed under the BSD-style license found in the\n+ * LICENSE file in the root directory of this source tree. An additional grant\n+ * of patent rights can be found in the PATENTS file in the same directory.\n+ *\n+ * @providesModule requireNativeComponent\n+ * @flow\n+ *\/\n+'use strict';\n+\n+var ReactNativeStyleAttributes = require('ReactNativeStyleAttributes');\n+var UIManager = require('UIManager');\n+var UnimplementedView = require('UnimplementedView');\n+\n+var createReactNativeComponentClass = require('createReactNativeComponentClass');\n+\n+var insetsDiffer = require('insetsDiffer');\n+var pointsDiffer = require('pointsDiffer');\n+var matricesDiffer = require('matricesDiffer');\n+var processColor = require('processColor');\n+var resolveAssetSource = require('resolveAssetSource');\n+var sizesDiffer = require('sizesDiffer');\n+var verifyPropTypes = require('verifyPropTypes');\n+var warning = require('fbjs\/lib\/warning');\n+\n+\/**\n+ * Used to create React components that directly wrap native component\n+ * implementations. Config information is extracted from data exported from the\n+ * UIManager module. You should also wrap the native component in a\n+ * hand-written component with full propTypes definitions and other\n+ * documentation - pass the hand-written component in as `componentInterface` to\n+ * verify all the native props are documented via `propTypes`.\n+ *\n+ * If some native props shouldn't be exposed in the wrapper interface, you can\n+ * pass null for `componentInterface` and call `verifyPropTypes` directly\n+ * with `nativePropsToIgnore`;\n+ *\n+ * Common types are lined up with the appropriate prop differs with\n+ * `TypeToDifferMap`. Non-scalar types not in the map default to `deepDiffer`.\n+ *\/\n+import type { ComponentInterface } from 'verifyPropTypes';\n+\n+function requireNativeComponent(\n+ viewName: string,\n+ componentInterface?: ?ComponentInterface,\n+ extraConfig?: ?{nativeOnly?: Object},\n+): Function {\n+ var viewConfig = UIManager[viewName];\n+ if (!viewConfig || !viewConfig.NativeProps) {\n+ warning(false, 'Native component for \"%s\" does not exist', viewName);\n+ return UnimplementedView;\n+ }\n+ var nativeProps = {\n+ ...UIManager.RCTView.NativeProps,\n+ ...viewConfig.NativeProps,\n+ };\n+ viewConfig.uiViewClassName = viewName;\n+ viewConfig.validAttributes = {};\n+ viewConfig.propTypes = componentInterface && componentInterface.propTypes;\n+ for (var key in nativeProps) {\n+ var useAttribute = false;\n+ var attribute = {};\n+\n+ var differ = TypeToDifferMap[nativeProps[key]];\n+ if (differ) {\n+ attribute.diff = differ;\n+ useAttribute = true;\n+ }\n+\n+ var processor = TypeToProcessorMap[nativeProps[key]];\n+ if (processor) {\n+ attribute.process = processor;\n+ useAttribute = true;\n+ }\n+\n+ viewConfig.validAttributes[key] = useAttribute ? attribute : true;\n+ }\n+\n+ \/\/ Unfortunately, the current set up puts the style properties on the top\n+ \/\/ level props object. We also need to add the nested form for API\n+ \/\/ compatibility. This allows these props on both the top level and the\n+ \/\/ nested style level. TODO: Move these to nested declarations on the\n+ \/\/ native side.\n+ viewConfig.validAttributes.style = ReactNativeStyleAttributes;\n+\n+ if (__DEV__) {\n+ componentInterface && verifyPropTypes(\n+ componentInterface,\n+ viewConfig,\n+ extraConfig && extraConfig.nativeOnly\n+ );\n+ }\n+ return createReactNativeComponentClass(viewConfig);\n+}\n+\n+var TypeToDifferMap = {\n+ \/\/ iOS Types\n+ CATransform3D: matricesDiffer,\n+ CGPoint: pointsDiffer,\n+ CGSize: sizesDiffer,\n+ UIEdgeInsets: insetsDiffer,\n+ \/\/ Android Types\n+ \/\/ (not yet implemented)\n+};\n+\n+function processColorArray(colors: []): [] {\n+ return colors && colors.map(processColor);\n+}\n+\n+var TypeToProcessorMap = {\n+ \/\/ iOS Types\n+ CGColor: processColor,\n+ CGColorArray: processColorArray,\n+ UIColor: processColor,\n+ UIColorArray: processColorArray,\n+ CGImage: resolveAssetSource,\n+ UIImage: resolveAssetSource,\n+ RCTImageSource: resolveAssetSource,\n+ \/\/ Android Types\n+ Color: processColor,\n+ ColorArray: processColorArray,\n+};\n+\n+module.exports = requireNativeComponent;\ndiff --git a\/src\/renderers\/native\/ReactIOS\/verifyPropTypes.js b\/src\/renderers\/native\/ReactIOS\/verifyPropTypes.js\nnew file mode 100644\nindex 0000000000..d284d60ec0\n--- \/dev\/null\n+++ b\/src\/renderers\/native\/ReactIOS\/verifyPropTypes.js\n@@ -0,0 +1,61 @@\n+\/**\n+ * Copyright (c) 2015-present, Facebook, Inc.\n+ * All rights reserved.\n+ *\n+ * This source code is licensed under the BSD-style license found in the\n+ * LICENSE file in the root directory of this source tree. An additional grant\n+ * of patent rights can be found in the PATENTS file in the same directory.\n+ *\n+ * @providesModule verifyPropTypes\n+ * @flow\n+ *\/\n+'use strict';\n+\n+var ReactNativeStyleAttributes = require('ReactNativeStyleAttributes');\n+\n+export type ComponentInterface = ReactClass | {\n+ name?: string;\n+ displayName?: string;\n+ propTypes: Object;\n+};\n+\n+function verifyPropTypes(\n+ componentInterface: ComponentInterface,\n+ viewConfig: Object,\n+ nativePropsToIgnore?: ?Object\n+) {\n+ if (!viewConfig) {\n+ return; \/\/ This happens for UnimplementedView.\n+ }\n+ var componentName = componentInterface.name ||\n+ componentInterface.displayName ||\n+ 'unknown';\n+ if (!componentInterface.propTypes) {\n+ throw new Error(\n+ '`' + componentName + '` has no propTypes defined`'\n+ );\n+ }\n+\n+ var nativeProps = viewConfig.NativeProps;\n+ for (var prop in nativeProps) {\n+ if (!componentInterface.propTypes[prop] &&\n+ !ReactNativeStyleAttributes[prop] &&\n+ (!nativePropsToIgnore || !nativePropsToIgnore[prop])) {\n+ var message;\n+ if (componentInterface.propTypes.hasOwnProperty(prop)) {\n+ message = '`' + componentName + '` has incorrectly defined propType for native prop `' +\n+ viewConfig.uiViewClassName + '.' + prop + '` of native type `' + nativeProps[prop];\n+ } else {\n+ message = '`' + componentName + '` has no propType for native prop `' +\n+ viewConfig.uiViewClassName + '.' + prop + '` of native type `' +\n+ nativeProps[prop] + '`';\n+ };\n+ message += '\\nIf you haven\\'t changed this prop yourself, this usually means that ' +\n+ 'your versions of the native code and JavaScript code are out of sync. Updating both ' +\n+ 'should make this error go away.';\n+ throw new Error(message);\n+ }\n+ }\n+}\n+\n+module.exports = verifyPropTypes;\ndiff --git a\/src\/renderers\/native\/ReactNative\/React.js b\/src\/renderers\/native\/ReactNative\/React.js\nnew file mode 100644\nindex 0000000000..9cd4464f28\n--- \/dev\/null\n+++ b\/src\/renderers\/native\/ReactNative\/React.js\n@@ -0,0 +1,14 @@\n+\/**\n+ * Copyright (c) 2015-present, Facebook, Inc.\n+ * All rights reserved.\n+ *\n+ * This source code is licensed under the BSD-style license found in the\n+ * LICENSE file in the root directory of this source tree. An additional grant\n+ * of patent rights can be found in the PATENTS file in the same directory.\n+ *\n+ * @providesModule React\n+ * @flow\n+ *\/\n+'use strict';\n+\n+module.exports = require('ReactNative');\ndiff --git a\/src\/renderers\/native\/ReactNative\/ReactDOM.js b\/src\/renderers\/native\/ReactNative\/ReactDOM.js\nnew file mode 100644\nindex 0000000000..7ac737c132\n--- \/dev\/null\n+++ b\/src\/renderers\/native\/ReactNative\/ReactDOM.js\n@@ -0,0 +1,16 @@\n+\/**\n+ * Copyright 2004-present Facebook. All Rights Reserved.\n+ *\n+ * @providesModule ReactDOM\n+ *\/\n+\n+'use strict';\n+\n+var ReactUpdates = require('ReactUpdates');\n+\n+\/\/ Temporary shim required for ReactTestUtils and Relay.\n+var ReactDOM = {\n+ unstable_batchedUpdates: ReactUpdates.batchedUpdates,\n+};\n+\n+module.exports = ReactDOM;\ndiff --git a\/src\/renderers\/native\/ReactNative\/ReactNative.js b\/src\/renderers\/native\/ReactNative\/ReactNative.js\nnew file mode 100644\nindex 0000000000..148a366663\n--- \/dev\/null\n+++ b\/src\/renderers\/native\/ReactNative\/ReactNative.js\n@@ -0,0 +1,138 @@\n+\/**\n+ * Copyright (c) 2015-present, Facebook, Inc.\n+ * All rights reserved.\n+ *\n+ * This source code is licensed under the BSD-style license found in the\n+ * LICENSE file in the root directory of this source tree. An additional grant\n+ * of patent rights can be found in the PATENTS file in the same directory.\n+ *\n+ * @providesModule ReactNative\n+ * @flow\n+ *\/\n+'use strict';\n+\n+\/\/ Require ReactNativeDefaultInjection first for its side effects of setting up\n+\/\/ the JS environment\n+var ReactNativeDefaultInjection = require('ReactNativeDefaultInjection');\n+\n+var ReactChildren = require('ReactChildren');\n+var ReactClass = require('ReactClass');\n+var ReactComponent = require('ReactComponent');\n+var ReactCurrentOwner = require('ReactCurrentOwner');\n+var ReactElement = require('ReactElement');\n+var ReactElementValidator = require('ReactElementValidator');\n+var ReactInstanceHandles = require('ReactInstanceHandles');\n+var ReactNativeMount = require('ReactNativeMount');\n+var ReactPropTypes = require('ReactPropTypes');\n+var ReactUpdates = require('ReactUpdates');\n+\n+var findNodeHandle = require('findNodeHandle');\n+var invariant = require('fbjs\/lib\/invariant');\n+var onlyChild = require('onlyChild');\n+var warning = require('fbjs\/lib\/warning');\n+\n+ReactNativeDefaultInjection.inject();\n+\n+var createElement = ReactElement.createElement;\n+var createFactory = ReactElement.createFactory;\n+var cloneElement = ReactElement.cloneElement;\n+\n+if (__DEV__) {\n+ createElement = ReactElementValidator.createElement;\n+ createFactory = ReactElementValidator.createFactory;\n+ cloneElement = ReactElementValidator.cloneElement;\n+}\n+\n+var resolveDefaultProps = function(element) {\n+ \/\/ Could be optimized, but not currently in heavy use.\n+ var defaultProps = element.type.defaultProps;\n+ var props = element.props;\n+ for (var propName in defaultProps) {\n+ if (props[propName] === undefined) {\n+ props[propName] = defaultProps[propName];\n+ }\n+ }\n+};\n+\n+\/\/ Experimental optimized element creation\n+var augmentElement = function(element: ReactElement): ReactElement {\n+ if (__DEV__) {\n+ invariant(\n+ false,\n+ 'This optimized path should never be used in DEV mode because ' +\n+ 'it does not provide validation. Check your JSX transform.'\n+ );\n+ }\n+ element._owner = ReactCurrentOwner.current;\n+ if (element.type.defaultProps) {\n+ resolveDefaultProps(element);\n+ }\n+ return element;\n+};\n+\n+var render = function(\n+ element: ReactElement,\n+ mountInto: number,\n+ callback?: ?(() => void)\n+): ?ReactComponent {\n+ return ReactNativeMount.renderComponent(element, mountInto, callback);\n+};\n+\n+var ReactNative = {\n+ hasReactNativeInitialized: false,\n+ Children: {\n+ map: ReactChildren.map,\n+ forEach: ReactChildren.forEach,\n+ count: ReactChildren.count,\n+ toArray: ReactChildren.toArray,\n+ only: onlyChild\n+ },\n+ Component: ReactComponent,\n+ PropTypes: ReactPropTypes,\n+ createClass: ReactClass.createClass,\n+ createElement: createElement,\n+ createFactory: createFactory,\n+ cloneElement: cloneElement,\n+ _augmentElement: augmentElement,\n+ findNodeHandle: findNodeHandle,\n+ render: render,\n+ unmountComponentAtNode: ReactNativeMount.unmountComponentAtNode,\n+\n+ \/* eslint-disable camelcase *\/\n+ unstable_batchedUpdates: ReactUpdates.batchedUpdates,\n+ \/* eslint-enable camelcase *\/\n+\n+ \/\/ Hook for JSX spread, don't use this for anything else.\n+ __spread: Object.assign,\n+\n+ unmountComponentAtNodeAndRemoveContainer: ReactNativeMount.unmountComponentAtNodeAndRemoveContainer,\n+ isValidClass: ReactElement.isValidFactory,\n+ isValidElement: ReactElement.isValidElement,\n+\n+ \/\/ Deprecations (remove for 0.13)\n+ renderComponent: function(\n+ element: ReactElement,\n+ mountInto: number,\n+ callback?: ?(() => void)\n+ ): ?ReactComponent {\n+ warning('Use React.render instead of React.renderComponent');\n+ return ReactNative.render(element, mountInto, callback);\n+ },\n+};\n+\n+\/\/ Inject the runtime into a devtools global hook regardless of browser.\n+\/\/ Allows for debugging when the hook is injected on the page.\n+\/* globals __REACT_DEVTOOLS_GLOBAL_HOOK__ *\/\n+if (\n+ typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&\n+ typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.inject === 'function') {\n+ __REACT_DEVTOOLS_GLOBAL_HOOK__.inject({\n+ CurrentOwner: ReactCurrentOwner,\n+ InstanceHandles: ReactInstanceHandles,\n+ Mount: ReactNativeMount,\n+ Reconciler: require('ReactReconciler'),\n+ TextComponent: require('ReactNativeTextComponent'),\n+ });\n+}\n+\n+module.exports = ReactNative;\ndiff --git a\/src\/renderers\/native\/ReactNative\/ReactNativeAttributePayload.js b\/src\/renderers\/native\/ReactNative\/ReactNativeAttributePayload.js\nnew file mode 100644\nindex 0000000000..7adf0d27c7\n--- \/dev\/null\n+++ b\/src\/renderers\/native\/ReactNative\/ReactNativeAttributePayload.js\n@@ -0,0 +1,546 @@\n+\/**\n+ * Copyright (c) 2015-present, Facebook, Inc.\n+ * All rights reserved.\n+ *\n+ * This source code is licensed under the BSD-style license found in the\n+ * LICENSE file in the root directory of this source tree. An additional grant\n+ * of patent rights can be found in the PATENTS file in the same directory.\n+ *\n+ * @providesModule ReactNativeAttributePayload\n+ * @flow\n+ *\/\n+'use strict';\n+\n+var Platform = require('Platform');\n+var ReactNativePropRegistry = require('ReactNativePropRegistry');\n+\n+var deepDiffer = require('deepDiffer');\n+var flattenStyle = require('flattenStyle');\n+\n+var emptyObject = {};\n+\n+\/**\n+ * Create a payload that contains all the updates between two sets of props.\n+ *\n+ * These helpers are all encapsulated into a single module, because they use\n+ * mutation as a performance optimization which leads to subtle shared\n+ * dependencies between the code paths. To avoid this mutable state leaking\n+ * across modules, I've kept them isolated to this module.\n+ *\/\n+\n+type AttributeDiffer = (prevProp: mixed, nextProp: mixed) => boolean;\n+type AttributePreprocessor = (nextProp: mixed) => mixed;\n+\n+type CustomAttributeConfiguration =\n+ { diff: AttributeDiffer, process: AttributePreprocessor } |\n+ { diff: AttributeDiffer } |\n+ { process: AttributePreprocessor };\n+\n+type AttributeConfiguration =\n+ { [key: string]: (\n+ CustomAttributeConfiguration | AttributeConfiguration \/*| boolean*\/\n+ ) };\n+\n+type NestedNode = Array | Object | number;\n+\n+\/\/ Tracks removed keys\n+var removedKeys = null;\n+var removedKeyCount = 0;\n+\n+function translateKey(propKey: string) : string {\n+ if (propKey === 'transform') {\n+ \/\/ We currently special case the key for `transform`. iOS uses the\n+ \/\/ transformMatrix name and Android uses the decomposedMatrix name.\n+ \/\/ TODO: We could unify these names and just use the name `transform`\n+ \/\/ all the time. Just need to update the native side.\n+ if (Platform.OS === 'android') {\n+ return 'decomposedMatrix';\n+ } else {\n+ return 'transformMatrix';\n+ }\n+ }\n+ return propKey;\n+}\n+\n+function defaultDiffer(prevProp: mixed, nextProp: mixed) : boolean {\n+ if (typeof nextProp !== 'object' || nextProp === null) {\n+ \/\/ Scalars have already been checked for equality\n+ return true;\n+ } else {\n+ \/\/ For objects and arrays, the default diffing algorithm is a deep compare\n+ return deepDiffer(prevProp, nextProp);\n+ }\n+}\n+\n+function resolveObject(idOrObject: number | Object) : Object {\n+ if (typeof idOrObject === 'number') {\n+ return ReactNativePropRegistry.getByID(idOrObject);\n+ }\n+ return idOrObject;\n+}\n+\n+function restoreDeletedValuesInNestedArray(\n+ updatePayload: Object,\n+ node: NestedNode,\n+ validAttributes: AttributeConfiguration\n+) {\n+ if (Array.isArray(node)) {\n+ var i = node.length;\n+ while (i-- && removedKeyCount > 0) {\n+ restoreDeletedValuesInNestedArray(\n+ updatePayload,\n+ node[i],\n+ validAttributes\n+ );\n+ }\n+ } else if (node && removedKeyCount > 0) {\n+ var obj = resolveObject(node);\n+ for (var propKey in removedKeys) {\n+ if (!removedKeys[propKey]) {\n+ continue;\n+ }\n+ var nextProp = obj[propKey];\n+ if (nextProp === undefined) {\n+ continue;\n+ }\n+\n+ var attributeConfig = validAttributes[propKey];\n+ if (!attributeConfig) {\n+ continue; \/\/ not a valid native prop\n+ }\n+\n+ if (typeof nextProp === 'function') {\n+ nextProp = true;\n+ }\n+ if (typeof nextProp === 'undefined') {\n+ nextProp = null;\n+ }\n+\n+ if (typeof attributeConfig !== 'object') {\n+ \/\/ case: !Object is the default case\n+ updatePayload[propKey] = nextProp;\n+ } else if (typeof attributeConfig.diff === 'function' ||\n+ typeof attributeConfig.process === 'function') {\n+ \/\/ case: CustomAttributeConfiguration\n+ var nextValue = typeof attributeConfig.process === 'function' ?\n+ attributeConfig.process(nextProp) :\n+ nextProp;\n+ updatePayload[propKey] = nextValue;\n+ }\n+ removedKeys[propKey] = false;\n+ removedKeyCount--;\n+ }\n+ }\n+}\n+\n+function diffNestedArrayProperty(\n+ updatePayload:? Object,\n+ prevArray: Array,\n+ nextArray: Array,\n+ validAttributes: AttributeConfiguration\n+) : ?Object {\n+ var minLength = prevArray.length < nextArray.length ?\n+ prevArray.length :\n+ nextArray.length;\n+ var i;\n+ for (i = 0; i < minLength; i++) {\n+ \/\/ Diff any items in the array in the forward direction. Repeated keys\n+ \/\/ will be overwritten by later values.\n+ updatePayload = diffNestedProperty(\n+ updatePayload,\n+ prevArray[i],\n+ nextArray[i],\n+ validAttributes\n+ );\n+ }\n+ for (; i < prevArray.length; i++) {\n+ \/\/ Clear out all remaining properties.\n+ updatePayload = clearNestedProperty(\n+ updatePayload,\n+ prevArray[i],\n+ validAttributes\n+ );\n+ }\n+ for (; i < nextArray.length; i++) {\n+ \/\/ Add all remaining properties.\n+ updatePayload = addNestedProperty(\n+ updatePayload,\n+ nextArray[i],\n+ validAttributes\n+ );\n+ }\n+ return updatePayload;\n+}\n+\n+function diffNestedProperty(\n+ updatePayload:? Object,\n+ prevProp: NestedNode,\n+ nextProp: NestedNode,\n+ validAttributes: AttributeConfiguration\n+) : ?Object {\n+\n+ if (!updatePayload && prevProp === nextProp) {\n+ \/\/ If no properties have been added, then we can bail out quickly on object\n+ \/\/ equality.\n+ return updatePayload;\n+ }\n+\n+ if (!prevProp || !nextProp) {\n+ if (nextProp) {\n+ return addNestedProperty(\n+ updatePayload,\n+ nextProp,\n+ validAttributes\n+ );\n+ }\n+ if (prevProp) {\n+ return clearNestedProperty(\n+ updatePayload,\n+ prevProp,\n+ validAttributes\n+ );\n+ }\n+ return updatePayload;\n+ }\n+\n+ if (!Array.isArray(prevProp) && !Array.isArray(nextProp)) {\n+ \/\/ Both are leaves, we can diff the leaves.\n+ return diffProperties(\n+ updatePayload,\n+ resolveObject(prevProp),\n+ resolveObject(nextProp),\n+ validAttributes\n+ );\n+ }\n+\n+ if (Array.isArray(prevProp) && Array.isArray(nextProp)) {\n+ \/\/ Both are arrays, we can diff the arrays.\n+ return diffNestedArrayProperty(\n+ updatePayload,\n+ prevProp,\n+ nextProp,\n+ validAttributes\n+ );\n+ }\n+\n+ if (Array.isArray(prevProp)) {\n+ return diffProperties(\n+ updatePayload,\n+ \/\/ $FlowFixMe - We know that this is always an object when the input is.\n+ flattenStyle(prevProp),\n+ \/\/ $FlowFixMe - We know that this isn't an array because of above flow.\n+ resolveObject(nextProp),\n+ validAttributes\n+ );\n+ }\n+\n+ return diffProperties(\n+ updatePayload,\n+ resolveObject(prevProp),\n+ \/\/ $FlowFixMe - We know that this is always an object when the input is.\n+ flattenStyle(nextProp),\n+ validAttributes\n+ );\n+}\n+\n+\/**\n+ * addNestedProperty takes a single set of props and valid attribute\n+ * attribute configurations. It processes each prop and adds it to the\n+ * updatePayload.\n+ *\/\n+function addNestedProperty(\n+ updatePayload:? Object,\n+ nextProp: NestedNode,\n+ validAttributes: AttributeConfiguration\n+) {\n+ if (!nextProp) {\n+ return updatePayload;\n+ }\n+\n+ if (!Array.isArray(nextProp)) {\n+ \/\/ Add each property of the leaf.\n+ return addProperties(\n+ updatePayload,\n+ resolveObject(nextProp),\n+ validAttributes\n+ );\n+ }\n+\n+ for (var i = 0; i < nextProp.length; i++) {\n+ \/\/ Add all the properties of the array.\n+ updatePayload = addNestedProperty(\n+ updatePayload,\n+ nextProp[i],\n+ validAttributes\n+ );\n+ }\n+\n+ return updatePayload;\n+}\n+\n+\/**\n+ * clearNestedProperty takes a single set of props and valid attributes. It\n+ * adds a null sentinel to the updatePayload, for each prop key.\n+ *\/\n+function clearNestedProperty(\n+ updatePayload:? Object,\n+ prevProp: NestedNode,\n+ validAttributes: AttributeConfiguration\n+) : ?Object {\n+ if (!prevProp) {\n+ return updatePayload;\n+ }\n+\n+ if (!Array.isArray(prevProp)) {\n+ \/\/ Add each property of the leaf.\n+ return clearProperties(\n+ updatePayload,\n+ resolveObject(prevProp),\n+ validAttributes\n+ );\n+ }\n+\n+ for (var i = 0; i < prevProp.length; i++) {\n+ \/\/ Add all the properties of the array.\n+ updatePayload = clearNestedProperty(\n+ updatePayload,\n+ prevProp[i],\n+ validAttributes\n+ );\n+ }\n+ return updatePayload;\n+}\n+\n+\/**\n+ * diffProperties takes two sets of props and a set of valid attributes\n+ * and write to updatePayload the values that changed or were deleted.\n+ * If no updatePayload is provided, a new one is created and returned if\n+ * anything changed.\n+ *\/\n+function diffProperties(\n+ updatePayload: ?Object,\n+ prevProps: Object,\n+ nextProps: Object,\n+ validAttributes: AttributeConfiguration\n+): ?Object {\n+ var attributeConfig : ?(CustomAttributeConfiguration | AttributeConfiguration);\n+ var nextProp;\n+ var prevProp;\n+ var altKey;\n+\n+ for (var propKey in nextProps) {\n+ attributeConfig = validAttributes[propKey];\n+ if (!attributeConfig) {\n+ continue; \/\/ not a valid native prop\n+ }\n+\n+ altKey = translateKey(propKey);\n+ if (!validAttributes[altKey]) {\n+ \/\/ If there is no config for the alternative, bail out. Helps ART.\n+ altKey = propKey;\n+ }\n+\n+ prevProp = prevProps[propKey];\n+ nextProp = nextProps[propKey];\n+\n+ \/\/ functions are converted to booleans as markers that the associated\n+ \/\/ events should be sent from native.\n+ if (typeof nextProp === 'function') {\n+ nextProp = (true : any);\n+ \/\/ If nextProp is not a function, then don't bother changing prevProp\n+ \/\/ since nextProp will win and go into the updatePayload regardless.\n+ if (typeof prevProp === 'function') {\n+ prevProp = (true : any);\n+ }\n+ }\n+\n+ \/\/ An explicit value of undefined is treated as a null because it overrides\n+ \/\/ any other preceeding value.\n+ if (typeof nextProp === 'undefined') {\n+ nextProp = (null : any);\n+ if (typeof prevProp === 'undefined') {\n+ prevProp = (null : any);\n+ }\n+ }\n+\n+ if (removedKeys) {\n+ removedKeys[propKey] = false;\n+ }\n+\n+ if (updatePayload && updatePayload[altKey] !== undefined) {\n+ \/\/ Something else already triggered an update to this key because another\n+ \/\/ value diffed. Since we're now later in the nested arrays our value is\n+ \/\/ more important so we need to calculate it and override the existing\n+ \/\/ value. It doesn't matter if nothing changed, we'll set it anyway.\n+\n+ \/\/ Pattern match on: attributeConfig\n+ if (typeof attributeConfig !== 'object') {\n+ \/\/ case: !Object is the default case\n+ updatePayload[altKey] = nextProp;\n+ } else if (typeof attributeConfig.diff === 'function' ||\n+ typeof attributeConfig.process === 'function') {\n+ \/\/ case: CustomAttributeConfiguration\n+ var nextValue = typeof attributeConfig.process === 'function' ?\n+ attributeConfig.process(nextProp) :\n+ nextProp;\n+ updatePayload[altKey] = nextValue;\n+ }\n+ continue;\n+ }\n+\n+ if (prevProp === nextProp) {\n+ continue; \/\/ nothing changed\n+ }\n+\n+ \/\/ Pattern match on: attributeConfig\n+ if (typeof attributeConfig !== 'object') {\n+ \/\/ case: !Object is the default case\n+ if (defaultDiffer(prevProp, nextProp)) {\n+ \/\/ a normal leaf has changed\n+ (updatePayload || (updatePayload = {}))[altKey] = nextProp;\n+ }\n+ } else if (typeof attributeConfig.diff === 'function' ||\n+ typeof attributeConfig.process === 'function') {\n+ \/\/ case: CustomAttributeConfiguration\n+ var shouldUpdate = prevProp === undefined || (\n+ typeof attributeConfig.diff === 'function' ?\n+ attributeConfig.diff(prevProp, nextProp) :\n+ defaultDiffer(prevProp, nextProp)\n+ );\n+ if (shouldUpdate) {\n+ var nextValue = typeof attributeConfig.process === 'function' ?\n+ attributeConfig.process(nextProp) :\n+ nextProp;\n+ (updatePayload || (updatePayload = {}))[altKey] = nextValue;\n+ }\n+ } else {\n+ \/\/ default: fallthrough case when nested properties are defined\n+ removedKeys = null;\n+ removedKeyCount = 0;\n+ updatePayload = diffNestedProperty(\n+ updatePayload,\n+ prevProp,\n+ nextProp,\n+ attributeConfig\n+ );\n+ if (removedKeyCount > 0 && updatePayload) {\n+ restoreDeletedValuesInNestedArray(\n+ updatePayload,\n+ nextProp,\n+ attributeConfig\n+ );\n+ removedKeys = null;\n+ }\n+ }\n+ }\n+\n+ \/\/ Also iterate through all the previous props to catch any that have been\n+ \/\/ removed and make sure native gets the signal so it can reset them to the\n+ \/\/ default.\n+ for (var propKey in prevProps) {\n+ if (nextProps[propKey] !== undefined) {\n+ continue; \/\/ we've already covered this key in the previous pass\n+ }\n+ attributeConfig = validAttributes[propKey];\n+ if (!attributeConfig) {\n+ continue; \/\/ not a valid native prop\n+ }\n+\n+ altKey = translateKey(propKey);\n+ if (!attributeConfig[altKey]) {\n+ \/\/ If there is no config for the alternative, bail out. Helps ART.\n+ altKey = propKey;\n+ }\n+\n+ if (updatePayload && updatePayload[altKey] !== undefined) {\n+ \/\/ This was already updated to a diff result earlier.\n+ continue;\n+ }\n+\n+ prevProp = prevProps[propKey];\n+ if (prevProp === undefined) {\n+ continue; \/\/ was already empty anyway\n+ }\n+ \/\/ Pattern match on: attributeConfig\n+ if (typeof attributeConfig !== 'object' ||\n+ typeof attributeConfig.diff === 'function' ||\n+ typeof attributeConfig.process === 'function') {\n+\n+ \/\/ case: CustomAttributeConfiguration | !Object\n+ \/\/ Flag the leaf property for removal by sending a sentinel.\n+ (updatePayload || (updatePayload = {}))[altKey] = null;\n+ if (!removedKeys) {\n+ removedKeys = {};\n+ }\n+ if (!removedKeys[propKey]) {\n+ removedKeys[propKey] = true;\n+ removedKeyCount++;\n+ }\n+ } else {\n+ \/\/ default:\n+ \/\/ This is a nested attribute configuration where all the properties\n+ \/\/ were removed so we need to go through and clear out all of them.\n+ updatePayload = clearNestedProperty(\n+ updatePayload,\n+ prevProp,\n+ attributeConfig\n+ );\n+ }\n+ }\n+ return updatePayload;\n+}\n+\n+\/**\n+ * addProperties adds all the valid props to the payload after being processed.\n+ *\/\n+function addProperties(\n+ updatePayload: ?Object,\n+ props: Object,\n+ validAttributes: AttributeConfiguration\n+) : ?Object {\n+ \/\/ TODO: Fast path\n+ return diffProperties(updatePayload, emptyObject, props, validAttributes);\n+}\n+\n+\/**\n+ * clearProperties clears all the previous props by adding a null sentinel\n+ * to the payload for each valid key.\n+ *\/\n+function clearProperties(\n+ updatePayload: ?Object,\n+ prevProps: Object,\n+ validAttributes: AttributeConfiguration\n+) :? Object {\n+ \/\/ TODO: Fast path\n+ return diffProperties(updatePayload, prevProps, emptyObject, validAttributes);\n+}\n+\n+var ReactNativeAttributePayload = {\n+\n+ create: function(\n+ props: Object,\n+ validAttributes: AttributeConfiguration\n+ ) : ?Object {\n+ return addProperties(\n+ null, \/\/ updatePayload\n+ props,\n+ validAttributes\n+ );\n+ },\n+\n+ diff: function(\n+ prevProps: Object,\n+ nextProps: Object,\n+ validAttributes: AttributeConfiguration\n+ ) : ?Object {\n+ return diffProperties(\n+ null, \/\/ updatePayload\n+ prevProps,\n+ nextProps,\n+ validAttributes\n+ );\n+ }\n+\n+};\n+\n+module.exports = ReactNativeAttributePayload;\ndiff --git a\/src\/renderers\/native\/ReactNative\/ReactNativeBaseComponent.js b\/src\/renderers\/native\/ReactNative\/ReactNativeBaseComponent.js\nnew file mode 100644\nindex 0000000000..b879b45b6a\n--- \/dev\/null\n+++ b\/src\/renderers\/native\/ReactNative\/ReactNativeBaseComponent.js\n@@ -0,0 +1,239 @@\n+\/**\n+ * Copyright (c) 2015-present, Facebook, Inc.\n+ * All rights reserved.\n+ *\n+ * This source code is licensed under the BSD-style license found in the\n+ * LICENSE file in the root directory of this source tree. An additional grant\n+ * of patent rights can be found in the PATENTS file in the same directory.\n+ *\n+ * @providesModule ReactNativeBaseComponent\n+ * @flow\n+ *\/\n+'use strict';\n+\n+var NativeMethodsMixin = require('NativeMethodsMixin');\n+var ReactNativeAttributePayload = require('ReactNativeAttributePayload');\n+var ReactNativeEventEmitter = require('ReactNativeEventEmitter');\n+var ReactNativeTagHandles = require('ReactNativeTagHandles');\n+var ReactMultiChild = require('ReactMultiChild');\n+var UIManager = require('UIManager');\n+\n+var deepFreezeAndThrowOnMutationInDev = require('deepFreezeAndThrowOnMutationInDev');\n+var invariant = require('fbjs\/lib\/invariant');\n+var warning = require('fbjs\/lib\/warning');\n+\n+var registrationNames = ReactNativeEventEmitter.registrationNames;\n+var putListener = ReactNativeEventEmitter.putListener;\n+var deleteListener = ReactNativeEventEmitter.deleteListener;\n+var deleteAllListeners = ReactNativeEventEmitter.deleteAllListeners;\n+\n+type ReactNativeBaseComponentViewConfig = {\n+ validAttributes: Object;\n+ uiViewClassName: string;\n+}\n+\n+\/\/ require('UIManagerStatTracker').install(); \/\/ uncomment to enable\n+\n+\/**\n+ * @constructor ReactNativeBaseComponent\n+ * @extends ReactComponent\n+ * @extends ReactMultiChild\n+ * @param {!object} UIKit View Configuration.\n+ *\/\n+var ReactNativeBaseComponent = function(\n+ viewConfig: ReactNativeBaseComponentViewConfig\n+) {\n+ this.viewConfig = viewConfig;\n+};\n+\n+\/**\n+ * Mixin for containers that contain UIViews. NOTE: markup is rendered markup\n+ * which is a `viewID` ... see the return value for `mountComponent` !\n+ *\/\n+ReactNativeBaseComponent.Mixin = {\n+ getPublicInstance: function() {\n+ \/\/ TODO: This should probably use a composite wrapper\n+ return this;\n+ },\n+\n+ construct: function(element) {\n+ this._currentElement = element;\n+ },\n+\n+ unmountComponent: function() {\n+ deleteAllListeners(this._rootNodeID);\n+ this.unmountChildren();\n+ this._rootNodeID = null;\n+ },\n+\n+ \/**\n+ * Every native component is responsible for allocating its own `tag`, and\n+ * issuing the native `createView` command. But it is not responsible for\n+ * recording the fact that its own `rootNodeID` is associated with a\n+ * `nodeHandle`. Only the code that actually adds its `nodeHandle` (`tag`) as\n+ * a child of a container can confidently record that in\n+ * `ReactNativeTagHandles`.\n+ *\/\n+ initializeChildren: function(children, containerTag, transaction, context) {\n+ var mountImages = this.mountChildren(children, transaction, context);\n+ \/\/ In a well balanced tree, half of the nodes are in the bottom row and have\n+ \/\/ no children - let's avoid calling out to the native bridge for a large\n+ \/\/ portion of the children.\n+ if (mountImages.length) {\n+\n+ \/\/ TODO: Pool these per platform view class. Reusing the `mountImages`\n+ \/\/ array would likely be a jit deopt.\n+ var createdTags = [];\n+ for (var i = 0, l = mountImages.length; i < l; i++) {\n+ var mountImage = mountImages[i];\n+ var childTag = mountImage.tag;\n+ var childID = mountImage.rootNodeID;\n+ warning(\n+ mountImage && mountImage.rootNodeID && mountImage.tag,\n+ 'Mount image returned does not have required data'\n+ );\n+ ReactNativeTagHandles.associateRootNodeIDWithMountedNodeHandle(\n+ childID,\n+ childTag\n+ );\n+ createdTags[i] = mountImage.tag;\n+ }\n+ UIManager.setChildren(containerTag, createdTags);\n+ }\n+ },\n+\n+ \/**\n+ * Updates the component's currently mounted representation.\n+ *\n+ * @param {object} nextElement\n+ * @param {ReactReconcileTransaction} transaction\n+ * @param {object} context\n+ * @internal\n+ *\/\n+ receiveComponent: function(nextElement, transaction, context) {\n+ var prevElement = this._currentElement;\n+ this._currentElement = nextElement;\n+\n+ if (__DEV__) {\n+ for (var key in this.viewConfig.validAttributes) {\n+ if (nextElement.props.hasOwnProperty(key)) {\n+ deepFreezeAndThrowOnMutationInDev(nextElement.props[key]);\n+ }\n+ }\n+ }\n+\n+ var updatePayload = ReactNativeAttributePayload.diff(\n+ prevElement.props,\n+ nextElement.props,\n+ this.viewConfig.validAttributes\n+ );\n+\n+ if (updatePayload) {\n+ UIManager.updateView(\n+ ReactNativeTagHandles.mostRecentMountedNodeHandleForRootNodeID(this._rootNodeID),\n+ this.viewConfig.uiViewClassName,\n+ updatePayload\n+ );\n+ }\n+\n+ this._reconcileListenersUponUpdate(\n+ prevElement.props,\n+ nextElement.props\n+ );\n+ this.updateChildren(nextElement.props.children, transaction, context);\n+ },\n+\n+ \/**\n+ * @param {object} initialProps Native component props.\n+ *\/\n+ _registerListenersUponCreation: function(initialProps) {\n+ for (var key in initialProps) {\n+ \/\/ NOTE: The check for `!props[key]`, is only possible because this method\n+ \/\/ registers listeners the *first* time a component is created.\n+ if (registrationNames[key] && initialProps[key]) {\n+ var listener = initialProps[key];\n+ putListener(this._rootNodeID, key, listener);\n+ }\n+ }\n+ },\n+\n+ \/**\n+ * Reconciles event listeners, adding or removing if necessary.\n+ * @param {object} prevProps Native component props including events.\n+ * @param {object} nextProps Next native component props including events.\n+ *\/\n+ _reconcileListenersUponUpdate: function(prevProps, nextProps) {\n+ for (var key in nextProps) {\n+ if (registrationNames[key] && (nextProps[key] !== prevProps[key])) {\n+ if (nextProps[key]) {\n+ putListener(this._rootNodeID, key, nextProps[key]);\n+ } else {\n+ deleteListener(this._rootNodeID, key);\n+ }\n+ }\n+ }\n+ },\n+\n+ \/**\n+ * @param {string} rootID Root ID of this subtree.\n+ * @param {Transaction} transaction For creating\/updating.\n+ * @return {string} Unique iOS view tag.\n+ *\/\n+ mountComponent: function(rootID, transaction, context) {\n+ this._rootNodeID = rootID;\n+\n+ var tag = ReactNativeTagHandles.allocateTag();\n+\n+ if (__DEV__) {\n+ for (var key in this.viewConfig.validAttributes) {\n+ if (this._currentElement.props.hasOwnProperty(key)) {\n+ deepFreezeAndThrowOnMutationInDev(this._currentElement.props[key]);\n+ }\n+ }\n+ }\n+\n+ var updatePayload = ReactNativeAttributePayload.create(\n+ this._currentElement.props,\n+ this.viewConfig.validAttributes\n+ );\n+\n+ var nativeTopRootID = ReactNativeTagHandles.getNativeTopRootIDFromNodeID(rootID);\n+ if (nativeTopRootID == null) {\n+ invariant(\n+ false,\n+ 'nativeTopRootID not found for tag ' + tag + ' view type ' +\n+ this.viewConfig.uiViewClassName + ' with rootID ' + rootID);\n+ }\n+ UIManager.createView(\n+ tag,\n+ this.viewConfig.uiViewClassName,\n+ ReactNativeTagHandles.rootNodeIDToTag[nativeTopRootID],\n+ updatePayload\n+ );\n+\n+ this._registerListenersUponCreation(this._currentElement.props);\n+ this.initializeChildren(\n+ this._currentElement.props.children,\n+ tag,\n+ transaction,\n+ context\n+ );\n+ return {\n+ rootNodeID: rootID,\n+ tag: tag\n+ };\n+ }\n+};\n+\n+\/**\n+ * Order of mixins is important. ReactNativeBaseComponent overrides methods in\n+ * ReactMultiChild.\n+ *\/\n+Object.assign(\n+ ReactNativeBaseComponent.prototype,\n+ ReactMultiChild.Mixin,\n+ ReactNativeBaseComponent.Mixin,\n+ NativeMethodsMixin\n+);\n+\n+module.exports = ReactNativeBaseComponent;\ndiff --git a\/src\/renderers\/native\/ReactNative\/ReactNativeBaseComponentEnvironment.js b\/src\/renderers\/native\/ReactNative\/ReactNativeBaseComponentEnvironment.js\nnew file mode 100644\nindex 0000000000..6e038620d6\n--- \/dev\/null\n+++ b\/src\/renderers\/native\/ReactNative\/ReactNativeBaseComponentEnvironment.js\n@@ -0,0 +1,42 @@\n+\/**\n+ * Copyright (c) 2015-present, Facebook, Inc.\n+ * All rights reserved.\n+ *\n+ * This source code is licensed under the BSD-style license found in the\n+ * LICENSE file in the root directory of this source tree. An additional grant\n+ * of patent rights can be found in the PATENTS file in the same directory.\n+ *\n+ * @providesModule ReactNativeComponentEnvironment\n+ * @flow\n+ *\/\n+'use strict';\n+\n+var ReactNativeDOMIDOperations = require('ReactNativeDOMIDOperations');\n+var ReactNativeReconcileTransaction = require('ReactNativeReconcileTransaction');\n+\n+var ReactNativeComponentEnvironment = {\n+\n+ processChildrenUpdates: ReactNativeDOMIDOperations.dangerouslyProcessChildrenUpdates,\n+\n+ replaceNodeWithMarkupByID: ReactNativeDOMIDOperations.dangerouslyReplaceNodeWithMarkupByID,\n+\n+ \/**\n+ * Nothing to do for UIKit bridge.\n+ *\n+ * @private\n+ *\/\n+ unmountIDFromEnvironment: function(\/*rootNodeID*\/) {\n+\n+ },\n+\n+ \/**\n+ * @param {DOMElement} Element to clear.\n+ *\/\n+ clearNode: function(\/*containerView*\/) {\n+\n+ },\n+\n+ ReactReconcileTransaction: ReactNativeReconcileTransaction,\n+};\n+\n+module.exports = ReactNativeComponentEnvironment;\ndiff --git a\/src\/renderers\/native\/ReactNative\/ReactNativeDOMIDOperations.js b\/src\/renderers\/native\/ReactNative\/ReactNativeDOMIDOperations.js\nnew file mode 100644\nindex 0000000000..fbf90db503\n--- \/dev\/null\n+++ b\/src\/renderers\/native\/ReactNative\/ReactNativeDOMIDOperations.js\n@@ -0,0 +1,102 @@\n+\/**\n+ * Copyright (c) 2015-present, Facebook, Inc.\n+ * All rights reserved.\n+ *\n+ * This source code is licensed under the BSD-style license found in the\n+ * LICENSE file in the root directory of this source tree. An additional grant\n+ * of patent rights can be found in the PATENTS file in the same directory.\n+ *\n+ * @providesModule ReactNativeDOMIDOperations\n+ * @flow\n+ *\/\n+'use strict';\n+\n+var ReactNativeTagHandles = require('ReactNativeTagHandles');\n+var ReactMultiChildUpdateTypes = require('ReactMultiChildUpdateTypes');\n+var ReactPerf = require('ReactPerf');\n+var UIManager = require('UIManager');\n+\n+\/**\n+ * Updates a component's children by processing a series of updates.\n+ * For each of the update\/create commands, the `fromIndex` refers to the index\n+ * that the item existed at *before* any of the updates are applied, and the\n+ * `toIndex` refers to the index after *all* of the updates are applied\n+ * (including deletes\/moves). TODO: refactor so this can be shared with\n+ * DOMChildrenOperations.\n+ *\n+ * @param {array

dillon1000/react

Files changed