From 3152e930955b6440edf14fe9c5d246181bc22a55 Mon Sep 17 00:00:00 2001 From: Eli White Date: Sat, 3 Mar 2018 15:04:46 -0800 Subject: [PATCH 01/50] Converting Libraries/Components to not use var Reviewed By: sahrens Differential Revision: D7117137 fbshipit-source-id: a55a04928a0073a17e0709e851aa8b11678042ba --- .../AccessibilityInfo.android.js | 16 +-- .../AccessibilityInfo.ios.js | 20 ++-- .../Components/AppleTV/TVViewPropTypes.js | 4 +- .../DatePicker/DatePickerIOS.android.js | 10 +- .../DrawerLayoutAndroid.android.js | 48 ++++----- Libraries/Components/LazyRenderer.js | 10 +- .../Components/Navigation/NavigatorIOS.ios.js | 78 +++++++------- Libraries/Components/Picker/Picker.js | 26 ++--- .../Picker/PickerAndroid.android.js | 44 ++++---- Libraries/Components/Picker/PickerIOS.ios.js | 30 +++--- .../ProgressViewIOS.android.js | 10 +- .../ProgressViewIOS/ProgressViewIOS.ios.js | 22 ++-- .../SegmentedControlIOS.android.js | 10 +- .../SegmentedControlIOS.ios.js | 22 ++-- Libraries/Components/Slider/Slider.js | 24 ++--- Libraries/Components/StaticRenderer.js | 4 +- Libraries/Components/Subscribable.js | 2 +- Libraries/Components/Switch/Switch.js | 20 ++-- .../Components/TabBarIOS/TabBarIOS.ios.js | 14 +-- .../TabBarIOS/TabBarItemIOS.android.js | 8 +- .../Components/TabBarIOS/TabBarItemIOS.ios.js | 20 ++-- Libraries/Components/TextInput/TextInput.js | 20 ++-- .../Components/TextInput/TextInputState.js | 6 +- .../ToastAndroid/ToastAndroid.android.js | 4 +- .../ToastAndroid/ToastAndroid.ios.js | 4 +- .../ToolbarAndroid/ToolbarAndroid.android.js | 38 +++---- .../Touchable/BoundingDimensions.js | 4 +- Libraries/Components/Touchable/PooledClass.js | 40 +++---- Libraries/Components/Touchable/Position.js | 4 +- Libraries/Components/Touchable/Touchable.js | 100 +++++++++--------- .../Components/Touchable/TouchableBounce.js | 20 ++-- .../TouchableNativeFeedback.android.js | 36 +++---- .../Touchable/TouchableNativeFeedback.ios.js | 10 +- .../Components/Touchable/TouchableOpacity.js | 28 ++--- .../Touchable/ensureComponentIsNative.js | 4 +- .../Touchable/ensurePositiveDelayProps.js | 4 +- .../View/PlatformViewPropTypes.ios.js | 2 +- .../View/ReactNativeStyleAttributes.js | 18 ++-- .../View/ReactNativeViewAttributes.js | 4 +- .../Components/View/ViewStylePropTypes.js | 12 +-- .../ViewPager/ViewPagerAndroid.android.js | 20 ++-- .../Components/WebView/WebView.android.js | 60 +++++------ Libraries/Components/WebView/WebView.ios.js | 82 +++++++------- 43 files changed, 481 insertions(+), 481 deletions(-) diff --git a/Libraries/Components/AccessibilityInfo/AccessibilityInfo.android.js b/Libraries/Components/AccessibilityInfo/AccessibilityInfo.android.js index b08593a06672..afc4abe1533a 100644 --- a/Libraries/Components/AccessibilityInfo/AccessibilityInfo.android.js +++ b/Libraries/Components/AccessibilityInfo/AccessibilityInfo.android.js @@ -9,18 +9,18 @@ */ 'use strict'; -var NativeModules = require('NativeModules'); -var RCTDeviceEventEmitter = require('RCTDeviceEventEmitter'); +const NativeModules = require('NativeModules'); +const RCTDeviceEventEmitter = require('RCTDeviceEventEmitter'); -var RCTAccessibilityInfo = NativeModules.AccessibilityInfo; +const RCTAccessibilityInfo = NativeModules.AccessibilityInfo; -var TOUCH_EXPLORATION_EVENT = 'touchExplorationDidChange'; +const TOUCH_EXPLORATION_EVENT = 'touchExplorationDidChange'; type ChangeEventName = $Enum<{ change: string, }>; -var _subscriptions = new Map(); +const _subscriptions = new Map(); /** * Sometimes it's useful to know whether or not the device has a screen reader @@ -32,7 +32,7 @@ var _subscriptions = new Map(); * See http://facebook.github.io/react-native/docs/accessibilityinfo.html */ -var AccessibilityInfo = { +const AccessibilityInfo = { fetch: function(): Promise { return new Promise((resolve, reject) => { @@ -48,7 +48,7 @@ var AccessibilityInfo = { eventName: ChangeEventName, handler: Function ): void { - var listener = RCTDeviceEventEmitter.addListener( + const listener = RCTDeviceEventEmitter.addListener( TOUCH_EXPLORATION_EVENT, (enabled) => { handler(enabled); @@ -61,7 +61,7 @@ var AccessibilityInfo = { eventName: ChangeEventName, handler: Function ): void { - var listener = _subscriptions.get(handler); + const listener = _subscriptions.get(handler); if (!listener) { return; } diff --git a/Libraries/Components/AccessibilityInfo/AccessibilityInfo.ios.js b/Libraries/Components/AccessibilityInfo/AccessibilityInfo.ios.js index 822f0dcbaab8..6e39b5e477d5 100644 --- a/Libraries/Components/AccessibilityInfo/AccessibilityInfo.ios.js +++ b/Libraries/Components/AccessibilityInfo/AccessibilityInfo.ios.js @@ -9,21 +9,21 @@ */ 'use strict'; -var NativeModules = require('NativeModules'); -var Promise = require('Promise'); -var RCTDeviceEventEmitter = require('RCTDeviceEventEmitter'); +const NativeModules = require('NativeModules'); +const Promise = require('Promise'); +const RCTDeviceEventEmitter = require('RCTDeviceEventEmitter'); -var AccessibilityManager = NativeModules.AccessibilityManager; +const AccessibilityManager = NativeModules.AccessibilityManager; -var VOICE_OVER_EVENT = 'voiceOverDidChange'; -var ANNOUNCEMENT_DID_FINISH_EVENT = 'announcementDidFinish'; +const VOICE_OVER_EVENT = 'voiceOverDidChange'; +const ANNOUNCEMENT_DID_FINISH_EVENT = 'announcementDidFinish'; type ChangeEventName = $Enum<{ change: string, announcementFinished: string }>; -var _subscriptions = new Map(); +const _subscriptions = new Map(); /** * Sometimes it's useful to know whether or not the device has a screen reader @@ -34,7 +34,7 @@ var _subscriptions = new Map(); * * See http://facebook.github.io/react-native/docs/accessibilityinfo.html */ -var AccessibilityInfo = { +const AccessibilityInfo = { /** * Query whether a screen reader is currently enabled. @@ -72,7 +72,7 @@ var AccessibilityInfo = { eventName: ChangeEventName, handler: Function ): Object { - var listener; + let listener; if (eventName === 'change') { listener = RCTDeviceEventEmitter.addListener( @@ -127,7 +127,7 @@ var AccessibilityInfo = { eventName: ChangeEventName, handler: Function ): void { - var listener = _subscriptions.get(handler); + const listener = _subscriptions.get(handler); if (!listener) { return; } diff --git a/Libraries/Components/AppleTV/TVViewPropTypes.js b/Libraries/Components/AppleTV/TVViewPropTypes.js index fab7a30b84d4..90b86aa47d73 100644 --- a/Libraries/Components/AppleTV/TVViewPropTypes.js +++ b/Libraries/Components/AppleTV/TVViewPropTypes.js @@ -8,12 +8,12 @@ * @flow */ 'use strict'; -var PropTypes = require('prop-types'); +const PropTypes = require('prop-types'); /** * Additional View properties for Apple TV */ -var TVViewPropTypes = { +const TVViewPropTypes = { /** * *(Apple TV only)* When set to true, this view will be focusable * and navigable using the Apple TV remote. diff --git a/Libraries/Components/DatePicker/DatePickerIOS.android.js b/Libraries/Components/DatePicker/DatePickerIOS.android.js index 8a1db045e017..2a0d8998bfb5 100644 --- a/Libraries/Components/DatePicker/DatePickerIOS.android.js +++ b/Libraries/Components/DatePicker/DatePickerIOS.android.js @@ -9,10 +9,10 @@ 'use strict'; -var React = require('React'); -var StyleSheet = require('StyleSheet'); -var Text = require('Text'); -var View = require('View'); +const React = require('React'); +const StyleSheet = require('StyleSheet'); +const Text = require('Text'); +const View = require('View'); class DummyDatePickerIOS extends React.Component { render() { @@ -24,7 +24,7 @@ class DummyDatePickerIOS extends React.Component { } } -var styles = StyleSheet.create({ +const styles = StyleSheet.create({ dummyDatePickerIOS: { height: 100, width: 300, diff --git a/Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.android.js b/Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.android.js index 3a39a7d02f6b..6a20d894f4f4 100644 --- a/Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.android.js +++ b/Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.android.js @@ -8,28 +8,28 @@ */ 'use strict'; -var ColorPropType = require('ColorPropType'); -var NativeMethodsMixin = require('NativeMethodsMixin'); -var Platform = require('Platform'); -var React = require('React'); -var PropTypes = require('prop-types'); -var ReactNative = require('ReactNative'); -var StatusBar = require('StatusBar'); -var StyleSheet = require('StyleSheet'); -var UIManager = require('UIManager'); -var View = require('View'); -var ViewPropTypes = require('ViewPropTypes'); +const ColorPropType = require('ColorPropType'); +const NativeMethodsMixin = require('NativeMethodsMixin'); +const Platform = require('Platform'); +const React = require('React'); +const PropTypes = require('prop-types'); +const ReactNative = require('ReactNative'); +const StatusBar = require('StatusBar'); +const StyleSheet = require('StyleSheet'); +const UIManager = require('UIManager'); +const View = require('View'); +const ViewPropTypes = require('ViewPropTypes'); -var DrawerConsts = UIManager.AndroidDrawerLayout.Constants; +const DrawerConsts = UIManager.AndroidDrawerLayout.Constants; -var createReactClass = require('create-react-class'); -var dismissKeyboard = require('dismissKeyboard'); -var requireNativeComponent = require('requireNativeComponent'); +const createReactClass = require('create-react-class'); +const dismissKeyboard = require('dismissKeyboard'); +const requireNativeComponent = require('requireNativeComponent'); -var RK_DRAWER_REF = 'drawerlayout'; -var INNERVIEW_REF = 'innerView'; +const RK_DRAWER_REF = 'drawerlayout'; +const INNERVIEW_REF = 'innerView'; -var DRAWER_STATES = [ +const DRAWER_STATES = [ 'Idle', 'Dragging', 'Settling', @@ -66,7 +66,7 @@ var DRAWER_STATES = [ * }, * ``` */ -var DrawerLayoutAndroid = createReactClass({ +const DrawerLayoutAndroid = createReactClass({ displayName: 'DrawerLayoutAndroid', statics: { positions: DrawerConsts.DrawerPosition, @@ -169,8 +169,8 @@ var DrawerLayoutAndroid = createReactClass({ }, render: function() { - var drawStatusBar = Platform.Version >= 21 && this.props.statusBarBackgroundColor; - var drawerViewWrapper = + const drawStatusBar = Platform.Version >= 21 && this.props.statusBarBackgroundColor; + const drawerViewWrapper = } ; - var childrenWrapper = + const childrenWrapper = {drawStatusBar && =0.54.0 site=react_native_oss) This comment suppresses an error * found when Flow v0.54 was deployed. To see the error delete this comment and * run Flow. */ const keyMirror = require('fbjs/lib/keyMirror'); -var TRANSITIONER_REF = 'transitionerRef'; +const TRANSITIONER_REF = 'transitionerRef'; -var __uid = 0; +let __uid = 0; function getuid() { return __uid++; } @@ -305,7 +305,7 @@ type Event = Object; * is pushed. * */ -var NavigatorIOS = createReactClass({ +const NavigatorIOS = createReactClass({ displayName: 'NavigatorIOS', propTypes: { @@ -584,7 +584,7 @@ var NavigatorIOS = createReactClass({ _getFocusEmitter: function(): EventEmitter { // Flow not yet tracking assignments to instance fields. - var focusEmitter = this._focusEmitter; + let focusEmitter = this._focusEmitter; if (!focusEmitter) { focusEmitter = new EventEmitter(); this._focusEmitter = focusEmitter; @@ -614,13 +614,13 @@ var NavigatorIOS = createReactClass({ }, _handleNavigatorStackChanged: function(e: Event) { - var newObservedTopOfStack = e.nativeEvent.stackLength - 1; + const newObservedTopOfStack = e.nativeEvent.stackLength - 1; invariant( newObservedTopOfStack <= this.state.requestedTopOfStack, 'No navigator item should be pushed without JS knowing about it %s %s', newObservedTopOfStack, this.state.requestedTopOfStack ); - var wasWaitingForConfirmation = + const wasWaitingForConfirmation = this.state.requestedTopOfStack !== this.state.observedTopOfStack; if (wasWaitingForConfirmation) { invariant( @@ -638,7 +638,7 @@ var NavigatorIOS = createReactClass({ // Progress isn't always 0 or 1 at the end, the system rounds // If the Navigator is offscreen these values won't be updated // TOOD: Revisit this decision when no longer relying on native navigator. - var nextState = { + const nextState = { observedTopOfStack: newObservedTopOfStack, makingNavigatorRequest: false, updatingAllIndicesAtOrBeyond: null, @@ -653,7 +653,7 @@ var NavigatorIOS = createReactClass({ // Updating the indices that we're deleting and that's all. (Truth: Nothing // even uses the indices in this case, but let's make this describe the // truth anyways). - var updatingAllIndicesAtOrBeyond = + const updatingAllIndicesAtOrBeyond = this.state.routeStack.length > this.state.observedTopOfStack + 1 ? this.state.observedTopOfStack + 1 : null; @@ -677,8 +677,8 @@ var NavigatorIOS = createReactClass({ if (this.state.requestedTopOfStack === this.state.observedTopOfStack) { this._tryLockNavigator(() => { - var nextStack = this.state.routeStack.concat([route]); - var nextIDStack = this.state.idStack.concat([getuid()]); + const nextStack = this.state.routeStack.concat([route]); + const nextIDStack = this.state.idStack.concat([getuid()]); this.setState({ // We have to make sure that we've also supplied enough views to // satisfy our request to adjust the `requestedTopOfStack`. @@ -704,7 +704,7 @@ var NavigatorIOS = createReactClass({ if (this.state.requestedTopOfStack === this.state.observedTopOfStack) { if (this.state.requestedTopOfStack > 0) { this._tryLockNavigator(() => { - var newRequestedTopOfStack = this.state.requestedTopOfStack - n; + const newRequestedTopOfStack = this.state.requestedTopOfStack - n; invariant(newRequestedTopOfStack >= 0, 'Cannot pop below 0'); this.setState({ requestedTopOfStack: newRequestedTopOfStack, @@ -742,8 +742,8 @@ var NavigatorIOS = createReactClass({ // I don't believe we need to lock for a replace since there's no // navigation actually happening - var nextIDStack = this.state.idStack.slice(); - var nextRouteStack = this.state.routeStack.slice(); + const nextIDStack = this.state.idStack.slice(); + const nextRouteStack = this.state.routeStack.slice(); nextIDStack[index] = getuid(); nextRouteStack[index] = route; @@ -785,12 +785,12 @@ var NavigatorIOS = createReactClass({ * @param route The new route to navigate to. */ popToRoute: function(route: Route) { - var indexOfRoute = this.state.routeStack.indexOf(route); + const indexOfRoute = this.state.routeStack.indexOf(route); invariant( indexOfRoute !== -1, 'Calling pop to route for a route that doesn\'t exist!' ); - var numToPop = this.state.routeStack.length - indexOfRoute - 1; + const numToPop = this.state.routeStack.length - indexOfRoute - 1; this.popN(numToPop); }, @@ -841,12 +841,12 @@ var NavigatorIOS = createReactClass({ }, _routeToStackItem: function(routeArg: Route, i: number) { - var {component, wrapperStyle, passProps, ...route} = routeArg; - var {itemWrapperStyle, ...props} = this.props; - var shouldUpdateChild = + const {component, wrapperStyle, passProps, ...route} = routeArg; + const {itemWrapperStyle, ...props} = this.props; + const shouldUpdateChild = this.state.updatingAllIndicesAtOrBeyond != null && this.state.updatingAllIndicesAtOrBeyond >= i; - var Component = component; + const Component = component; return ( @@ -919,7 +919,7 @@ var NavigatorIOS = createReactClass({ }, }); -var styles = StyleSheet.create({ +const styles = StyleSheet.create({ stackItem: { backgroundColor: 'white', overflow: 'hidden', @@ -934,7 +934,7 @@ var styles = StyleSheet.create({ }, }); -var RCTNavigator = requireNativeComponent('RCTNavigator'); -var RCTNavigatorItem = requireNativeComponent('RCTNavItem'); +const RCTNavigator = requireNativeComponent('RCTNavigator'); +const RCTNavigatorItem = requireNativeComponent('RCTNavItem'); module.exports = NavigatorIOS; diff --git a/Libraries/Components/Picker/Picker.js b/Libraries/Components/Picker/Picker.js index d4b225c8abe7..1df316249d7c 100644 --- a/Libraries/Components/Picker/Picker.js +++ b/Libraries/Components/Picker/Picker.js @@ -10,27 +10,27 @@ 'use strict'; -var ColorPropType = require('ColorPropType'); -var PickerIOS = require('PickerIOS'); -var PickerAndroid = require('PickerAndroid'); -var Platform = require('Platform'); -var React = require('React'); +const ColorPropType = require('ColorPropType'); +const PickerIOS = require('PickerIOS'); +const PickerAndroid = require('PickerAndroid'); +const Platform = require('Platform'); +const React = require('React'); const PropTypes = require('prop-types'); -var StyleSheetPropType = require('StyleSheetPropType'); -var TextStylePropTypes = require('TextStylePropTypes'); -var UnimplementedView = require('UnimplementedView'); +const StyleSheetPropType = require('StyleSheetPropType'); +const TextStylePropTypes = require('TextStylePropTypes'); +const UnimplementedView = require('UnimplementedView'); const ViewPropTypes = require('ViewPropTypes'); -var ViewStylePropTypes = require('ViewStylePropTypes'); +const ViewStylePropTypes = require('ViewStylePropTypes'); -var itemStylePropType = StyleSheetPropType(TextStylePropTypes); +const itemStylePropType = StyleSheetPropType(TextStylePropTypes); -var pickerStyleType = StyleSheetPropType({ +const pickerStyleType = StyleSheetPropType({ ...ViewStylePropTypes, color: ColorPropType, }); -var MODE_DIALOG = 'dialog'; -var MODE_DROPDOWN = 'dropdown'; +const MODE_DIALOG = 'dialog'; +const MODE_DROPDOWN = 'dropdown'; /** * Individual selectable item in a Picker. diff --git a/Libraries/Components/Picker/PickerAndroid.android.js b/Libraries/Components/Picker/PickerAndroid.android.js index c164db953731..bd9c664a8fa5 100644 --- a/Libraries/Components/Picker/PickerAndroid.android.js +++ b/Libraries/Components/Picker/PickerAndroid.android.js @@ -10,21 +10,21 @@ 'use strict'; -var ColorPropType = require('ColorPropType'); -var React = require('React'); -var ReactPropTypes = require('prop-types'); -var StyleSheet = require('StyleSheet'); -var StyleSheetPropType = require('StyleSheetPropType'); +const ColorPropType = require('ColorPropType'); +const React = require('React'); +const ReactPropTypes = require('prop-types'); +const StyleSheet = require('StyleSheet'); +const StyleSheetPropType = require('StyleSheetPropType'); const ViewPropTypes = require('ViewPropTypes'); -var ViewStylePropTypes = require('ViewStylePropTypes'); +const ViewStylePropTypes = require('ViewStylePropTypes'); -var processColor = require('processColor'); -var requireNativeComponent = require('requireNativeComponent'); +const processColor = require('processColor'); +const requireNativeComponent = require('requireNativeComponent'); -var REF_PICKER = 'picker'; -var MODE_DROPDOWN = 'dropdown'; +const REF_PICKER = 'picker'; +const MODE_DROPDOWN = 'dropdown'; -var pickerStyleType = StyleSheetPropType({ +const pickerStyleType = StyleSheetPropType({ ...ViewStylePropTypes, color: ColorPropType, }); @@ -56,7 +56,7 @@ class PickerAndroid extends React.Component<{ constructor(props, context) { super(props, context); - var state = this._stateFromProps(props); + const state = this._stateFromProps(props); this.state = { ...state, @@ -70,7 +70,7 @@ class PickerAndroid extends React.Component<{ // Translate prop and children into stuff that the native picker understands. _stateFromProps = (props) => { - var selectedIndex = 0; + let selectedIndex = 0; const items = React.Children.map(props.children, (child, index) => { if (child.props.value === props.selectedValue) { selectedIndex = index; @@ -88,9 +88,9 @@ class PickerAndroid extends React.Component<{ }; render() { - var Picker = this.props.mode === MODE_DROPDOWN ? DropdownPicker : DialogPicker; + const Picker = this.props.mode === MODE_DROPDOWN ? DropdownPicker : DialogPicker; - var nativeProps = { + const nativeProps = { enabled: this.props.enabled, items: this.state.items, mode: this.props.mode, @@ -107,10 +107,10 @@ class PickerAndroid extends React.Component<{ _onChange = (event: Event) => { if (this.props.onValueChange) { - var position = event.nativeEvent.position; + const position = event.nativeEvent.position; if (position >= 0) { - var children = React.Children.toArray(this.props.children); - var value = children[position].props.value; + const children = React.Children.toArray(this.props.children); + const value = children[position].props.value; this.props.onValueChange(value, position); } else { this.props.onValueChange(null, position); @@ -138,7 +138,7 @@ class PickerAndroid extends React.Component<{ } } -var styles = StyleSheet.create({ +const styles = StyleSheet.create({ pickerAndroid: { // The picker will conform to whatever width is given, but we do // have to set the component's height explicitly on the @@ -149,14 +149,14 @@ var styles = StyleSheet.create({ }, }); -var cfg = { +const cfg = { nativeOnly: { items: true, selected: true, } }; -var DropdownPicker = requireNativeComponent('AndroidDropdownPicker', PickerAndroid, cfg); -var DialogPicker = requireNativeComponent('AndroidDialogPicker', PickerAndroid, cfg); +const DropdownPicker = requireNativeComponent('AndroidDropdownPicker', PickerAndroid, cfg); +const DialogPicker = requireNativeComponent('AndroidDialogPicker', PickerAndroid, cfg); module.exports = PickerAndroid; diff --git a/Libraries/Components/Picker/PickerIOS.ios.js b/Libraries/Components/Picker/PickerIOS.ios.js index 3963a9485f25..d1fe0761d5cc 100644 --- a/Libraries/Components/Picker/PickerIOS.ios.js +++ b/Libraries/Components/Picker/PickerIOS.ios.js @@ -10,21 +10,21 @@ */ 'use strict'; -var NativeMethodsMixin = require('NativeMethodsMixin'); -var React = require('React'); +const NativeMethodsMixin = require('NativeMethodsMixin'); +const React = require('React'); const PropTypes = require('prop-types'); -var StyleSheet = require('StyleSheet'); -var StyleSheetPropType = require('StyleSheetPropType'); -var TextStylePropTypes = require('TextStylePropTypes'); -var View = require('View'); +const StyleSheet = require('StyleSheet'); +const StyleSheetPropType = require('StyleSheetPropType'); +const TextStylePropTypes = require('TextStylePropTypes'); +const View = require('View'); const ViewPropTypes = require('ViewPropTypes'); -var processColor = require('processColor'); +const processColor = require('processColor'); -var createReactClass = require('create-react-class'); -var itemStylePropType = StyleSheetPropType(TextStylePropTypes); -var requireNativeComponent = require('requireNativeComponent'); +const createReactClass = require('create-react-class'); +const itemStylePropType = StyleSheetPropType(TextStylePropTypes); +const requireNativeComponent = require('requireNativeComponent'); -var PickerIOS = createReactClass({ +const PickerIOS = createReactClass({ displayName: 'PickerIOS', mixins: [NativeMethodsMixin], @@ -45,8 +45,8 @@ var PickerIOS = createReactClass({ // Translate PickerIOS prop and children into stuff that RCTPickerIOS understands. _stateFromProps: function(props) { - var selectedIndex = 0; - var items = []; + let selectedIndex = 0; + const items = []; React.Children.toArray(props.children).forEach(function (child, index) { if (child.props.value === props.selectedValue) { selectedIndex = index; @@ -111,7 +111,7 @@ PickerIOS.Item = class extends React.Component { } }; -var styles = StyleSheet.create({ +const styles = StyleSheet.create({ pickerIOS: { // The picker will conform to whatever width is given, but we do // have to set the component's height explicitly on the @@ -120,7 +120,7 @@ var styles = StyleSheet.create({ }, }); -var RCTPickerIOS = requireNativeComponent('RCTPicker', { +const RCTPickerIOS = requireNativeComponent('RCTPicker', { propTypes: { style: itemStylePropType, }, diff --git a/Libraries/Components/ProgressViewIOS/ProgressViewIOS.android.js b/Libraries/Components/ProgressViewIOS/ProgressViewIOS.android.js index 46591f628029..f467db1ff51f 100644 --- a/Libraries/Components/ProgressViewIOS/ProgressViewIOS.android.js +++ b/Libraries/Components/ProgressViewIOS/ProgressViewIOS.android.js @@ -10,10 +10,10 @@ 'use strict'; -var React = require('React'); -var StyleSheet = require('StyleSheet'); -var Text = require('Text'); -var View = require('View'); +const React = require('React'); +const StyleSheet = require('StyleSheet'); +const Text = require('Text'); +const View = require('View'); class DummyProgressViewIOS extends React.Component { render() { @@ -27,7 +27,7 @@ class DummyProgressViewIOS extends React.Component { } } -var styles = StyleSheet.create({ +const styles = StyleSheet.create({ dummy: { width: 120, height: 20, diff --git a/Libraries/Components/ProgressViewIOS/ProgressViewIOS.ios.js b/Libraries/Components/ProgressViewIOS/ProgressViewIOS.ios.js index 310f02507c94..55ae1b83abe1 100644 --- a/Libraries/Components/ProgressViewIOS/ProgressViewIOS.ios.js +++ b/Libraries/Components/ProgressViewIOS/ProgressViewIOS.ios.js @@ -9,20 +9,20 @@ */ 'use strict'; -var Image = require('Image'); -var NativeMethodsMixin = require('NativeMethodsMixin'); -var React = require('React'); -var PropTypes = require('prop-types'); -var StyleSheet = require('StyleSheet'); -var ViewPropTypes = require('ViewPropTypes'); +const Image = require('Image'); +const NativeMethodsMixin = require('NativeMethodsMixin'); +const React = require('React'); +const PropTypes = require('prop-types'); +const StyleSheet = require('StyleSheet'); +const ViewPropTypes = require('ViewPropTypes'); -var createReactClass = require('create-react-class'); -var requireNativeComponent = require('requireNativeComponent'); +const createReactClass = require('create-react-class'); +const requireNativeComponent = require('requireNativeComponent'); /** * Use `ProgressViewIOS` to render a UIProgressView on iOS. */ -var ProgressViewIOS = createReactClass({ +const ProgressViewIOS = createReactClass({ displayName: 'ProgressViewIOS', mixins: [NativeMethodsMixin], @@ -69,13 +69,13 @@ var ProgressViewIOS = createReactClass({ } }); -var styles = StyleSheet.create({ +const styles = StyleSheet.create({ progressView: { height: 2, }, }); -var RCTProgressView = requireNativeComponent( +const RCTProgressView = requireNativeComponent( 'RCTProgressView', ProgressViewIOS ); diff --git a/Libraries/Components/SegmentedControlIOS/SegmentedControlIOS.android.js b/Libraries/Components/SegmentedControlIOS/SegmentedControlIOS.android.js index 16be1c8f2b14..a5b4c0b339bf 100644 --- a/Libraries/Components/SegmentedControlIOS/SegmentedControlIOS.android.js +++ b/Libraries/Components/SegmentedControlIOS/SegmentedControlIOS.android.js @@ -10,10 +10,10 @@ 'use strict'; -var React = require('React'); -var StyleSheet = require('StyleSheet'); -var Text = require('Text'); -var View = require('View'); +const React = require('React'); +const StyleSheet = require('StyleSheet'); +const Text = require('Text'); +const View = require('View'); class DummySegmentedControlIOS extends React.Component { render() { @@ -27,7 +27,7 @@ class DummySegmentedControlIOS extends React.Component { } } -var styles = StyleSheet.create({ +const styles = StyleSheet.create({ dummy: { width: 120, height: 50, diff --git a/Libraries/Components/SegmentedControlIOS/SegmentedControlIOS.ios.js b/Libraries/Components/SegmentedControlIOS/SegmentedControlIOS.ios.js index f7748fcc8dbf..3eb4249fa2db 100644 --- a/Libraries/Components/SegmentedControlIOS/SegmentedControlIOS.ios.js +++ b/Libraries/Components/SegmentedControlIOS/SegmentedControlIOS.ios.js @@ -9,21 +9,21 @@ */ 'use strict'; -var NativeMethodsMixin = require('NativeMethodsMixin'); -var React = require('React'); -var PropTypes = require('prop-types'); -var StyleSheet = require('StyleSheet'); -var ViewPropTypes = require('ViewPropTypes'); +const NativeMethodsMixin = require('NativeMethodsMixin'); +const React = require('React'); +const PropTypes = require('prop-types'); +const StyleSheet = require('StyleSheet'); +const ViewPropTypes = require('ViewPropTypes'); -var createReactClass = require('create-react-class'); -var requireNativeComponent = require('requireNativeComponent'); +const createReactClass = require('create-react-class'); +const requireNativeComponent = require('requireNativeComponent'); type DefaultProps = { values: Array, enabled: boolean, }; -var SEGMENTED_CONTROL_REFERENCE = 'segmentedcontrol'; +const SEGMENTED_CONTROL_REFERENCE = 'segmentedcontrol'; type Event = Object; @@ -47,7 +47,7 @@ type Event = Object; * /> * ```` */ -var SegmentedControlIOS = createReactClass({ +const SegmentedControlIOS = createReactClass({ displayName: 'SegmentedControlIOS', mixins: [NativeMethodsMixin], @@ -117,13 +117,13 @@ var SegmentedControlIOS = createReactClass({ } }); -var styles = StyleSheet.create({ +const styles = StyleSheet.create({ segmentedControl: { height: 28, }, }); -var RCTSegmentedControl = requireNativeComponent( +const RCTSegmentedControl = requireNativeComponent( 'RCTSegmentedControl', SegmentedControlIOS ); diff --git a/Libraries/Components/Slider/Slider.js b/Libraries/Components/Slider/Slider.js index 683789520e56..5a163fe176d1 100644 --- a/Libraries/Components/Slider/Slider.js +++ b/Libraries/Components/Slider/Slider.js @@ -9,18 +9,18 @@ */ 'use strict'; -var Image = require('Image'); -var ColorPropType = require('ColorPropType'); -var NativeMethodsMixin = require('NativeMethodsMixin'); -var ReactNativeViewAttributes = require('ReactNativeViewAttributes'); -var Platform = require('Platform'); -var React = require('React'); -var PropTypes = require('prop-types'); -var StyleSheet = require('StyleSheet'); -var ViewPropTypes = require('ViewPropTypes'); +const Image = require('Image'); +const ColorPropType = require('ColorPropType'); +const NativeMethodsMixin = require('NativeMethodsMixin'); +const ReactNativeViewAttributes = require('ReactNativeViewAttributes'); +const Platform = require('Platform'); +const React = require('React'); +const PropTypes = require('prop-types'); +const StyleSheet = require('StyleSheet'); +const ViewPropTypes = require('ViewPropTypes'); -var createReactClass = require('create-react-class'); -var requireNativeComponent = require('requireNativeComponent'); +const createReactClass = require('create-react-class'); +const requireNativeComponent = require('requireNativeComponent'); type Event = Object; @@ -84,7 +84,7 @@ type Event = Object; *``` * */ -var Slider = createReactClass({ +const Slider = createReactClass({ displayName: 'Slider', mixins: [NativeMethodsMixin], diff --git a/Libraries/Components/StaticRenderer.js b/Libraries/Components/StaticRenderer.js index d5474e943bcc..777fe900e120 100644 --- a/Libraries/Components/StaticRenderer.js +++ b/Libraries/Components/StaticRenderer.js @@ -9,9 +9,9 @@ */ 'use strict'; -var React = require('React'); +const React = require('React'); -var PropTypes = require('prop-types'); +const PropTypes = require('prop-types'); class StaticRenderer extends React.Component<{ shouldUpdate: boolean, diff --git a/Libraries/Components/Subscribable.js b/Libraries/Components/Subscribable.js index cc665ef98f78..6825acd02f70 100644 --- a/Libraries/Components/Subscribable.js +++ b/Libraries/Components/Subscribable.js @@ -19,7 +19,7 @@ import type EventEmitter from 'EventEmitter'; * React Core */ -var Subscribable = {}; +const Subscribable = {}; Subscribable.Mixin = { diff --git a/Libraries/Components/Switch/Switch.js b/Libraries/Components/Switch/Switch.js index 545b29b271f0..e88272dacfa1 100644 --- a/Libraries/Components/Switch/Switch.js +++ b/Libraries/Components/Switch/Switch.js @@ -9,16 +9,16 @@ */ 'use strict'; -var ColorPropType = require('ColorPropType'); -var NativeMethodsMixin = require('NativeMethodsMixin'); -var Platform = require('Platform'); -var React = require('React'); +const ColorPropType = require('ColorPropType'); +const NativeMethodsMixin = require('NativeMethodsMixin'); +const Platform = require('Platform'); +const React = require('React'); const PropTypes = require('prop-types'); -var StyleSheet = require('StyleSheet'); +const StyleSheet = require('StyleSheet'); const ViewPropTypes = require('ViewPropTypes'); -var createReactClass = require('create-react-class'); -var requireNativeComponent = require('requireNativeComponent'); +const createReactClass = require('create-react-class'); +const requireNativeComponent = require('requireNativeComponent'); type DefaultProps = { value: boolean, @@ -36,7 +36,7 @@ type DefaultProps = { * @keyword checkbox * @keyword toggle */ -var Switch = createReactClass({ +const Switch = createReactClass({ displayName: 'Switch', propTypes: { ...ViewPropTypes, @@ -98,7 +98,7 @@ var Switch = createReactClass({ }, render: function() { - var props = {...this.props}; + const props = {...this.props}; props.onStartShouldSetResponder = () => true; props.onResponderTerminationRequest = () => false; if (Platform.OS === 'android') { @@ -122,7 +122,7 @@ var Switch = createReactClass({ }, }); -var styles = StyleSheet.create({ +const styles = StyleSheet.create({ rctSwitchIOS: { height: 31, width: 51, diff --git a/Libraries/Components/TabBarIOS/TabBarIOS.ios.js b/Libraries/Components/TabBarIOS/TabBarIOS.ios.js index 2e838b097df3..bfd180823347 100644 --- a/Libraries/Components/TabBarIOS/TabBarIOS.ios.js +++ b/Libraries/Components/TabBarIOS/TabBarIOS.ios.js @@ -9,14 +9,14 @@ */ 'use strict'; -var ColorPropType = require('ColorPropType'); -var React = require('React'); +const ColorPropType = require('ColorPropType'); +const React = require('React'); const PropTypes = require('prop-types'); -var StyleSheet = require('StyleSheet'); -var TabBarItemIOS = require('TabBarItemIOS'); +const StyleSheet = require('StyleSheet'); +const TabBarItemIOS = require('TabBarItemIOS'); const ViewPropTypes = require('ViewPropTypes'); -var requireNativeComponent = require('requireNativeComponent'); +const requireNativeComponent = require('requireNativeComponent'); import type {StyleObj} from 'StyleSheetTypes'; import type {ViewProps} from 'ViewPropTypes'; @@ -92,12 +92,12 @@ class TabBarIOS extends React.Component ); } else { - var children = props.children; - var childCount = 0; + let children = props.children; + let childCount = 0; React.Children.forEach(children, () => ++childCount); invariant( !(props.value && childCount), @@ -797,7 +797,7 @@ const TextInput = createReactClass({ }, _renderIOS: function() { - var props = Object.assign({}, this.props); + const props = Object.assign({}, this.props); props.style = [this.props.style]; if (props.selection && props.selection.end == null) { @@ -857,8 +857,8 @@ const TextInput = createReactClass({ /* $FlowFixMe(>=0.53.0 site=react_native_fb,react_native_oss) This comment * suppresses an error when upgrading Flow's support for React. To see the * error delete this comment and run Flow. */ - var children = this.props.children; - var childCount = 0; + let children = this.props.children; + let childCount = 0; React.Children.forEach(children, () => ++childCount); invariant( !(this.props.value && childCount), @@ -932,7 +932,7 @@ const TextInput = createReactClass({ }); } - var text = event.nativeEvent.text; + const text = event.nativeEvent.text; this.props.onChange && this.props.onChange(event); this.props.onChangeText && this.props.onChangeText(text); @@ -1016,7 +1016,7 @@ const TextInput = createReactClass({ }, }); -var styles = StyleSheet.create({ +const styles = StyleSheet.create({ multilineInput: { // This default top inset makes RCTMultilineTextInputView seem as close as possible // to single-line RCTSinglelineTextInputView defaults, using the system defaults diff --git a/Libraries/Components/TextInput/TextInputState.js b/Libraries/Components/TextInput/TextInputState.js index 46524070fe21..afcca82bf320 100644 --- a/Libraries/Components/TextInput/TextInputState.js +++ b/Libraries/Components/TextInput/TextInputState.js @@ -13,10 +13,10 @@ */ 'use strict'; -var Platform = require('Platform'); -var UIManager = require('UIManager'); +const Platform = require('Platform'); +const UIManager = require('UIManager'); -var TextInputState = { +const TextInputState = { /** * Internal state */ diff --git a/Libraries/Components/ToastAndroid/ToastAndroid.android.js b/Libraries/Components/ToastAndroid/ToastAndroid.android.js index 5434126660f3..15a8a597a5b6 100644 --- a/Libraries/Components/ToastAndroid/ToastAndroid.android.js +++ b/Libraries/Components/ToastAndroid/ToastAndroid.android.js @@ -10,7 +10,7 @@ 'use strict'; -var RCTToastAndroid = require('NativeModules').ToastAndroid; +const RCTToastAndroid = require('NativeModules').ToastAndroid; /** * This exposes the native ToastAndroid module as a JS module. This has a function 'show' @@ -33,7 +33,7 @@ var RCTToastAndroid = require('NativeModules').ToastAndroid; * ``` */ -var ToastAndroid = { +const ToastAndroid = { // Toast duration constants SHORT: RCTToastAndroid.SHORT, diff --git a/Libraries/Components/ToastAndroid/ToastAndroid.ios.js b/Libraries/Components/ToastAndroid/ToastAndroid.ios.js index b44f812ecff0..83db0cfa82ca 100644 --- a/Libraries/Components/ToastAndroid/ToastAndroid.ios.js +++ b/Libraries/Components/ToastAndroid/ToastAndroid.ios.js @@ -9,9 +9,9 @@ */ 'use strict'; -var warning = require('fbjs/lib/warning'); +const warning = require('fbjs/lib/warning'); -var ToastAndroid = { +const ToastAndroid = { show: function ( message: string, diff --git a/Libraries/Components/ToolbarAndroid/ToolbarAndroid.android.js b/Libraries/Components/ToolbarAndroid/ToolbarAndroid.android.js index 941d1432855a..1d845e5b65ba 100644 --- a/Libraries/Components/ToolbarAndroid/ToolbarAndroid.android.js +++ b/Libraries/Components/ToolbarAndroid/ToolbarAndroid.android.js @@ -9,20 +9,20 @@ 'use strict'; -var Image = require('Image'); -var NativeMethodsMixin = require('NativeMethodsMixin'); -var React = require('React'); -var PropTypes = require('prop-types'); -var ReactNativeViewAttributes = require('ReactNativeViewAttributes'); -var UIManager = require('UIManager'); -var ViewPropTypes = require('ViewPropTypes'); -var ColorPropType = require('ColorPropType'); +const Image = require('Image'); +const NativeMethodsMixin = require('NativeMethodsMixin'); +const React = require('React'); +const PropTypes = require('prop-types'); +const ReactNativeViewAttributes = require('ReactNativeViewAttributes'); +const UIManager = require('UIManager'); +const ViewPropTypes = require('ViewPropTypes'); +const ColorPropType = require('ColorPropType'); -var createReactClass = require('create-react-class'); -var requireNativeComponent = require('requireNativeComponent'); -var resolveAssetSource = require('resolveAssetSource'); +const createReactClass = require('create-react-class'); +const requireNativeComponent = require('requireNativeComponent'); +const resolveAssetSource = require('resolveAssetSource'); -var optionalImageSource = PropTypes.oneOfType([ +const optionalImageSource = PropTypes.oneOfType([ Image.propTypes.source, // Image.propTypes.source is required but we want it to be optional, so we OR // it with a nullable propType. @@ -64,7 +64,7 @@ var optionalImageSource = PropTypes.oneOfType([ * * [0]: https://developer.android.com/reference/android/support/v7/widget/Toolbar.html */ -var ToolbarAndroid = createReactClass({ +const ToolbarAndroid = createReactClass({ displayName: 'ToolbarAndroid', mixins: [NativeMethodsMixin], @@ -162,7 +162,7 @@ var ToolbarAndroid = createReactClass({ }, render: function() { - var nativeProps = { + const nativeProps = { ...this.props, }; if (this.props.logo) { @@ -175,9 +175,9 @@ var ToolbarAndroid = createReactClass({ nativeProps.overflowIcon = resolveAssetSource(this.props.overflowIcon); } if (this.props.actions) { - var nativeActions = []; - for (var i = 0; i < this.props.actions.length; i++) { - var action = { + const nativeActions = []; + for (let i = 0; i < this.props.actions.length; i++) { + const action = { ...this.props.actions[i], }; if (action.icon) { @@ -195,7 +195,7 @@ var ToolbarAndroid = createReactClass({ }, _onSelect: function(event) { - var position = event.nativeEvent.position; + const position = event.nativeEvent.position; if (position === -1) { this.props.onIconClicked && this.props.onIconClicked(); } else { @@ -204,7 +204,7 @@ var ToolbarAndroid = createReactClass({ }, }); -var NativeToolbar = requireNativeComponent('ToolbarAndroid', ToolbarAndroid, { +const NativeToolbar = requireNativeComponent('ToolbarAndroid', ToolbarAndroid, { nativeOnly: { nativeActions: true, } diff --git a/Libraries/Components/Touchable/BoundingDimensions.js b/Libraries/Components/Touchable/BoundingDimensions.js index 73e700ca313b..9bc78e515d8e 100644 --- a/Libraries/Components/Touchable/BoundingDimensions.js +++ b/Libraries/Components/Touchable/BoundingDimensions.js @@ -9,9 +9,9 @@ 'use strict'; -var PooledClass = require('PooledClass'); +const PooledClass = require('PooledClass'); -var twoArgumentPooler = PooledClass.twoArgumentPooler; +const twoArgumentPooler = PooledClass.twoArgumentPooler; /** * PooledClass representing the bounding rectangle of a region. diff --git a/Libraries/Components/Touchable/PooledClass.js b/Libraries/Components/Touchable/PooledClass.js index ad5d874baa9c..a3ae190aa3d2 100644 --- a/Libraries/Components/Touchable/PooledClass.js +++ b/Libraries/Components/Touchable/PooledClass.js @@ -10,7 +10,7 @@ 'use strict'; -var invariant = require('fbjs/lib/invariant'); +const invariant = require('fbjs/lib/invariant'); /** * Static poolers. Several custom versions for each potential number of @@ -19,10 +19,10 @@ var invariant = require('fbjs/lib/invariant'); * the Class itself, not an instance. If any others are needed, simply add them * here, or in their own files. */ -var oneArgumentPooler = function(copyFieldsFrom) { - var Klass = this; +const oneArgumentPooler = function(copyFieldsFrom) { + const Klass = this; if (Klass.instancePool.length) { - var instance = Klass.instancePool.pop(); + const instance = Klass.instancePool.pop(); Klass.call(instance, copyFieldsFrom); return instance; } else { @@ -30,10 +30,10 @@ var oneArgumentPooler = function(copyFieldsFrom) { } }; -var twoArgumentPooler = function(a1, a2) { - var Klass = this; +const twoArgumentPooler = function(a1, a2) { + const Klass = this; if (Klass.instancePool.length) { - var instance = Klass.instancePool.pop(); + const instance = Klass.instancePool.pop(); Klass.call(instance, a1, a2); return instance; } else { @@ -41,10 +41,10 @@ var twoArgumentPooler = function(a1, a2) { } }; -var threeArgumentPooler = function(a1, a2, a3) { - var Klass = this; +const threeArgumentPooler = function(a1, a2, a3) { + const Klass = this; if (Klass.instancePool.length) { - var instance = Klass.instancePool.pop(); + const instance = Klass.instancePool.pop(); Klass.call(instance, a1, a2, a3); return instance; } else { @@ -52,10 +52,10 @@ var threeArgumentPooler = function(a1, a2, a3) { } }; -var fourArgumentPooler = function(a1, a2, a3, a4) { - var Klass = this; +const fourArgumentPooler = function(a1, a2, a3, a4) { + const Klass = this; if (Klass.instancePool.length) { - var instance = Klass.instancePool.pop(); + const instance = Klass.instancePool.pop(); Klass.call(instance, a1, a2, a3, a4); return instance; } else { @@ -63,8 +63,8 @@ var fourArgumentPooler = function(a1, a2, a3, a4) { } }; -var standardReleaser = function(instance) { - var Klass = this; +const standardReleaser = function(instance) { + const Klass = this; invariant( instance instanceof Klass, 'Trying to release an instance into a pool of a different type.', @@ -75,8 +75,8 @@ var standardReleaser = function(instance) { } }; -var DEFAULT_POOL_SIZE = 10; -var DEFAULT_POOLER = oneArgumentPooler; +const DEFAULT_POOL_SIZE = 10; +const DEFAULT_POOLER = oneArgumentPooler; type Pooler = any; @@ -89,7 +89,7 @@ type Pooler = any; * @param {Function} CopyConstructor Constructor that can be used to reset. * @param {Function} pooler Customizable pooler. */ -var addPoolingTo = function( +const addPoolingTo = function( CopyConstructor: Class, pooler: Pooler, ): Class & { @@ -100,7 +100,7 @@ var addPoolingTo = function( } { // Casting as any so that flow ignores the actual implementation and trusts // it to match the type we declared - var NewKlass = (CopyConstructor: any); + const NewKlass = (CopyConstructor: any); NewKlass.instancePool = []; NewKlass.getPooled = pooler || DEFAULT_POOLER; if (!NewKlass.poolSize) { @@ -110,7 +110,7 @@ var addPoolingTo = function( return NewKlass; }; -var PooledClass = { +const PooledClass = { addPoolingTo: addPoolingTo, oneArgumentPooler: (oneArgumentPooler: Pooler), twoArgumentPooler: (twoArgumentPooler: Pooler), diff --git a/Libraries/Components/Touchable/Position.js b/Libraries/Components/Touchable/Position.js index 229e791fb927..572d1132f038 100644 --- a/Libraries/Components/Touchable/Position.js +++ b/Libraries/Components/Touchable/Position.js @@ -9,9 +9,9 @@ 'use strict'; -var PooledClass = require('PooledClass'); +const PooledClass = require('PooledClass'); -var twoArgumentPooler = PooledClass.twoArgumentPooler; +const twoArgumentPooler = PooledClass.twoArgumentPooler; /** * Position does not expose methods for construction via an `HTMLDOMElement`, diff --git a/Libraries/Components/Touchable/Touchable.js b/Libraries/Components/Touchable/Touchable.js index ff63195b089a..9bfa38c6870a 100644 --- a/Libraries/Components/Touchable/Touchable.js +++ b/Libraries/Components/Touchable/Touchable.js @@ -110,7 +110,7 @@ const normalizeColor = require('normalizeColor'); /** * Touchable states. */ -var States = keyMirror({ +const States = keyMirror({ NOT_RESPONDER: null, // Not the responder RESPONDER_INACTIVE_PRESS_IN: null, // Responder, inactive, in the `PressRect` RESPONDER_INACTIVE_PRESS_OUT: null, // Responder, inactive, out of `PressRect` @@ -124,7 +124,7 @@ var States = keyMirror({ /** * Quick lookup map for states that are considered to be "active" */ -var IsActive = { +const IsActive = { RESPONDER_ACTIVE_PRESS_OUT: true, RESPONDER_ACTIVE_PRESS_IN: true }; @@ -133,20 +133,20 @@ var IsActive = { * Quick lookup for states that are considered to be "pressing" and are * therefore eligible to result in a "selection" if the press stops. */ -var IsPressingIn = { +const IsPressingIn = { RESPONDER_INACTIVE_PRESS_IN: true, RESPONDER_ACTIVE_PRESS_IN: true, RESPONDER_ACTIVE_LONG_PRESS_IN: true, }; -var IsLongPressingIn = { +const IsLongPressingIn = { RESPONDER_ACTIVE_LONG_PRESS_IN: true, }; /** * Inputs to the state machine. */ -var Signals = keyMirror({ +const Signals = keyMirror({ DELAY: null, RESPONDER_GRANT: null, RESPONDER_RELEASE: null, @@ -159,7 +159,7 @@ var Signals = keyMirror({ /** * Mapping from States x Signals => States */ -var Transitions = { +const Transitions = { NOT_RESPONDER: { DELAY: States.ERROR, RESPONDER_GRANT: States.RESPONDER_INACTIVE_PRESS_IN, @@ -237,15 +237,15 @@ var Transitions = { // ==== Typical Constants for integrating into UI components ==== // var HIT_EXPAND_PX = 20; // var HIT_VERT_OFFSET_PX = 10; -var HIGHLIGHT_DELAY_MS = 130; +const HIGHLIGHT_DELAY_MS = 130; -var PRESS_EXPAND_PX = 20; +const PRESS_EXPAND_PX = 20; -var LONG_PRESS_THRESHOLD = 500; +const LONG_PRESS_THRESHOLD = 500; -var LONG_PRESS_DELAY_MS = LONG_PRESS_THRESHOLD - HIGHLIGHT_DELAY_MS; +const LONG_PRESS_DELAY_MS = LONG_PRESS_THRESHOLD - HIGHLIGHT_DELAY_MS; -var LONG_PRESS_ALLOWED_MOVEMENT = 10; +const LONG_PRESS_ALLOWED_MOVEMENT = 10; // Default amount "active" region protrudes beyond box @@ -313,7 +313,7 @@ var LONG_PRESS_ALLOWED_MOVEMENT = 10; * * @lends Touchable.prototype */ -var TouchableMixin = { +const TouchableMixin = { componentDidMount: function() { if (!Platform.isTVOS) { return; @@ -321,7 +321,7 @@ var TouchableMixin = { this._tvEventHandler = new TVEventHandler(); this._tvEventHandler.enable(this, function(cmp, evt) { - var myTag = ReactNative.findNodeHandle(cmp); + const myTag = ReactNative.findNodeHandle(cmp); evt.dispatchConfig = {}; if (myTag === evt.tag) { if (evt.eventType === 'focus') { @@ -389,7 +389,7 @@ var TouchableMixin = { * */ touchableHandleResponderGrant: function(e) { - var dispatchID = e.currentTarget; + const dispatchID = e.currentTarget; // Since e is used in a callback invoked on another event loop // (as in setTimeout etc), we need to call e.persist() on the // event to make sure it doesn't get reused in the event object pool. @@ -401,7 +401,7 @@ var TouchableMixin = { this.state.touchable.touchState = States.NOT_RESPONDER; this.state.touchable.responderID = dispatchID; this._receiveSignal(Signals.RESPONDER_GRANT, e); - var delayMS = + let delayMS = this.touchableGetHighlightDelayMS !== undefined ? Math.max(this.touchableGetHighlightDelayMS(), 0) : HIGHLIGHT_DELAY_MS; delayMS = isNaN(delayMS) ? HIGHLIGHT_DELAY_MS : delayMS; @@ -414,7 +414,7 @@ var TouchableMixin = { this._handleDelay(e); } - var longDelayMS = + let longDelayMS = this.touchableGetLongPressDelayMS !== undefined ? Math.max(this.touchableGetLongPressDelayMS(), 10) : LONG_PRESS_DELAY_MS; longDelayMS = isNaN(longDelayMS) ? LONG_PRESS_DELAY_MS : longDelayMS; @@ -453,9 +453,9 @@ var TouchableMixin = { return; } - var positionOnActivate = this.state.touchable.positionOnActivate; - var dimensionsOnActivate = this.state.touchable.dimensionsOnActivate; - var pressRectOffset = this.touchableGetPressRectOffset ? + const positionOnActivate = this.state.touchable.positionOnActivate; + const dimensionsOnActivate = this.state.touchable.dimensionsOnActivate; + const pressRectOffset = this.touchableGetPressRectOffset ? this.touchableGetPressRectOffset() : { left: PRESS_EXPAND_PX, right: PRESS_EXPAND_PX, @@ -463,12 +463,12 @@ var TouchableMixin = { bottom: PRESS_EXPAND_PX }; - var pressExpandLeft = pressRectOffset.left; - var pressExpandTop = pressRectOffset.top; - var pressExpandRight = pressRectOffset.right; - var pressExpandBottom = pressRectOffset.bottom; + let pressExpandLeft = pressRectOffset.left; + let pressExpandTop = pressRectOffset.top; + let pressExpandRight = pressRectOffset.right; + let pressExpandBottom = pressRectOffset.bottom; - var hitSlop = this.touchableGetHitSlop ? + const hitSlop = this.touchableGetHitSlop ? this.touchableGetHitSlop() : null; if (hitSlop) { @@ -478,18 +478,18 @@ var TouchableMixin = { pressExpandBottom += hitSlop.bottom; } - var touch = TouchEventUtils.extractSingleTouch(e.nativeEvent); - var pageX = touch && touch.pageX; - var pageY = touch && touch.pageY; + const touch = TouchEventUtils.extractSingleTouch(e.nativeEvent); + const pageX = touch && touch.pageX; + const pageY = touch && touch.pageY; if (this.pressInLocation) { - var movedDistance = this._getDistanceBetweenPoints(pageX, pageY, this.pressInLocation.pageX, this.pressInLocation.pageY); + const movedDistance = this._getDistanceBetweenPoints(pageX, pageY, this.pressInLocation.pageX, this.pressInLocation.pageY); if (movedDistance > LONG_PRESS_ALLOWED_MOVEMENT) { this._cancelLongPressDelayTimeout(); } } - var isTouchWithinActive = + const isTouchWithinActive = pageX > positionOnActivate.left - pressExpandLeft && pageY > positionOnActivate.top - pressExpandTop && pageX < @@ -502,7 +502,7 @@ var TouchableMixin = { pressExpandBottom; if (isTouchWithinActive) { this._receiveSignal(Signals.ENTER_PRESS_RECT, e); - var curState = this.state.touchable.touchState; + const curState = this.state.touchable.touchState; if (curState === States.RESPONDER_INACTIVE_PRESS_IN) { // fix for t7967420 this._cancelLongPressDelayTimeout(); @@ -620,7 +620,7 @@ var TouchableMixin = { _handleLongDelay: function(e) { this.longPressDelayTimeout = null; - var curState = this.state.touchable.touchState; + const curState = this.state.touchable.touchState; if (curState !== States.RESPONDER_ACTIVE_PRESS_IN && curState !== States.RESPONDER_ACTIVE_LONG_PRESS_IN) { console.error('Attempted to transition from state `' + curState + '` to `' + @@ -640,9 +640,9 @@ var TouchableMixin = { * @sideeffects */ _receiveSignal: function(signal, e) { - var responderID = this.state.touchable.responderID; - var curState = this.state.touchable.touchState; - var nextState = Transitions[curState] && Transitions[curState][signal]; + const responderID = this.state.touchable.responderID; + const curState = this.state.touchable.touchState; + const nextState = Transitions[curState] && Transitions[curState][signal]; if (!responderID && signal === Signals.RESPONDER_RELEASE) { return; } @@ -675,17 +675,17 @@ var TouchableMixin = { }, _savePressInLocation: function(e) { - var touch = TouchEventUtils.extractSingleTouch(e.nativeEvent); - var pageX = touch && touch.pageX; - var pageY = touch && touch.pageY; - var locationX = touch && touch.locationX; - var locationY = touch && touch.locationY; + const touch = TouchEventUtils.extractSingleTouch(e.nativeEvent); + const pageX = touch && touch.pageX; + const pageY = touch && touch.pageY; + const locationX = touch && touch.locationX; + const locationY = touch && touch.locationY; this.pressInLocation = {pageX, pageY, locationX, locationY}; }, _getDistanceBetweenPoints: function (aX, aY, bX, bY) { - var deltaX = aX - bX; - var deltaY = aY - bY; + const deltaX = aX - bX; + const deltaY = aY - bY; return Math.sqrt(deltaX * deltaX + deltaY * deltaY); }, @@ -701,10 +701,10 @@ var TouchableMixin = { * @sideeffects */ _performSideEffectsForTransition: function(curState, nextState, signal, e) { - var curIsHighlight = this._isHighlight(curState); - var newIsHighlight = this._isHighlight(nextState); + const curIsHighlight = this._isHighlight(curState); + const newIsHighlight = this._isHighlight(nextState); - var isFinalSignal = + const isFinalSignal = signal === Signals.RESPONDER_TERMINATED || signal === Signals.RESPONDER_RELEASE; @@ -727,14 +727,14 @@ var TouchableMixin = { } if (IsPressingIn[curState] && signal === Signals.RESPONDER_RELEASE) { - var hasLongPressHandler = !!this.props.onLongPress; - var pressIsLongButStillCallOnPress = + const hasLongPressHandler = !!this.props.onLongPress; + const pressIsLongButStillCallOnPress = IsLongPressingIn[curState] && ( // We *are* long pressing.. - !hasLongPressHandler || // But either has no long handler - !this.touchableLongPressCancelsPress() // or we're told to ignore it. + (// But either has no long handler + !hasLongPressHandler || !this.touchableLongPressCancelsPress()) // or we're told to ignore it. ); - var shouldInvokePress = !IsLongPressingIn[curState] || pressIsLongButStillCallOnPress; + const shouldInvokePress = !IsLongPressingIn[curState] || pressIsLongButStillCallOnPress; if (shouldInvokePress && this.touchableHandlePress) { if (!newIsHighlight && !curIsHighlight) { // we never highlighted because of delay, but we should highlight now @@ -768,7 +768,7 @@ var TouchableMixin = { }; -var Touchable = { +const Touchable = { Mixin: TouchableMixin, TOUCH_TARGET_DEBUG: false, // Highlights all touchable targets. Toggle with Inspector. /** diff --git a/Libraries/Components/Touchable/TouchableBounce.js b/Libraries/Components/Touchable/TouchableBounce.js index 2f0949b6ff22..2afef30637b5 100644 --- a/Libraries/Components/Touchable/TouchableBounce.js +++ b/Libraries/Components/Touchable/TouchableBounce.js @@ -10,13 +10,13 @@ */ 'use strict'; -var Animated = require('Animated'); -var EdgeInsetsPropType = require('EdgeInsetsPropType'); -var NativeMethodsMixin = require('NativeMethodsMixin'); -var React = require('React'); -var createReactClass = require('create-react-class'); -var PropTypes = require('prop-types'); -var Touchable = require('Touchable'); +const Animated = require('Animated'); +const EdgeInsetsPropType = require('EdgeInsetsPropType'); +const NativeMethodsMixin = require('NativeMethodsMixin'); +const React = require('React'); +const createReactClass = require('create-react-class'); +const PropTypes = require('prop-types'); +const Touchable = require('Touchable'); type Event = Object; @@ -25,7 +25,7 @@ type State = { scale: Animated.Value, }; -var PRESS_RETENTION_OFFSET = {top: 20, left: 20, right: 20, bottom: 30}; +const PRESS_RETENTION_OFFSET = {top: 20, left: 20, right: 20, bottom: 30}; /** * Example of using the `TouchableMixin` to play well with other responder @@ -34,7 +34,7 @@ var PRESS_RETENTION_OFFSET = {top: 20, left: 20, right: 20, bottom: 30}; * `TouchableMixin` expects us to implement some abstract methods to handle * interesting interactions such as `handleTouchablePress`. */ -var TouchableBounce = createReactClass({ +const TouchableBounce = createReactClass({ displayName: 'TouchableBounce', mixins: [Touchable.Mixin, NativeMethodsMixin], @@ -115,7 +115,7 @@ var TouchableBounce = createReactClass({ }, touchableHandlePress: function(e: Event) { - var onPressWithCompletion = this.props.onPressWithCompletion; + const onPressWithCompletion = this.props.onPressWithCompletion; if (onPressWithCompletion) { onPressWithCompletion(() => { this.state.scale.setValue(0.93); diff --git a/Libraries/Components/Touchable/TouchableNativeFeedback.android.js b/Libraries/Components/Touchable/TouchableNativeFeedback.android.js index effad3764275..c4808b9bef23 100644 --- a/Libraries/Components/Touchable/TouchableNativeFeedback.android.js +++ b/Libraries/Components/Touchable/TouchableNativeFeedback.android.js @@ -8,37 +8,37 @@ */ 'use strict'; -var Platform = require('Platform'); -var React = require('React'); -var PropTypes = require('prop-types'); -var ReactNative = require('ReactNative'); -var Touchable = require('Touchable'); -var TouchableWithoutFeedback = require('TouchableWithoutFeedback'); -var UIManager = require('UIManager'); - -var createReactClass = require('create-react-class'); -var ensurePositiveDelayProps = require('ensurePositiveDelayProps'); -var processColor = require('processColor'); - -var rippleBackgroundPropType = PropTypes.shape({ +const Platform = require('Platform'); +const React = require('React'); +const PropTypes = require('prop-types'); +const ReactNative = require('ReactNative'); +const Touchable = require('Touchable'); +const TouchableWithoutFeedback = require('TouchableWithoutFeedback'); +const UIManager = require('UIManager'); + +const createReactClass = require('create-react-class'); +const ensurePositiveDelayProps = require('ensurePositiveDelayProps'); +const processColor = require('processColor'); + +const rippleBackgroundPropType = PropTypes.shape({ type: PropTypes.oneOf(['RippleAndroid']), color: PropTypes.number, borderless: PropTypes.bool, }); -var themeAttributeBackgroundPropType = PropTypes.shape({ +const themeAttributeBackgroundPropType = PropTypes.shape({ type: PropTypes.oneOf(['ThemeAttrAndroid']), attribute: PropTypes.string.isRequired, }); -var backgroundPropType = PropTypes.oneOfType([ +const backgroundPropType = PropTypes.oneOfType([ rippleBackgroundPropType, themeAttributeBackgroundPropType, ]); type Event = Object; -var PRESS_RETENTION_OFFSET = {top: 20, left: 20, right: 20, bottom: 30}; +const PRESS_RETENTION_OFFSET = {top: 20, left: 20, right: 20, bottom: 30}; /** * A wrapper for making views respond properly to touches (Android only). @@ -69,7 +69,7 @@ var PRESS_RETENTION_OFFSET = {top: 20, left: 20, right: 20, bottom: 30}; * ``` */ -var TouchableNativeFeedback = createReactClass({ +const TouchableNativeFeedback = createReactClass({ displayName: 'TouchableNativeFeedback', propTypes: { ...TouchableWithoutFeedback.propTypes, @@ -233,7 +233,7 @@ var TouchableNativeFeedback = createReactClass({ this.props.useForeground && TouchableNativeFeedback.canUseNativeForeground() ? 'nativeForegroundAndroid' : 'nativeBackgroundAndroid'; - var childProps = { + const childProps = { ...child.props, [drawableProp]: this.props.background, accessible: this.props.accessible !== false, diff --git a/Libraries/Components/Touchable/TouchableNativeFeedback.ios.js b/Libraries/Components/Touchable/TouchableNativeFeedback.ios.js index c624cb7fdbf0..e898d20ab64a 100644 --- a/Libraries/Components/Touchable/TouchableNativeFeedback.ios.js +++ b/Libraries/Components/Touchable/TouchableNativeFeedback.ios.js @@ -9,10 +9,10 @@ 'use strict'; -var React = require('React'); -var StyleSheet = require('StyleSheet'); -var Text = require('Text'); -var View = require('View'); +const React = require('React'); +const StyleSheet = require('StyleSheet'); +const Text = require('Text'); +const View = require('View'); class DummyTouchableNativeFeedback extends React.Component { static SelectableBackground = () => ({}); @@ -29,7 +29,7 @@ class DummyTouchableNativeFeedback extends React.Component { } } -var styles = StyleSheet.create({ +const styles = StyleSheet.create({ container: { height: 100, width: 300, diff --git a/Libraries/Components/Touchable/TouchableOpacity.js b/Libraries/Components/Touchable/TouchableOpacity.js index e8d6ca171abc..abb77ac95a38 100644 --- a/Libraries/Components/Touchable/TouchableOpacity.js +++ b/Libraries/Components/Touchable/TouchableOpacity.js @@ -11,22 +11,22 @@ // Note (avik): add @flow when Flow supports spread properties in propTypes -var Animated = require('Animated'); -var Easing = require('Easing'); -var NativeMethodsMixin = require('NativeMethodsMixin'); -var React = require('React'); -var PropTypes = require('prop-types'); -var TimerMixin = require('react-timer-mixin'); -var Touchable = require('Touchable'); -var TouchableWithoutFeedback = require('TouchableWithoutFeedback'); +const Animated = require('Animated'); +const Easing = require('Easing'); +const NativeMethodsMixin = require('NativeMethodsMixin'); +const React = require('React'); +const PropTypes = require('prop-types'); +const TimerMixin = require('react-timer-mixin'); +const Touchable = require('Touchable'); +const TouchableWithoutFeedback = require('TouchableWithoutFeedback'); -var createReactClass = require('create-react-class'); -var ensurePositiveDelayProps = require('ensurePositiveDelayProps'); -var flattenStyle = require('flattenStyle'); +const createReactClass = require('create-react-class'); +const ensurePositiveDelayProps = require('ensurePositiveDelayProps'); +const flattenStyle = require('flattenStyle'); type Event = Object; -var PRESS_RETENTION_OFFSET = {top: 20, left: 20, right: 20, bottom: 30}; +const PRESS_RETENTION_OFFSET = {top: 20, left: 20, right: 20, bottom: 30}; /** * A wrapper for making views respond properly to touches. @@ -116,7 +116,7 @@ var PRESS_RETENTION_OFFSET = {top: 20, left: 20, right: 20, bottom: 30}; * ``` * */ -var TouchableOpacity = createReactClass({ +const TouchableOpacity = createReactClass({ displayName: 'TouchableOpacity', mixins: [TimerMixin, Touchable.Mixin, NativeMethodsMixin], @@ -234,7 +234,7 @@ var TouchableOpacity = createReactClass({ }, _getChildStyleOpacityWithDefault: function() { - var childStyle = flattenStyle(this.props.style) || {}; + const childStyle = flattenStyle(this.props.style) || {}; return childStyle.opacity == undefined ? 1 : childStyle.opacity; }, diff --git a/Libraries/Components/Touchable/ensureComponentIsNative.js b/Libraries/Components/Touchable/ensureComponentIsNative.js index de01d017716b..63c1e8bf8d02 100644 --- a/Libraries/Components/Touchable/ensureComponentIsNative.js +++ b/Libraries/Components/Touchable/ensureComponentIsNative.js @@ -9,9 +9,9 @@ */ 'use strict'; -var invariant = require('fbjs/lib/invariant'); +const invariant = require('fbjs/lib/invariant'); -var ensureComponentIsNative = function(component: any) { +const ensureComponentIsNative = function(component: any) { invariant( component && typeof component.setNativeProps === 'function', 'Touchable child must either be native or forward setNativeProps to a ' + diff --git a/Libraries/Components/Touchable/ensurePositiveDelayProps.js b/Libraries/Components/Touchable/ensurePositiveDelayProps.js index 85f60091f604..51b97f5ca42e 100644 --- a/Libraries/Components/Touchable/ensurePositiveDelayProps.js +++ b/Libraries/Components/Touchable/ensurePositiveDelayProps.js @@ -9,9 +9,9 @@ */ 'use strict'; -var invariant = require('fbjs/lib/invariant'); +const invariant = require('fbjs/lib/invariant'); -var ensurePositiveDelayProps = function(props: any) { +const ensurePositiveDelayProps = function(props: any) { invariant( !(props.delayPressIn < 0 || props.delayPressOut < 0 || props.delayLongPress < 0), diff --git a/Libraries/Components/View/PlatformViewPropTypes.ios.js b/Libraries/Components/View/PlatformViewPropTypes.ios.js index 2394a51746d1..c3e4f6c6100d 100644 --- a/Libraries/Components/View/PlatformViewPropTypes.ios.js +++ b/Libraries/Components/View/PlatformViewPropTypes.ios.js @@ -10,7 +10,7 @@ const Platform = require('Platform'); -var TVViewPropTypes = {}; +let TVViewPropTypes = {}; if (Platform.isTVOS) { TVViewPropTypes = require('TVViewPropTypes'); } diff --git a/Libraries/Components/View/ReactNativeStyleAttributes.js b/Libraries/Components/View/ReactNativeStyleAttributes.js index 462e9b7caeb6..a9441cad97f1 100644 --- a/Libraries/Components/View/ReactNativeStyleAttributes.js +++ b/Libraries/Components/View/ReactNativeStyleAttributes.js @@ -10,19 +10,19 @@ 'use strict'; -var ImageStylePropTypes = require('ImageStylePropTypes'); -var TextStylePropTypes = require('TextStylePropTypes'); -var ViewStylePropTypes = require('ViewStylePropTypes'); +const ImageStylePropTypes = require('ImageStylePropTypes'); +const TextStylePropTypes = require('TextStylePropTypes'); +const ViewStylePropTypes = require('ViewStylePropTypes'); /* $FlowFixMe(>=0.54.0 site=react_native_oss) This comment suppresses an error * found when Flow v0.54 was deployed. To see the error delete this comment and * run Flow. */ -var keyMirror = require('fbjs/lib/keyMirror'); -var processColor = require('processColor'); -var processTransform = require('processTransform'); -var sizesDiffer = require('sizesDiffer'); +const keyMirror = require('fbjs/lib/keyMirror'); +const processColor = require('processColor'); +const processTransform = require('processTransform'); +const sizesDiffer = require('sizesDiffer'); -var ReactNativeStyleAttributes = { +const ReactNativeStyleAttributes = { ...keyMirror(ViewStylePropTypes), ...keyMirror(TextStylePropTypes), ...keyMirror(ImageStylePropTypes), @@ -31,7 +31,7 @@ var ReactNativeStyleAttributes = { ReactNativeStyleAttributes.transform = { process: processTransform }; ReactNativeStyleAttributes.shadowOffset = { diff: sizesDiffer }; -var colorAttributes = { process: processColor }; +const colorAttributes = { process: processColor }; ReactNativeStyleAttributes.backgroundColor = colorAttributes; ReactNativeStyleAttributes.borderBottomColor = colorAttributes; ReactNativeStyleAttributes.borderColor = colorAttributes; diff --git a/Libraries/Components/View/ReactNativeViewAttributes.js b/Libraries/Components/View/ReactNativeViewAttributes.js index 64f81c719669..26fb368aceb9 100644 --- a/Libraries/Components/View/ReactNativeViewAttributes.js +++ b/Libraries/Components/View/ReactNativeViewAttributes.js @@ -9,9 +9,9 @@ */ 'use strict'; -var ReactNativeStyleAttributes = require('ReactNativeStyleAttributes'); +const ReactNativeStyleAttributes = require('ReactNativeStyleAttributes'); -var ReactNativeViewAttributes = {}; +const ReactNativeViewAttributes = {}; ReactNativeViewAttributes.UIView = { pointerEvents: true, diff --git a/Libraries/Components/View/ViewStylePropTypes.js b/Libraries/Components/View/ViewStylePropTypes.js index 6e9c92163b31..c21ce5934ac3 100644 --- a/Libraries/Components/View/ViewStylePropTypes.js +++ b/Libraries/Components/View/ViewStylePropTypes.js @@ -9,16 +9,16 @@ */ 'use strict'; -var ColorPropType = require('ColorPropType'); -var LayoutPropTypes = require('LayoutPropTypes'); -var ReactPropTypes = require('prop-types'); -var ShadowPropTypesIOS = require('ShadowPropTypesIOS'); -var TransformPropTypes = require('TransformPropTypes'); +const ColorPropType = require('ColorPropType'); +const LayoutPropTypes = require('LayoutPropTypes'); +const ReactPropTypes = require('prop-types'); +const ShadowPropTypesIOS = require('ShadowPropTypesIOS'); +const TransformPropTypes = require('TransformPropTypes'); /** * Warning: Some of these properties may not be supported in all releases. */ -var ViewStylePropTypes = { +const ViewStylePropTypes = { ...LayoutPropTypes, ...ShadowPropTypesIOS, ...TransformPropTypes, diff --git a/Libraries/Components/ViewPager/ViewPagerAndroid.android.js b/Libraries/Components/ViewPager/ViewPagerAndroid.android.js index bcc1d8609a5f..8463503bd793 100644 --- a/Libraries/Components/ViewPager/ViewPagerAndroid.android.js +++ b/Libraries/Components/ViewPager/ViewPagerAndroid.android.js @@ -9,16 +9,16 @@ */ 'use strict'; -var React = require('React'); -var PropTypes = require('prop-types'); -var ReactNative = require('ReactNative'); -var UIManager = require('UIManager'); -var ViewPropTypes = require('ViewPropTypes'); +const React = require('React'); +const PropTypes = require('prop-types'); +const ReactNative = require('ReactNative'); +const UIManager = require('UIManager'); +const ViewPropTypes = require('ViewPropTypes'); -var dismissKeyboard = require('dismissKeyboard'); -var requireNativeComponent = require('requireNativeComponent'); +const dismissKeyboard = require('dismissKeyboard'); +const requireNativeComponent = require('requireNativeComponent'); -var VIEWPAGER_REF = 'viewPager'; +const VIEWPAGER_REF = 'viewPager'; type Event = Object; @@ -163,7 +163,7 @@ class ViewPagerAndroid extends React.Component<{ if (!child) { return null; } - var newProps = { + const newProps = { ...child.props, style: [child.props.style, { position: 'absolute', @@ -246,6 +246,6 @@ class ViewPagerAndroid extends React.Component<{ } } -var NativeAndroidViewPager = requireNativeComponent('AndroidViewPager', ViewPagerAndroid); +const NativeAndroidViewPager = requireNativeComponent('AndroidViewPager', ViewPagerAndroid); module.exports = ViewPagerAndroid; diff --git a/Libraries/Components/WebView/WebView.android.js b/Libraries/Components/WebView/WebView.android.js index 851378755da4..16f2991df1e7 100644 --- a/Libraries/Components/WebView/WebView.android.js +++ b/Libraries/Components/WebView/WebView.android.js @@ -8,30 +8,30 @@ */ 'use strict'; -var EdgeInsetsPropType = require('EdgeInsetsPropType'); -var ActivityIndicator = require('ActivityIndicator'); -var React = require('React'); -var PropTypes = require('prop-types'); -var ReactNative = require('ReactNative'); -var StyleSheet = require('StyleSheet'); -var UIManager = require('UIManager'); -var View = require('View'); -var ViewPropTypes = require('ViewPropTypes'); - -var deprecatedPropType = require('deprecatedPropType'); -var keyMirror = require('fbjs/lib/keyMirror'); -var requireNativeComponent = require('requireNativeComponent'); -var resolveAssetSource = require('resolveAssetSource'); - -var RCT_WEBVIEW_REF = 'webview'; - -var WebViewState = keyMirror({ +const EdgeInsetsPropType = require('EdgeInsetsPropType'); +const ActivityIndicator = require('ActivityIndicator'); +const React = require('React'); +const PropTypes = require('prop-types'); +const ReactNative = require('ReactNative'); +const StyleSheet = require('StyleSheet'); +const UIManager = require('UIManager'); +const View = require('View'); +const ViewPropTypes = require('ViewPropTypes'); + +const deprecatedPropType = require('deprecatedPropType'); +const keyMirror = require('fbjs/lib/keyMirror'); +const requireNativeComponent = require('requireNativeComponent'); +const resolveAssetSource = require('resolveAssetSource'); + +const RCT_WEBVIEW_REF = 'webview'; + +const WebViewState = keyMirror({ IDLE: null, LOADING: null, ERROR: null, }); -var defaultRenderLoading = () => ( +const defaultRenderLoading = () => ( { - var onLoadStart = this.props.onLoadStart; + const onLoadStart = this.props.onLoadStart; onLoadStart && onLoadStart(event); this.updateNavigationState(event); }; onLoadingError = (event) => { event.persist(); // persist this event because we need to store it - var {onError, onLoadEnd} = this.props; + const {onError, onLoadEnd} = this.props; onError && onError(event); onLoadEnd && onLoadEnd(event); console.warn('Encountered an error loading page', event.nativeEvent); @@ -418,7 +418,7 @@ class WebView extends React.Component { }; onLoadingFinish = (event) => { - var {onLoad, onLoadEnd} = this.props; + const {onLoad, onLoadEnd} = this.props; onLoad && onLoad(event); onLoadEnd && onLoadEnd(event); this.setState({ @@ -428,14 +428,14 @@ class WebView extends React.Component { }; onMessage = (event: Event) => { - var {onMessage} = this.props; + const {onMessage} = this.props; onMessage && onMessage(event); } } -var RCTWebView = requireNativeComponent('RCTWebView', WebView, WebView.extraNativeComponentConfig); +const RCTWebView = requireNativeComponent('RCTWebView', WebView, WebView.extraNativeComponentConfig); -var styles = StyleSheet.create({ +const styles = StyleSheet.create({ container: { flex: 1, }, diff --git a/Libraries/Components/WebView/WebView.ios.js b/Libraries/Components/WebView/WebView.ios.js index e11f8e3851b6..f01cfae537dd 100644 --- a/Libraries/Components/WebView/WebView.ios.js +++ b/Libraries/Components/WebView/WebView.ios.js @@ -9,31 +9,31 @@ */ 'use strict'; -var ActivityIndicator = require('ActivityIndicator'); -var EdgeInsetsPropType = require('EdgeInsetsPropType'); -var React = require('React'); -var PropTypes = require('prop-types'); -var ReactNative = require('ReactNative'); -var StyleSheet = require('StyleSheet'); -var Text = require('Text'); -var UIManager = require('UIManager'); -var View = require('View'); -var ViewPropTypes = require('ViewPropTypes'); -var ScrollView = require('ScrollView'); - -var deprecatedPropType = require('deprecatedPropType'); -var invariant = require('fbjs/lib/invariant'); -var keyMirror = require('fbjs/lib/keyMirror'); -var processDecelerationRate = require('processDecelerationRate'); -var requireNativeComponent = require('requireNativeComponent'); -var resolveAssetSource = require('resolveAssetSource'); - -var RCTWebViewManager = require('NativeModules').WebViewManager; - -var BGWASH = 'rgba(255,255,255,0.8)'; -var RCT_WEBVIEW_REF = 'webview'; - -var WebViewState = keyMirror({ +const ActivityIndicator = require('ActivityIndicator'); +const EdgeInsetsPropType = require('EdgeInsetsPropType'); +const React = require('React'); +const PropTypes = require('prop-types'); +const ReactNative = require('ReactNative'); +const StyleSheet = require('StyleSheet'); +const Text = require('Text'); +const UIManager = require('UIManager'); +const View = require('View'); +const ViewPropTypes = require('ViewPropTypes'); +const ScrollView = require('ScrollView'); + +const deprecatedPropType = require('deprecatedPropType'); +const invariant = require('fbjs/lib/invariant'); +const keyMirror = require('fbjs/lib/keyMirror'); +const processDecelerationRate = require('processDecelerationRate'); +const requireNativeComponent = require('requireNativeComponent'); +const resolveAssetSource = require('resolveAssetSource'); + +const RCTWebViewManager = require('NativeModules').WebViewManager; + +const BGWASH = 'rgba(255,255,255,0.8)'; +const RCT_WEBVIEW_REF = 'webview'; + +const WebViewState = keyMirror({ IDLE: null, LOADING: null, ERROR: null, @@ -67,12 +67,12 @@ const DataDetectorTypes = [ 'all', ]; -var defaultRenderLoading = () => ( +const defaultRenderLoading = () => ( ); -var defaultRenderError = (errorDomain, errorCode, errorDesc) => ( +const defaultRenderError = (errorDomain, errorCode, errorDesc) => ( Error loading page @@ -415,12 +415,12 @@ class WebView extends React.Component { } render() { - var otherView = null; + let otherView = null; if (this.state.viewState === WebViewState.LOADING) { otherView = (this.props.renderLoading || defaultRenderLoading)(); } else if (this.state.viewState === WebViewState.ERROR) { - var errorEvent = this.state.lastErrorEvent; + const errorEvent = this.state.lastErrorEvent; invariant( errorEvent != null, 'lastErrorEvent expected to be non-null' @@ -436,7 +436,7 @@ class WebView extends React.Component { ); } - var webViewStyles = [styles.container, styles.webView, this.props.style]; + const webViewStyles = [styles.container, styles.webView, this.props.style]; if (this.state.viewState === WebViewState.LOADING || this.state.viewState === WebViewState.ERROR) { // if we're in either LOADING or ERROR states, don't show the webView @@ -447,15 +447,15 @@ class WebView extends React.Component { const viewManager = nativeConfig.viewManager || RCTWebViewManager; - var onShouldStartLoadWithRequest = this.props.onShouldStartLoadWithRequest && ((event: Event) => { - var shouldStart = this.props.onShouldStartLoadWithRequest && + const onShouldStartLoadWithRequest = this.props.onShouldStartLoadWithRequest && ((event: Event) => { + const shouldStart = this.props.onShouldStartLoadWithRequest && this.props.onShouldStartLoadWithRequest(event.nativeEvent); viewManager.startLoadWithResult(!!shouldStart, event.nativeEvent.lockIdentifier); }); - var decelerationRate = processDecelerationRate(this.props.decelerationRate); + const decelerationRate = processDecelerationRate(this.props.decelerationRate); - var source = this.props.source || {}; + const source = this.props.source || {}; if (this.props.html) { source.html = this.props.html; } else if (this.props.url) { @@ -466,7 +466,7 @@ class WebView extends React.Component { const NativeWebView = nativeConfig.component || RCTWebView; - var webView = + const webView = { - var onLoadStart = this.props.onLoadStart; + const onLoadStart = this.props.onLoadStart; onLoadStart && onLoadStart(event); this._updateNavigationState(event); }; _onLoadingError = (event: Event) => { event.persist(); // persist this event because we need to store it - var {onError, onLoadEnd} = this.props; + const {onError, onLoadEnd} = this.props; onError && onError(event); onLoadEnd && onLoadEnd(event); console.warn('Encountered an error loading page', event.nativeEvent); @@ -613,7 +613,7 @@ class WebView extends React.Component { }; _onLoadingFinish = (event: Event) => { - var {onLoad, onLoadEnd} = this.props; + const {onLoad, onLoadEnd} = this.props; onLoad && onLoad(event); onLoadEnd && onLoadEnd(event); this.setState({ @@ -623,14 +623,14 @@ class WebView extends React.Component { }; _onMessage = (event: Event) => { - var {onMessage} = this.props; + const {onMessage} = this.props; onMessage && onMessage(event); } } -var RCTWebView = requireNativeComponent('RCTWebView', WebView, WebView.extraNativeComponentConfig); +const RCTWebView = requireNativeComponent('RCTWebView', WebView, WebView.extraNativeComponentConfig); -var styles = StyleSheet.create({ +const styles = StyleSheet.create({ container: { flex: 1, }, From 70a3ececc368a8d0fe4b57b13ac956ad99a637c7 Mon Sep 17 00:00:00 2001 From: Eli White Date: Sat, 3 Mar 2018 15:06:43 -0800 Subject: [PATCH 02/50] Tightening type for flattenStyle Reviewed By: yungsters Differential Revision: D7131703 fbshipit-source-id: d8e37fcd0c743057e04760b1e50f8d879bd2826a --- Libraries/Animated/src/nodes/AnimatedTransform.js | 8 ++++---- Libraries/StyleSheet/flattenStyle.js | 8 +++----- 2 files changed, 7 insertions(+), 9 deletions(-) diff --git a/Libraries/Animated/src/nodes/AnimatedTransform.js b/Libraries/Animated/src/nodes/AnimatedTransform.js index fd5049e9b8d8..48f82f9fe344 100644 --- a/Libraries/Animated/src/nodes/AnimatedTransform.js +++ b/Libraries/Animated/src/nodes/AnimatedTransform.js @@ -15,9 +15,9 @@ const AnimatedWithChildren = require('./AnimatedWithChildren'); const NativeAnimatedHelper = require('../NativeAnimatedHelper'); class AnimatedTransform extends AnimatedWithChildren { - _transforms: Array; + _transforms: $ReadOnlyArray; - constructor(transforms: Array) { + constructor(transforms: $ReadOnlyArray) { super(); this._transforms = transforms; } @@ -34,7 +34,7 @@ class AnimatedTransform extends AnimatedWithChildren { }); } - __getValue(): Array { + __getValue(): $ReadOnlyArray { return this._transforms.map(transform => { const result = {}; for (const key in transform) { @@ -49,7 +49,7 @@ class AnimatedTransform extends AnimatedWithChildren { }); } - __getAnimatedValue(): Array { + __getAnimatedValue(): $ReadOnlyArray { return this._transforms.map(transform => { const result = {}; for (const key in transform) { diff --git a/Libraries/StyleSheet/flattenStyle.js b/Libraries/StyleSheet/flattenStyle.js index 88f839e2885e..21da50972329 100644 --- a/Libraries/StyleSheet/flattenStyle.js +++ b/Libraries/StyleSheet/flattenStyle.js @@ -9,10 +9,9 @@ */ 'use strict'; -var invariant = require('fbjs/lib/invariant'); var ReactNativePropRegistry; -import type { StyleObj } from 'StyleSheetTypes'; +import type { DimensionValue, ColorValue, StyleProp, Style } from 'StyleSheetTypes'; function getStyle(style) { if (ReactNativePropRegistry === undefined) { @@ -24,11 +23,10 @@ function getStyle(style) { return style; } -function flattenStyle(style: ?StyleObj): ?Object { - if (!style) { +function flattenStyle(style: ?StyleProp>): ?Style { + if (style == null) { return undefined; } - invariant(style !== true, 'style may be false but not true'); if (!Array.isArray(style)) { /* $FlowFixMe(>=0.63.0 site=react_native_fb) This comment suppresses an From 498cf7e2d7c6888e5a049c94e9f72f4676d528b7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A9ctor=20Ramos?= Date: Sun, 4 Mar 2018 18:10:29 -0800 Subject: [PATCH 03/50] =?UTF-8?q?Re=C3=ABnable=20iOS=20and=20tvOS=20tests?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Summary: Although the test suites have a handful of failing tests, the jobs themselves do not fail. Let's get these tests back into the fold so that we may track our progress getting these back to a good state. cc dlowder-salesforce Run tests on Circle, and confirm everything is green: https://circleci.com/workflow-run/4dd1a84b-502d-4ad6-aa41-64c768392a6b If you go into the test iOS and test tvOS jobs, you will see that we are collecting test results at the top. These results show the failing individual tests. Closes https://github.com/facebook/react-native/pull/18171 Differential Revision: D7151558 Pulled By: hramos fbshipit-source-id: f105ec8bc97e80ed1b8358cde3f13a1ad3b271c2 --- .circleci/config.yml | 87 +++++++++----------------------------------- scripts/objc-test.sh | 6 --- 2 files changed, 18 insertions(+), 75 deletions(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index 2cfbaf4f6a39..1b75edce4848 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -211,27 +211,27 @@ aliases: mkdir -p ~/react-native/reports/junit/ - &build-objc-ios-test-app - name: Build Objective-C iOS Test App + name: Build iOS Test App command: ./scripts/objc-test-ios.sh - &run-objc-ios-tests - name: Objective-C iOS Test Suite + name: iOS Test Suite command: ./scripts/objc-test-ios.sh test - &build-objc-tvos-test-app - name: Build Objective-C tvOS Test App + name: Build tvOS Test App command: ./scripts/objc-test-tvos.sh - &run-objc-tvos-tests - name: Objective-C tvOS Test Suite + name: tvOS Test Suite command: ./scripts/objc-test-tvos.sh test - &run-objc-ios-e2e-tests - name: Objective-C iOS End-to-End Test Suite + name: iOS End-to-End Test Suite command: node ./scripts/run-ci-e2e-tests.js --ios --js --retries 3; - &run-objc-tvos-e2e-tests - name: Objective-C tvOS End-to-End Test Suite + name: tvOS End-to-End Test Suite command: node ./scripts/run-ci-e2e-tests.js --tvos --js --retries 3; defaults: &defaults @@ -292,8 +292,6 @@ jobs: - store_test_results: path: ~/react-native/reports/junit - - store_artifacts: - path: ~/react-native/reports/junit - store_artifacts: path: ~/react-native/yarn.lock @@ -308,8 +306,6 @@ jobs: - store_test_results: path: ~/react-native/reports/junit - - store_artifacts: - path: ~/react-native/reports/junit # Runs JavaScript tests on Node 6 test_javascript_node6_compatibility: @@ -328,83 +324,47 @@ jobs: - store_test_results: path: ~/react-native/reports/junit - - store_artifacts: - path: ~/react-native/reports/junit - - # Builds iOS test app - build_objc_ios_test_app: - <<: *macos_defaults - dependencies: - pre: - - xcrun instruments -w "iPhone 5s (11.1)" || true - steps: - - attach_workspace: - at: ~/react-native - - - run: *build-objc-ios-test-app # Runs unit tests on iOS devices - test_objc_ios: + test_ios: <<: *macos_defaults - dependencies: - pre: - - xcrun instruments -w "iPhone 5s (11.1)" || true steps: - attach_workspace: at: ~/react-native + - run: xcrun instruments -w "iPhone 5s (11.1)" || true + - run: brew install watchman - run: *run-objc-ios-tests - store_test_results: path: ~/react-native/reports/junit - - store_artifacts: - path: ~/react-native/reports/junit - - # Builds tvOS test app - build_objc_tvos_test_app: - <<: *macos_defaults - dependencies: - pre: - - xcrun instruments -w "Apple TV 1080p (11.1)" || true - steps: - - attach_workspace: - at: ~/react-native - - - run: *build-objc-tvos-test-app # Runs unit tests on tvOS devices - test_objc_tvos: + test_tvos: <<: *macos_defaults - dependencies: - pre: - - xcrun instruments -w "Apple TV 1080p (11.1)" || true steps: - attach_workspace: at: ~/react-native + - run: xcrun instruments -w "Apple TV 1080p (11.1)" || true + - run: brew install watchman - run: *run-objc-tvos-tests - store_test_results: path: ~/react-native/reports/junit - - store_artifacts: - path: ~/react-native/reports/junit # Runs end to end tests - test_objc_ios_e2e: + test_ios_e2e: <<: *macos_defaults - dependencies: - pre: - - xcrun instruments -w "iPhone 5s (11.1)" || true steps: - attach_workspace: at: ~/react-native + - run: xcrun instruments -w "iPhone 5s (11.1)" || true - run: *run-objc-ios-e2e-tests - store_test_results: path: ~/react-native/reports/junit - - store_artifacts: - path: ~/react-native/reports/junit # Checks podspec test_podspec: @@ -523,8 +483,6 @@ jobs: - run: *collect-android-test-results - store_test_results: path: ~/react-native/reports/junit - - store_artifacts: - path: ~/react-native/reports/junit # Analyze pull request and raise any lint/flow issues. @@ -604,18 +562,18 @@ workflows: requires: - checkout_code - # Build iOS & tvOS test apps - - build_objc_ios_test_app: + # Test iOS & tvOS + - test_ios: filters: *filter-ignore-gh-pages requires: - checkout_code - - build_objc_tvos_test_app: + - test_tvos: filters: *filter-ignore-gh-pages requires: - checkout_code # End-to-end tests - - test_objc_ios_e2e: + - test_ios_e2e: filters: *filter-ignore-gh-pages requires: - checkout_code @@ -657,15 +615,6 @@ workflows: # # The following were DISABLED because they have not run since # # the migration from Travis, and they have broken since then, - # # Test iOS & tvOS - # - test_objc_ios: - # filters: *filter-ignore-gh-pages - # requires: - # - checkout_code - # - test_objc_tvos: - # filters: *filter-ignore-gh-pages - # requires: - # - checkout_code # # CocoaPods # - test_podspec: # filters: *filter-ignore-gh-pages diff --git a/scripts/objc-test.sh b/scripts/objc-test.sh index 81614c5f6edf..f2c0459989da 100755 --- a/scripts/objc-test.sh +++ b/scripts/objc-test.sh @@ -73,9 +73,6 @@ curl 'http://localhost:8081/IntegrationTests/RCTRootViewIntegrationTestApp.bundl rm temp.bundle # Run tests -# TODO: We use xcodebuild because xctool would stall when collecting info about -# the tests before running them. Switch back when this issue with xctool has -# been resolved. xcodebuild \ -project "RNTester/RNTester.xcodeproj" \ -scheme $SCHEME \ @@ -87,9 +84,6 @@ xcodebuild \ else # Don't run tests. No need to pass -destination to xcodebuild. -# TODO: We use xcodebuild because xctool would stall when collecting info about -# the tests before running them. Switch back when this issue with xctool has -# been resolved. xcodebuild \ -project "RNTester/RNTester.xcodeproj" \ -scheme $SCHEME \ From a1295e1707a856b9cd5c3129320d386aa9166310 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rui=20Ara=C3=BAjo?= Date: Mon, 5 Mar 2018 10:40:55 -0800 Subject: [PATCH 04/50] Fix Viewpager on Android when using native navigation. Summary: See the "broken" video attached to really understand the problem easily. On Android after navigating to any other screen using wix navigation library, the native viewpager would lose the settling page behaviour which is quite annoying for the users. This is caused by the onAttachedToWindow that resets mFirstLayout to true inside ViewPager. By request another layout pass, everything works as expected. Working video is the application with patched RN. [broken.mp4](https://github.com/facebook/react-native/files/1128028/broken.mp4.zip) [working.mp4](https://github.com/facebook/react-native/files/1128032/working.mp4.zip) Closes https://github.com/facebook/react-native/pull/14867 Differential Revision: D7154981 Pulled By: hramos fbshipit-source-id: 2b3570800a5320ed2c12c488748d9e1358936c84 --- .../react/views/viewpager/ReactViewPager.java | 20 +++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/viewpager/ReactViewPager.java b/ReactAndroid/src/main/java/com/facebook/react/views/viewpager/ReactViewPager.java index 77e93269bdcf..48b5f1a61949 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/views/viewpager/ReactViewPager.java +++ b/ReactAndroid/src/main/java/com/facebook/react/views/viewpager/ReactViewPager.java @@ -210,6 +210,26 @@ public void setScrollEnabled(boolean scrollEnabled) { mScrollEnabled = scrollEnabled; } + + @Override + protected void onAttachedToWindow() { + super.onAttachedToWindow(); + // The viewpager reset an internal flag on this method so we need to run another layout pass + // after attaching to window. + this.requestLayout(); + post(measureAndLayout); + } + + private final Runnable measureAndLayout = new Runnable() { + @Override + public void run() { + measure( + MeasureSpec.makeMeasureSpec(getWidth(), MeasureSpec.EXACTLY), + MeasureSpec.makeMeasureSpec(getHeight(), MeasureSpec.EXACTLY)); + layout(getLeft(), getTop(), getRight(), getBottom()); + } + }; + /*package*/ void addViewToAdapter(View child, int index) { getAdapter().addView(child, index); } From f389ad8b76dfde6f5f526f89fc3fd7823f0bbe38 Mon Sep 17 00:00:00 2001 From: Jonathan Kim Date: Mon, 5 Mar 2018 10:43:12 -0800 Subject: [PATCH 05/50] Move fb_xplat_cxx.bzl to xplat/build_defs Reviewed By: mzlee, ttsugriy Differential Revision: D7152463 fbshipit-source-id: ad7ca85f225343a043e2f606c6b3bbf74f42bbcd --- ReactCommon/cxxreact/tests/BUCK | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ReactCommon/cxxreact/tests/BUCK b/ReactCommon/cxxreact/tests/BUCK index 09c0a244fb71..010e7c8e50d0 100644 --- a/ReactCommon/cxxreact/tests/BUCK +++ b/ReactCommon/cxxreact/tests/BUCK @@ -11,8 +11,8 @@ TEST_SRCS = [ ] if not IS_OSS_BUILD: + load("@xplat//build_defs:fb_xplat_cxx.bzl", "cxx_test") load("@xplat//configurations/buck/android:jni_instrumentation_test", "jni_instrumentation_test_lib") - load("@xplat//configurations/buck:fb_xplat_cxx.bzl", "cxx_test") load("@xplat//configurations/buck:default_platform_defs.bzl", "APPLE") jni_instrumentation_test_lib( name = 'tests', From 87690570c8147f57db2af2f4c9984ac5db9ec5c9 Mon Sep 17 00:00:00 2001 From: David Vacca Date: Mon, 5 Mar 2018 10:43:25 -0800 Subject: [PATCH 06/50] Remove log in JSDevSupportModule Reviewed By: fkgozali Differential Revision: D7138115 fbshipit-source-id: f9cdda250b60a305195e01a11d0907f658d0a9d1 --- Libraries/Utilities/JSDevSupportModule.js | 1 - 1 file changed, 1 deletion(-) diff --git a/Libraries/Utilities/JSDevSupportModule.js b/Libraries/Utilities/JSDevSupportModule.js index 0b8cdca1f683..a33e91e88618 100644 --- a/Libraries/Utilities/JSDevSupportModule.js +++ b/Libraries/Utilities/JSDevSupportModule.js @@ -18,7 +18,6 @@ var JSDevSupportModule = { var result = renderer.getInspectorDataForViewTag(tag); var path = result.hierarchy.map( (item) => item.name).join(' -> '); - console.error('StackOverflowException rendering JSComponent: ' + path); require('NativeModules').JSDevSupport.setResult(path, null); }, }; From 3f8a04ba624783bfc541c05d3775b46682cfc810 Mon Sep 17 00:00:00 2001 From: Janic Duplessis Date: Mon, 5 Mar 2018 10:53:00 -0800 Subject: [PATCH 07/50] Revert "Better Android Gradle Plugin 3.x integration" Summary: This reverts commit d16ff3bd8b92fa84a9007bf5ebedd8153e4c089d. Currently breaks with the gradle version used by RN, I think there has been some work to update that to a more recent one but for now I think we should just revert it. It errors with: ``` Could not find method registerGeneratedResFolders() for arguments [file collection] on object of type com.android.build.gradle.internal.api.ApplicationVariantImpl. ``` Tested that RN tester now builds when using the right react.gradle (#18188) [ ANDROID ] [ BUGFIX ] [ react.gradle ] - REVERT "Support Android Gradle Plugin 3.x and AAPT2" [ ANDROID ] [ FEATURE ] [ react.gradle ] - REVERT "Expose the bundling task and its outputs via ext properties" Closes https://github.com/facebook/react-native/pull/18189 Differential Revision: D7155176 Pulled By: hramos fbshipit-source-id: 87b7b80b39cd345eebac4631efe6697971a1dbdf --- react.gradle | 199 +++++++++++++++++++++++++-------------------------- 1 file changed, 97 insertions(+), 102 deletions(-) diff --git a/react.gradle b/react.gradle index 685862193bb9..64b2f02f8cbf 100644 --- a/react.gradle +++ b/react.gradle @@ -6,117 +6,112 @@ def cliPath = config.cliPath ?: "node_modules/react-native/local-cli/cli.js" def bundleAssetName = config.bundleAssetName ?: "index.android.bundle" def entryFile = config.entryFile ?: "index.android.js" def bundleCommand = config.bundleCommand ?: "bundle" -def reactRoot = file(config.root ?: "../../") + +// because elvis operator +def elvisFile(thing) { + return thing ? file(thing) : null; +} + +def reactRoot = elvisFile(config.root) ?: file("../../") def inputExcludes = config.inputExcludes ?: ["android/**", "ios/**"] def bundleConfig = config.bundleConfig ? "${reactRoot}/${config.bundleConfig}" : null ; +void runBefore(String dependentTaskName, Task task) { + Task dependentTask = tasks.findByPath(dependentTaskName); + if (dependentTask != null) { + dependentTask.dependsOn task + } +} gradle.projectsEvaluated { - android.applicationVariants.all { def variant -> - // Create variant and target names - def targetName = variant.name.capitalize() - def targetPath = variant.dirName - - // React js bundle directories - def jsBundleDir = file("$buildDir/generated/assets/react/${targetPath}") - def resourcesDir = file("$buildDir/generated/res/react/${targetPath}") - - def jsBundleFile = file("$jsBundleDir/$bundleAssetName") - - // Additional node and packager commandline arguments - def nodeExecutableAndArgs = config.nodeExecutableAndArgs ?: ["node"] - def extraPackagerArgs = config.extraPackagerArgs ?: [] - - def currentBundleTask = tasks.create( - name: "bundle${targetName}JsAndAssets", - type: Exec) { - group = "react" - description = "bundle JS and assets for ${targetName}." - - // Create dirs if they are not there (e.g. the "clean" task just ran) - doFirst { - jsBundleDir.deleteDir() - jsBundleDir.mkdirs() - resourcesDir.deleteDir() - resourcesDir.mkdirs() - } - - // Set up inputs and outputs so gradle can cache the result - inputs.files fileTree(dir: reactRoot, excludes: inputExcludes) - outputs.dir jsBundleDir - outputs.dir resourcesDir - - // Set up the call to the react-native cli - workingDir reactRoot - - // Set up dev mode - def devEnabled = !(config."devDisabledIn${targetName}" - || targetName.toLowerCase().contains("release")) - - def extraArgs = extraPackagerArgs; - - if (bundleConfig) { - extraArgs = extraArgs.clone() - extraArgs.add("--config"); - extraArgs.add(bundleConfig); - } - - if (Os.isFamily(Os.FAMILY_WINDOWS)) { - commandLine("cmd", "/c", *nodeExecutableAndArgs, cliPath, bundleCommand, "--platform", "android", "--dev", "${devEnabled}", - "--reset-cache", "--entry-file", entryFile, "--bundle-output", jsBundleFile, "--assets-dest", resourcesDir, *extraArgs) - } else { - commandLine(*nodeExecutableAndArgs, cliPath, bundleCommand, "--platform", "android", "--dev", "${devEnabled}", - "--reset-cache", "--entry-file", entryFile, "--bundle-output", jsBundleFile, "--assets-dest", resourcesDir, *extraArgs) - } - - enabled config."bundleIn${targetName}" || - config."bundleIn${variant.buildType.name.capitalize()}" ?: - targetName.toLowerCase().contains("release") - } - - // Expose a minimal interface on the application variant and the task itself: - variant.ext.bundleJsAndAssets = currentBundleTask - currentBundleTask.ext.generatedResFolders = files(resourcesDir).builtBy(currentBundleTask) - currentBundleTask.ext.generatedAssetsFolders = files(jsBundleDir).builtBy(currentBundleTask) - - variant.registerGeneratedResFolders(currentBundleTask.generatedResFolders) - variant.mergeResources.dependsOn(currentBundleTask) - - def resourcesDirConfigValue = config."resourcesDir${targetName}" - if (resourcesDirConfigValue) { - def currentCopyResTask = tasks.create( - name: "copy${targetName}BundledResources", - type: Copy) { + // Grab all build types and product flavors + def buildTypes = android.buildTypes.collect { type -> type.name } + def productFlavors = android.productFlavors.collect { flavor -> flavor.name } + + // When no product flavors defined, use empty + if (!productFlavors) productFlavors.add('') + + productFlavors.each { productFlavorName -> + buildTypes.each { buildTypeName -> + // Create variant and target names + def flavorNameCapitalized = "${productFlavorName.capitalize()}" + def buildNameCapitalized = "${buildTypeName.capitalize()}" + def targetName = "${flavorNameCapitalized}${buildNameCapitalized}" + def targetPath = productFlavorName ? + "${productFlavorName}/${buildTypeName}" : + "${buildTypeName}" + + // React js bundle directories + def jsBundleDirConfigName = "jsBundleDir${targetName}" + def jsBundleDir = elvisFile(config."$jsBundleDirConfigName") ?: + file("$buildDir/intermediates/assets/${targetPath}") + + def resourcesDirConfigName = "resourcesDir${targetName}" + def resourcesDir = elvisFile(config."${resourcesDirConfigName}") ?: + file("$buildDir/intermediates/res/merged/${targetPath}") + def jsBundleFile = file("$jsBundleDir/$bundleAssetName") + + // Bundle task name for variant + def bundleJsAndAssetsTaskName = "bundle${targetName}JsAndAssets" + + // Additional node and packager commandline arguments + def nodeExecutableAndArgs = config.nodeExecutableAndArgs ?: ["node"] + def extraPackagerArgs = config.extraPackagerArgs ?: [] + + def currentBundleTask = tasks.create( + name: bundleJsAndAssetsTaskName, + type: Exec) { group = "react" - description = "copy bundled resources into custom location for ${targetName}." - - from resourcesDir - into file(resourcesDirConfigValue) - - dependsOn(currentBundleTask) - - enabled currentBundleTask.enabled + description = "bundle JS and assets for ${targetName}." + + // Create dirs if they are not there (e.g. the "clean" task just ran) + doFirst { + jsBundleDir.mkdirs() + resourcesDir.mkdirs() + } + + // Set up inputs and outputs so gradle can cache the result + inputs.files fileTree(dir: reactRoot, excludes: inputExcludes) + outputs.dir jsBundleDir + outputs.dir resourcesDir + + // Set up the call to the react-native cli + workingDir reactRoot + + // Set up dev mode + def devEnabled = !(config."devDisabledIn${targetName}" + || targetName.toLowerCase().contains("release")) + + def extraArgs = extraPackagerArgs; + + if (bundleConfig) { + extraArgs = extraArgs.clone() + extraArgs.add("--config"); + extraArgs.add(bundleConfig); + } + + if (Os.isFamily(Os.FAMILY_WINDOWS)) { + commandLine("cmd", "/c", *nodeExecutableAndArgs, cliPath, bundleCommand, "--platform", "android", "--dev", "${devEnabled}", + "--reset-cache", "--entry-file", entryFile, "--bundle-output", jsBundleFile, "--assets-dest", resourcesDir, *extraArgs) + } else { + commandLine(*nodeExecutableAndArgs, cliPath, bundleCommand, "--platform", "android", "--dev", "${devEnabled}", + "--reset-cache", "--entry-file", entryFile, "--bundle-output", jsBundleFile, "--assets-dest", resourcesDir, *extraArgs) + } + + enabled config."bundleIn${targetName}" || + config."bundleIn${buildTypeName.capitalize()}" ?: + targetName.toLowerCase().contains("release") } - variant.packageApplication.dependsOn(currentCopyResTask) - } - - def currentAssetsCopyTask = tasks.create( - name: "copy${targetName}BundledJs", - type: Copy) { - group = "react" - description = "copy bundled JS into ${targetName}." + // Hook bundle${productFlavor}${buildType}JsAndAssets into the android build process + currentBundleTask.dependsOn("merge${targetName}Resources") + currentBundleTask.dependsOn("merge${targetName}Assets") - from jsBundleDir - into file(config."jsBundleDir${targetName}" ?: - "$buildDir/intermediates/assets/${targetPath}") - - // mergeAssets must run first, as it clears the intermediates directory - dependsOn(variant.mergeAssets) - - enabled currentBundleTask.enabled + runBefore("process${flavorNameCapitalized}Armeabi-v7a${buildNameCapitalized}Resources", currentBundleTask) + runBefore("process${flavorNameCapitalized}X86${buildNameCapitalized}Resources", currentBundleTask) + runBefore("processUniversal${targetName}Resources", currentBundleTask) + runBefore("process${targetName}Resources", currentBundleTask) + runBefore("dataBindingProcessLayouts${targetName}", currentBundleTask) } - - variant.packageApplication.dependsOn(currentAssetsCopyTask) } } From 9f239d791431010f4f1bf980f57c3a7ff7bafdf4 Mon Sep 17 00:00:00 2001 From: Janic Duplessis Date: Mon, 5 Mar 2018 10:53:53 -0800 Subject: [PATCH 08/50] Use react.gradle from repo root instead of copy in RNTester Summary: RNTester used a copy of the main react.gradle file instead of the real one. Recent changes to the real file caused builds to fail with older gradle versions but was not caught by CI because it wasn't using that file for RNTester. That copy of react.gradle is just a leftover from when projects included a copy instead of importing the one in RN directly. Note: CI WILL fail with this PR, if we have trouble landing this I can add the revert in this commit too but wanted to keep it as 2 separate commits. Tested that building RNTester actually fails now that it uses react.gradle with recent changes, then tested that is builds properly when reverting d16ff3bd8b92fa84a9007bf5ebedd8153e4c089d. [INTERNAL] [MINOR] [RNTester] - Use react.gradle from repo root instead of copy in RNTester Closes https://github.com/facebook/react-native/pull/18188 Differential Revision: D7155179 Pulled By: hramos fbshipit-source-id: 15b461a63b841bf807e7d11ba3ead005ca5e33b0 --- RNTester/android/app/build.gradle | 2 +- RNTester/android/app/react.gradle | 96 ------------------------------- 2 files changed, 1 insertion(+), 97 deletions(-) delete mode 100644 RNTester/android/app/react.gradle diff --git a/RNTester/android/app/build.gradle b/RNTester/android/app/build.gradle index 9e55d12326f0..95d02acb788a 100644 --- a/RNTester/android/app/build.gradle +++ b/RNTester/android/app/build.gradle @@ -64,7 +64,7 @@ project.ext.react = [ inputExcludes: ["android/**", "./**"] ] -apply from: "react.gradle" +apply from: "../../../react.gradle" /** * Set this to true to create three separate APKs instead of one: diff --git a/RNTester/android/app/react.gradle b/RNTester/android/app/react.gradle deleted file mode 100644 index c0dca024c8df..000000000000 --- a/RNTester/android/app/react.gradle +++ /dev/null @@ -1,96 +0,0 @@ -import org.apache.tools.ant.taskdefs.condition.Os - -def config = project.hasProperty("react") ? project.react : []; - -def bundleAssetName = config.bundleAssetName ?: "index.android.bundle" -def entryFile = config.entryFile ?: "index.android.js" - -// because elvis operator -def elvisFile(thing) { - return thing ? file(thing) : null; -} - -def reactRoot = elvisFile(config.root) ?: file("../../") -def inputExcludes = config.inputExcludes ?: ["android/**", "ios/**"] - -void runBefore(String dependentTaskName, Task task) { - Task dependentTask = tasks.findByPath(dependentTaskName); - if (dependentTask != null) { - dependentTask.dependsOn task - } -} - -gradle.projectsEvaluated { - // Grab all build types and product flavors - def buildTypes = android.buildTypes.collect { type -> type.name } - def productFlavors = android.productFlavors.collect { flavor -> flavor.name } - - // When no product flavors defined, use empty - if (!productFlavors) productFlavors.add('') - - productFlavors.each { productFlavorName -> - buildTypes.each { buildTypeName -> - // Create variant and source names - def sourceName = "${buildTypeName}" - def targetName = "${sourceName.capitalize()}" - if (productFlavorName) { - sourceName = "${productFlavorName}${targetName}" - } - - // React js bundle directories - def jsBundleDirConfigName = "jsBundleDir${targetName}" - def jsBundleDir = elvisFile(config."$jsBundleDirConfigName") ?: - file("$buildDir/intermediates/assets/${sourceName}") - - def resourcesDirConfigName = "jsBundleDir${targetName}" - def resourcesDir = elvisFile(config."${resourcesDirConfigName}") ?: - file("$buildDir/intermediates/res/merged/${sourceName}") - def jsBundleFile = file("$jsBundleDir/$bundleAssetName") - - // Bundle task name for variant - def bundleJsAndAssetsTaskName = "bundle${targetName}JsAndAssets" - - def currentBundleTask = tasks.create( - name: bundleJsAndAssetsTaskName, - type: Exec) { - group = "react" - description = "bundle JS and assets for ${targetName}." - - // Create dirs if they are not there (e.g. the "clean" task just ran) - doFirst { - jsBundleDir.mkdirs() - resourcesDir.mkdirs() - } - - // Set up inputs and outputs so gradle can cache the result - inputs.files fileTree(dir: reactRoot, excludes: inputExcludes) - outputs.dir jsBundleDir - outputs.dir resourcesDir - - // Set up the call to the react-native cli - workingDir reactRoot - - // Set up dev mode - def devEnabled = !targetName.toLowerCase().contains("release") - if (Os.isFamily(Os.FAMILY_WINDOWS)) { - commandLine "cmd", "/c", "node", "./local-cli/cli.js", "bundle", "--platform", "android", "--dev", "${devEnabled}", - "--entry-file", entryFile, "--bundle-output", jsBundleFile, "--assets-dest", resourcesDir - } else { - commandLine "node", "./local-cli/cli.js", "bundle", "--platform", "android", "--dev", "${devEnabled}", - "--entry-file", entryFile, "--bundle-output", jsBundleFile, "--assets-dest", resourcesDir - } - - enabled config."bundleIn${targetName}" ?: targetName.toLowerCase().contains("release") - } - - // Hook bundle${productFlavor}${buildType}JsAndAssets into the android build process - currentBundleTask.dependsOn("merge${targetName}Resources") - currentBundleTask.dependsOn("merge${targetName}Assets") - - runBefore("processArmeabi-v7a${targetName}Resources", currentBundleTask) - runBefore("processX86${targetName}Resources", currentBundleTask) - runBefore("processUniversal${targetName}Resources", currentBundleTask) - runBefore("process${targetName}Resources", currentBundleTask) - } - } -} From 4466b6fa7ce5325cac3233a23b10ffcb4ff038a7 Mon Sep 17 00:00:00 2001 From: David Vacca Date: Mon, 5 Mar 2018 10:55:19 -0800 Subject: [PATCH 09/50] Refactor BridgeListener into JSIModulesProvider Reviewed By: achen1 Differential Revision: D7140944 fbshipit-source-id: 092ea8569af5b5f90e005d6dc2c1819c1c9cf58f --- .../facebook/react/ReactInstanceManager.java | 17 +++++++------- .../react/ReactInstanceManagerBuilder.java | 13 +++++------ .../com/facebook/react/ReactNativeHost.java | 8 ++++--- .../facebook/react/bridge/BridgeListener.java | 14 ----------- .../react/bridge/CatalystInstance.java | 6 ++--- .../react/bridge/CatalystInstanceImpl.java | 13 +++++++---- .../com/facebook/react/bridge/JSIModule.java | 7 ++++++ .../react/bridge/JSIModuleHolder.java | 12 ++++++++++ .../react/bridge/JSIModuleRegistry.java | 23 +++++++++++++++++++ .../react/bridge/JSIModulesProvider.java | 15 ++++++++++++ .../com/facebook/react/bridge/UIManager.java | 2 +- 11 files changed, 89 insertions(+), 41 deletions(-) delete mode 100644 ReactAndroid/src/main/java/com/facebook/react/bridge/BridgeListener.java create mode 100644 ReactAndroid/src/main/java/com/facebook/react/bridge/JSIModule.java create mode 100644 ReactAndroid/src/main/java/com/facebook/react/bridge/JSIModuleHolder.java create mode 100644 ReactAndroid/src/main/java/com/facebook/react/bridge/JSIModuleRegistry.java create mode 100644 ReactAndroid/src/main/java/com/facebook/react/bridge/JSIModulesProvider.java diff --git a/ReactAndroid/src/main/java/com/facebook/react/ReactInstanceManager.java b/ReactAndroid/src/main/java/com/facebook/react/ReactInstanceManager.java index 1ecbd0efd45c..1d2731a71c85 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/ReactInstanceManager.java +++ b/ReactAndroid/src/main/java/com/facebook/react/ReactInstanceManager.java @@ -43,10 +43,10 @@ import com.facebook.infer.annotation.Assertions; import com.facebook.infer.annotation.ThreadConfined; import com.facebook.infer.annotation.ThreadSafe; -import com.facebook.react.bridge.BridgeListener; import com.facebook.react.bridge.CatalystInstance; import com.facebook.react.bridge.CatalystInstanceImpl; import com.facebook.react.bridge.JSBundleLoader; +import com.facebook.react.bridge.JSIModulesProvider; import com.facebook.react.bridge.JavaJSExecutor; import com.facebook.react.bridge.JavaScriptExecutor; import com.facebook.react.bridge.JavaScriptExecutorFactory; @@ -71,11 +71,11 @@ import com.facebook.react.devsupport.interfaces.DevSupportManager; import com.facebook.react.devsupport.interfaces.PackagerStatusCallback; import com.facebook.react.modules.appregistry.AppRegistry; -import com.facebook.react.modules.fabric.ReactFabric; import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler; import com.facebook.react.modules.core.DeviceEventManagerModule; import com.facebook.react.modules.core.ReactChoreographer; import com.facebook.react.modules.debug.interfaces.DeveloperSettings; +import com.facebook.react.modules.fabric.ReactFabric; import com.facebook.react.uimanager.DisplayMetricsHolder; import com.facebook.react.uimanager.UIImplementationProvider; import com.facebook.react.uimanager.UIManagerModule; @@ -157,7 +157,7 @@ public interface ReactInstanceEventListener { private final @Nullable NativeModuleCallExceptionHandler mNativeModuleCallExceptionHandler; private final boolean mLazyNativeModulesEnabled; private final boolean mDelayViewManagerClassLoadsEnabled; - private final @Nullable BridgeListener mBridgeListener; + private final @Nullable JSIModulesProvider mJSIModulesProvider; private List mViewManagers; private class ReactContextInitParams { @@ -207,7 +207,7 @@ public static ReactInstanceManagerBuilder builder() { @Nullable DevBundleDownloadListener devBundleDownloadListener, int minNumShakes, int minTimeLeftInFrameForNonBatchedOperationMs, - @Nullable BridgeListener bridgeListener) { + @Nullable JSIModulesProvider jsiModulesProvider) { Log.d(ReactConstants.TAG, "ReactInstanceManager.ctor()"); initializeSoLoaderIfNecessary(applicationContext); @@ -256,7 +256,7 @@ public void invokeDefaultOnBackPressed() { } mPackages.addAll(packages); } - mBridgeListener = bridgeListener; + mJSIModulesProvider = jsiModulesProvider; // Instantiate ReactChoreographer in UI thread. ReactChoreographer.initialize(); @@ -1008,7 +1008,7 @@ private void attachRootViewToInstance( CatalystInstance catalystInstance) { Log.d(ReactConstants.TAG, "ReactInstanceManager.attachRootViewToInstance()"); Systrace.beginSection(TRACE_TAG_REACT_JAVA_BRIDGE, "attachRootViewToInstance"); - UIManager uiManagerModule = rootView.isFabric() ? catalystInstance.getFabricUIManager() : catalystInstance.getNativeModule(UIManagerModule.class); + UIManager uiManagerModule = rootView.isFabric() ? catalystInstance.getJSIModule(UIManager.class) : catalystInstance.getNativeModule(UIManagerModule.class); final int rootTag = uiManagerModule.addRootView(rootView); rootView.setRootViewTag(rootTag); rootView.invokeJSEntryPoint(); @@ -1099,8 +1099,9 @@ private ReactApplicationContext createReactContext( Systrace.endSection(TRACE_TAG_REACT_JAVA_BRIDGE); ReactMarker.logMarker(CREATE_CATALYST_INSTANCE_END); } - if (mBridgeListener != null) { - mBridgeListener.onBridgeStarted(reactContext, catalystInstance); + if (mJSIModulesProvider != null) { + catalystInstance.addJSIModules(mJSIModulesProvider + .getJSIModules(reactContext, catalystInstance.getJavaScriptContextHolder())); } if (mBridgeIdleDebugListener != null) { diff --git a/ReactAndroid/src/main/java/com/facebook/react/ReactInstanceManagerBuilder.java b/ReactAndroid/src/main/java/com/facebook/react/ReactInstanceManagerBuilder.java index 5f9042093ab9..75792d83db3b 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/ReactInstanceManagerBuilder.java +++ b/ReactAndroid/src/main/java/com/facebook/react/ReactInstanceManagerBuilder.java @@ -7,8 +7,7 @@ import android.app.Activity; import android.app.Application; import com.facebook.infer.annotation.Assertions; -import com.facebook.react.bridge.BridgeListener; -import com.facebook.react.bridge.Callback; +import com.facebook.react.bridge.JSIModulesProvider; import com.facebook.react.bridge.JSBundleLoader; import com.facebook.react.bridge.JSCJavaScriptExecutorFactory; import com.facebook.react.bridge.JavaScriptExecutorFactory; @@ -50,7 +49,7 @@ public class ReactInstanceManagerBuilder { private @Nullable JavaScriptExecutorFactory mJavaScriptExecutorFactory; private int mMinNumShakes = 1; private int mMinTimeLeftInFrameForNonBatchedOperationMs = -1; - private @Nullable BridgeListener mBridgeListener; + private @Nullable JSIModulesProvider mJSIModulesProvider; /* package protected */ ReactInstanceManagerBuilder() { } @@ -65,9 +64,9 @@ public ReactInstanceManagerBuilder setUIImplementationProvider( return this; } - public ReactInstanceManagerBuilder setBridgeListener( - @Nullable BridgeListener listener) { - mBridgeListener = listener; + public ReactInstanceManagerBuilder setJSIModulesProvider( + @Nullable JSIModulesProvider jsiModulesProvider) { + mJSIModulesProvider = jsiModulesProvider; return this; } @@ -290,6 +289,6 @@ public ReactInstanceManager build() { mDevBundleDownloadListener, mMinNumShakes, mMinTimeLeftInFrameForNonBatchedOperationMs, - mBridgeListener); + mJSIModulesProvider); } } diff --git a/ReactAndroid/src/main/java/com/facebook/react/ReactNativeHost.java b/ReactAndroid/src/main/java/com/facebook/react/ReactNativeHost.java index 243053fcfe68..e1537d550f36 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/ReactNativeHost.java +++ b/ReactAndroid/src/main/java/com/facebook/react/ReactNativeHost.java @@ -7,6 +7,7 @@ package com.facebook.react; +import com.facebook.react.bridge.JSIModulesProvider; import javax.annotation.Nullable; import java.util.List; @@ -14,7 +15,7 @@ import android.app.Application; import com.facebook.infer.annotation.Assertions; -import com.facebook.react.bridge.BridgeListener; +import com.facebook.react.bridge.JSIModulesProvider; import com.facebook.react.bridge.JavaScriptExecutorFactory; import com.facebook.react.bridge.ReactMarker; import com.facebook.react.bridge.ReactMarkerConstants; @@ -75,7 +76,7 @@ protected ReactInstanceManager createReactInstanceManager() { .setRedBoxHandler(getRedBoxHandler()) .setJavaScriptExecutorFactory(getJavaScriptExecutorFactory()) .setUIImplementationProvider(getUIImplementationProvider()) - .setBridgeListener(getBridgeListener()) + .setJSIModulesProvider(getJSIModulesProvider()) .setInitialLifecycleState(LifecycleState.BEFORE_CREATE); for (ReactPackage reactPackage : getPackages()) { @@ -122,7 +123,8 @@ protected UIImplementationProvider getUIImplementationProvider() { return new UIImplementationProvider(); } - protected @Nullable BridgeListener getBridgeListener() { + protected @Nullable + JSIModulesProvider getJSIModulesProvider() { return null; } diff --git a/ReactAndroid/src/main/java/com/facebook/react/bridge/BridgeListener.java b/ReactAndroid/src/main/java/com/facebook/react/bridge/BridgeListener.java deleted file mode 100644 index 70b771ff558e..000000000000 --- a/ReactAndroid/src/main/java/com/facebook/react/bridge/BridgeListener.java +++ /dev/null @@ -1,14 +0,0 @@ -package com.facebook.react.bridge; - -/** - * Interface to listen to bridge events. - */ -public interface BridgeListener { - - /** - * Called right after the RN Bridge is initialized - * @param catalystInstance {@link CatalystInstance} bridge - */ - void onBridgeStarted(ReactApplicationContext reactApplicationContext, CatalystInstance catalystInstance); - -} diff --git a/ReactAndroid/src/main/java/com/facebook/react/bridge/CatalystInstance.java b/ReactAndroid/src/main/java/com/facebook/react/bridge/CatalystInstance.java index 1f277e6ec384..fe6d46112266 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/bridge/CatalystInstance.java +++ b/ReactAndroid/src/main/java/com/facebook/react/bridge/CatalystInstance.java @@ -11,6 +11,7 @@ import com.facebook.react.bridge.queue.ReactQueueConfiguration; import com.facebook.react.common.annotations.VisibleForTesting; import java.util.Collection; +import java.util.List; import javax.annotation.Nullable; /** @@ -62,6 +63,7 @@ void callFunction( T getJSModule(Class jsInterface); boolean hasNativeModule(Class nativeModuleInterface); T getNativeModule(Class nativeModuleInterface); + T getJSIModule(Class jsiModuleInterface); Collection getNativeModules(); /** @@ -99,7 +101,5 @@ void callFunction( */ JavaScriptContextHolder getJavaScriptContextHolder(); - void setFabricUIManager(T fabricUIManager); - - T getFabricUIManager(); + void addJSIModules(List jsiModules); } diff --git a/ReactAndroid/src/main/java/com/facebook/react/bridge/CatalystInstanceImpl.java b/ReactAndroid/src/main/java/com/facebook/react/bridge/CatalystInstanceImpl.java index 79233aae2e32..7ab1216267db 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/bridge/CatalystInstanceImpl.java +++ b/ReactAndroid/src/main/java/com/facebook/react/bridge/CatalystInstanceImpl.java @@ -26,6 +26,7 @@ import java.lang.ref.WeakReference; import java.util.ArrayList; import java.util.Collection; +import java.util.List; import java.util.concurrent.CopyOnWriteArrayList; import java.util.concurrent.atomic.AtomicInteger; import javax.annotation.Nullable; @@ -79,13 +80,13 @@ public String toString() { private final Object mJSCallsPendingInitLock = new Object(); private final NativeModuleRegistry mNativeModuleRegistry; + private final JSIModuleRegistry mJSIModuleRegistry = new JSIModuleRegistry(); private final NativeModuleCallExceptionHandler mNativeModuleCallExceptionHandler; private final MessageQueueThread mNativeModulesQueueThread; private boolean mInitialized = false; private volatile boolean mAcceptCalls = false; private boolean mJSBundleHasLoaded; - private UIManager mFabricUIManager; private @Nullable String mSourceURL; private JavaScriptContextHolder mJavaScriptContextHolder; @@ -453,12 +454,14 @@ public JavaScriptContextHolder getJavaScriptContextHolder() { return mJavaScriptContextHolder; } - public UIManager getFabricUIManager() { - return mFabricUIManager; + @Override + public void addJSIModules(List jsiModules) { + mJSIModuleRegistry.registerModules(jsiModules); } - public void setFabricUIManager(UIManager fabricUIManager) { - mFabricUIManager = fabricUIManager; + @Override + public T getJSIModule(Class jsiModuleInterface) { + return mJSIModuleRegistry.getModule(jsiModuleInterface); } private native long getJavaScriptContext(); diff --git a/ReactAndroid/src/main/java/com/facebook/react/bridge/JSIModule.java b/ReactAndroid/src/main/java/com/facebook/react/bridge/JSIModule.java new file mode 100644 index 000000000000..5b9e2495449d --- /dev/null +++ b/ReactAndroid/src/main/java/com/facebook/react/bridge/JSIModule.java @@ -0,0 +1,7 @@ +package com.facebook.react.bridge; + +/** + * Marker interface used to represent a JSI Module. + */ +public interface JSIModule { +} diff --git a/ReactAndroid/src/main/java/com/facebook/react/bridge/JSIModuleHolder.java b/ReactAndroid/src/main/java/com/facebook/react/bridge/JSIModuleHolder.java new file mode 100644 index 000000000000..de98ae54b51c --- /dev/null +++ b/ReactAndroid/src/main/java/com/facebook/react/bridge/JSIModuleHolder.java @@ -0,0 +1,12 @@ +package com.facebook.react.bridge; + +/** + * Holder class used to register {@link JSIModule} into JSI Bridge. + */ +public interface JSIModuleHolder { + + Class getJSIModuleClass(); + + T getJSIModule(); + +} diff --git a/ReactAndroid/src/main/java/com/facebook/react/bridge/JSIModuleRegistry.java b/ReactAndroid/src/main/java/com/facebook/react/bridge/JSIModuleRegistry.java new file mode 100644 index 000000000000..913aae68bcbf --- /dev/null +++ b/ReactAndroid/src/main/java/com/facebook/react/bridge/JSIModuleRegistry.java @@ -0,0 +1,23 @@ +package com.facebook.react.bridge; + +import java.util.HashMap; +import java.util.List; +import java.util.Map; +import com.facebook.infer.annotation.Assertions; + +public class JSIModuleRegistry { + + private final Map mModules = new HashMap<>(); + + public JSIModuleRegistry() { } + + public T getModule(Class moduleClass) { + return (T) Assertions.assertNotNull(mModules.get(moduleClass)); + } + + public void registerModules(List jsiModules) { + for (JSIModuleHolder holder : jsiModules) { + mModules.put(holder.getJSIModuleClass(), holder.getJSIModule()); + } + } +} diff --git a/ReactAndroid/src/main/java/com/facebook/react/bridge/JSIModulesProvider.java b/ReactAndroid/src/main/java/com/facebook/react/bridge/JSIModulesProvider.java new file mode 100644 index 000000000000..8abaa1ff79e2 --- /dev/null +++ b/ReactAndroid/src/main/java/com/facebook/react/bridge/JSIModulesProvider.java @@ -0,0 +1,15 @@ +package com.facebook.react.bridge; + +import java.util.List; + +/** + * Interface used to initialize JSI Modules into the JSI Bridge. + */ +public interface JSIModulesProvider { + + /** + * @return a {@link List} that contain the list of JSI Modules. + */ + List getJSIModules(ReactApplicationContext reactApplicationContext, JavaScriptContextHolder jsContext); + +} diff --git a/ReactAndroid/src/main/java/com/facebook/react/bridge/UIManager.java b/ReactAndroid/src/main/java/com/facebook/react/bridge/UIManager.java index ff3e93ca1d5b..6cbca5de698f 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/bridge/UIManager.java +++ b/ReactAndroid/src/main/java/com/facebook/react/bridge/UIManager.java @@ -3,7 +3,7 @@ import com.facebook.react.uimanager.common.MeasureSpecProvider; import com.facebook.react.uimanager.common.SizeMonitoringFrameLayout; -public interface UIManager { +public interface UIManager extends JSIModule { /** * Registers a new root view. From 19b98519992a033079191dc2f12c68533588ab4c Mon Sep 17 00:00:00 2001 From: Sophie Alpert Date: Mon, 5 Mar 2018 14:12:23 -0800 Subject: [PATCH 10/50] Update VirtualizedList to not throw with double constructor Summary: constructor shouldn't have side effects. Reviewed By: sahrens Differential Revision: D7146018 fbshipit-source-id: 0ca311e48d6bad81988ed48605c8134068c482da --- Libraries/Lists/VirtualizedList.js | 62 ++++++++++++++++++------------ 1 file changed, 37 insertions(+), 25 deletions(-) diff --git a/Libraries/Lists/VirtualizedList.js b/Libraries/Lists/VirtualizedList.js index f40b44e404c4..e6acee9e77c2 100644 --- a/Libraries/Lists/VirtualizedList.js +++ b/Libraries/Lists/VirtualizedList.js @@ -442,6 +442,7 @@ class VirtualizedList extends React.PureComponent { getScrollMetrics: PropTypes.func, horizontal: PropTypes.bool, getOutermostParentListRef: PropTypes.func, + getNestedChildState: PropTypes.func, registerAsNestedChild: PropTypes.func, unregisterAsNestedChild: PropTypes.func, }), @@ -452,6 +453,7 @@ class VirtualizedList extends React.PureComponent { getScrollMetrics: PropTypes.func, horizontal: PropTypes.bool, getOutermostParentListRef: PropTypes.func, + getNestedChildState: PropTypes.func, registerAsNestedChild: PropTypes.func, unregisterAsNestedChild: PropTypes.func, }), @@ -463,6 +465,7 @@ class VirtualizedList extends React.PureComponent { getScrollMetrics: this._getScrollMetrics, horizontal: this.props.horizontal, getOutermostParentListRef: this._getOutermostParentListRef, + getNestedChildState: this._getNestedChildState, registerAsNestedChild: this._registerAsNestedChild, unregisterAsNestedChild: this._unregisterAsNestedChild, }, @@ -492,6 +495,11 @@ class VirtualizedList extends React.PureComponent { } }; + _getNestedChildState = (key: string): ?ChildListState => { + const existingChildData = this._nestedChildLists.get(key); + return existingChildData && existingChildData.state; + }; + _registerAsNestedChild = (childList: { cellKey: string, key: string, @@ -518,8 +526,6 @@ class VirtualizedList extends React.PureComponent { if (this._hasInteracted) { childList.ref.recordInteraction(); } - - return existingChildData && existingChildData.state; }; _unregisterAsNestedChild = (childList: { @@ -577,11 +583,9 @@ class VirtualizedList extends React.PureComponent { }; if (this._isNestedWithSameOrientation()) { - const storedState = this.context.virtualizedList.registerAsNestedChild({ - cellKey: this._getCellKey(), - key: this.props.listKey || this._getCellKey(), - ref: this, - }); + const storedState = this.context.virtualizedList.getNestedChildState( + this.props.listKey || this._getCellKey(), + ); if (storedState) { initialState = storedState; this.state = storedState; @@ -592,6 +596,16 @@ class VirtualizedList extends React.PureComponent { this.state = initialState; } + componentDidMount() { + if (this._isNestedWithSameOrientation()) { + this.context.virtualizedList.registerAsNestedChild({ + cellKey: this._getCellKey(), + key: this.props.listKey || this._getCellKey(), + ref: this, + }); + } + } + componentWillUnmount() { if (this._isNestedWithSameOrientation()) { this.context.virtualizedList.unregisterAsNestedChild({ @@ -611,29 +625,17 @@ class VirtualizedList extends React.PureComponent { this._fillRateHelper.deactivateAndFlush(); } - UNSAFE_componentWillReceiveProps(newProps: Props) { + static getDerivedStateFromProps(newProps: Props, prevState: State) { const {data, extraData, getItemCount, maxToRenderPerBatch} = newProps; // first and last could be stale (e.g. if a new, shorter items props is passed in), so we make // sure we're rendering a reasonable range here. - this.setState({ + return { first: Math.max( 0, - Math.min( - this.state.first, - getItemCount(data) - 1 - maxToRenderPerBatch, - ), + Math.min(prevState.first, getItemCount(data) - 1 - maxToRenderPerBatch), ), - last: Math.max(0, Math.min(this.state.last, getItemCount(data) - 1)), - }); - if (data !== this.props.data || extraData !== this.props.extraData) { - this._hasDataChangedSinceEndReached = true; - - // clear the viewableIndices cache to also trigger - // the onViewableItemsChanged callback with the new data - this._viewabilityTuples.forEach(tuple => { - tuple.viewabilityHelper.resetViewableIndices(); - }); - } + last: Math.max(0, Math.min(prevState.last, getItemCount(data) - 1)), + }; } _pushCells( @@ -916,7 +918,17 @@ class VirtualizedList extends React.PureComponent { } } - componentDidUpdate() { + componentDidUpdate(prevProps: Props) { + const {data, extraData} = this.props; + if (data !== prevProps.data || extraData !== prevProps.extraData) { + this._hasDataChangedSinceEndReached = true; + + // clear the viewableIndices cache to also trigger + // the onViewableItemsChanged callback with the new data + this._viewabilityTuples.forEach(tuple => { + tuple.viewabilityHelper.resetViewableIndices(); + }); + } this._scheduleCellsToRenderUpdate(); } From 860fcd458a1873ebcf977be01670be5912ae7104 Mon Sep 17 00:00:00 2001 From: rickhanlonii Date: Mon, 5 Mar 2018 14:20:47 -0800 Subject: [PATCH 11/50] Update node-notifier (has mem leak fix) Summary: Noticed that we're on a version of node-notifier that has a leak mentioned [here](https://github.com/mikaelbr/node-notifier/issues/183) and fixed in the newest version. Automated tests [INTERNAL] [BUGFIX] [package.json] - Update node-notifier dependency Closes https://github.com/facebook/react-native/pull/18033 Differential Revision: D7102637 Pulled By: hramos fbshipit-source-id: 850f3d826c1d880a6281d95e4d5af68e9af89927 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 7afce5a614ec..eb1471c74767 100644 --- a/package.json +++ b/package.json @@ -181,7 +181,7 @@ "mkdirp": "^0.5.1", "morgan": "^1.9.0", "node-fetch": "^1.3.3", - "node-notifier": "^5.1.2", + "node-notifier": "^5.2.1", "npmlog": "^2.0.4", "opn": "^3.0.2", "optimist": "^0.6.1", From 19a4a7d3cb6d00780ccbbbd7b0062896f64ab24d Mon Sep 17 00:00:00 2001 From: Dan Zimmerman Date: Mon, 5 Mar 2018 14:30:17 -0800 Subject: [PATCH 12/50] Remove callFunctionSync experimental APIs Reviewed By: michalgr Differential Revision: D6124038 fbshipit-source-id: 219afe30783da92cf10f800dc35e64823b61cf4b --- React/Base/RCTBridge.h | 16 --------- React/Base/RCTBridge.m | 8 ----- React/CxxBridge/RCTCxxBridge.mm | 47 ------------------------- ReactCommon/cxxreact/Instance.h | 9 ----- ReactCommon/cxxreact/JSCExecutor.cpp | 24 ------------- ReactCommon/cxxreact/JSCExecutor.h | 11 ------ ReactCommon/cxxreact/NativeToJsBridge.h | 29 --------------- 7 files changed, 144 deletions(-) diff --git a/React/Base/RCTBridge.h b/React/Base/RCTBridge.h index 7db16baea377..11d453343e23 100644 --- a/React/Base/RCTBridge.h +++ b/React/Base/RCTBridge.h @@ -120,22 +120,6 @@ RCT_EXTERN NSString *RCTBridgeModuleNameForClass(Class bridgeModuleClass); - (void)enqueueJSCall:(NSString *)moduleDotMethod args:(NSArray *)args; - (void)enqueueJSCall:(NSString *)module method:(NSString *)method args:(NSArray *)args completion:(dispatch_block_t)completion; -/** - * This method is used to call functions in the JavaScript application context - * synchronously. This is intended for use by applications which do their own - * thread management and are careful to manage multi-threaded access to the JSVM. - * See also -[RCTBridgeDelgate shouldBridgeLoadJavaScriptSynchronously], which - * may be needed to ensure that any requires JS code is loaded before this method - * is called. If the underlying executor is not JSC, this will return nil. Safe - * to call from any thread. - * - * @experimental - */ -- (JSValue *)callFunctionOnModule:(NSString *)module - method:(NSString *)method - arguments:(NSArray *)arguments - error:(NSError **)error; - /** * This method registers the file path of an additional JS segment by its ID. * diff --git a/React/Base/RCTBridge.m b/React/Base/RCTBridge.m index a84a966e3618..7250a0ea3f9b 100644 --- a/React/Base/RCTBridge.m +++ b/React/Base/RCTBridge.m @@ -364,14 +364,6 @@ - (void)enqueueCallback:(NSNumber *)cbID args:(NSArray *)args [self.batchedBridge enqueueCallback:cbID args:args]; } -- (JSValue *)callFunctionOnModule:(NSString *)module - method:(NSString *)method - arguments:(NSArray *)arguments - error:(NSError **)error -{ - return [self.batchedBridge callFunctionOnModule:module method:method arguments:arguments error:error]; -} - - (void)registerSegmentWithId:(NSUInteger)segmentId path:(NSString *)path { [self.batchedBridge registerSegmentWithId:segmentId path:path]; diff --git a/React/CxxBridge/RCTCxxBridge.mm b/React/CxxBridge/RCTCxxBridge.mm index 1da12b8a217e..50dc3fb8dba1 100644 --- a/React/CxxBridge/RCTCxxBridge.mm +++ b/React/CxxBridge/RCTCxxBridge.mm @@ -1183,53 +1183,6 @@ - (void)executeApplicationScript:(NSData *)script }]; } -- (JSValue *)callFunctionOnModule:(NSString *)module - method:(NSString *)method - arguments:(NSArray *)arguments - error:(NSError **)error -{ - if (!_reactInstance) { - if (error) { - *error = RCTErrorWithMessage( - @"callFunctionOnModule was called on uninitialized bridge"); - } - return nil; - } else if (self.executorClass) { - if (error) { - *error = RCTErrorWithMessage( - @"callFunctionOnModule can only be used with JSC executor"); - } - return nil; - } else if (!self.valid) { - if (error) { - *error = RCTErrorWithMessage( - @"Bridge is no longer valid"); - } - return nil; - } else if (self.loading) { - if (error) { - *error = RCTErrorWithMessage( - @"Bridge is still loading"); - } - return nil; - } - - RCT_PROFILE_BEGIN_EVENT(0, @"callFunctionOnModule", (@{ @"module": module, @"method": method })); - __block JSValue *ret = nil; - NSError *errorObj = tryAndReturnError(^{ - Value result = self->_reactInstance->callFunctionSync([module UTF8String], [method UTF8String], (id)arguments); - JSContext *context = contextForGlobalContextRef(JSC_JSContextGetGlobalContext(result.context())); - ret = [JSC_JSValue(result.context()) valueWithJSValueRef:result inContext:context]; - }); - RCT_PROFILE_END_EVENT(RCTProfileTagAlways, @"js_call"); - - if (error) { - *error = errorObj; - } - - return ret; -} - - (void)registerSegmentWithId:(NSUInteger)segmentId path:(NSString *)path { if (_reactInstance) { diff --git a/ReactCommon/cxxreact/Instance.h b/ReactCommon/cxxreact/Instance.h index bcd0bea395ac..e35ce4bbe2ac 100644 --- a/ReactCommon/cxxreact/Instance.h +++ b/ReactCommon/cxxreact/Instance.h @@ -63,15 +63,6 @@ class RN_EXPORT Instance { // This method is experimental, and may be modified or removed. void registerBundle(uint32_t bundleId, const std::string& bundlePath); - // This method is experimental, and may be modified or removed. - template - Value callFunctionSync(const std::string &module, const std::string &method, - T &&args) { - CHECK(nativeToJsBridge_); - return nativeToJsBridge_->callFunctionSync(module, method, - std::forward(args)); - } - const ModuleRegistry &getModuleRegistry() const; ModuleRegistry &getModuleRegistry(); diff --git a/ReactCommon/cxxreact/JSCExecutor.cpp b/ReactCommon/cxxreact/JSCExecutor.cpp index 01c8c96de195..81e71eddbaa5 100644 --- a/ReactCommon/cxxreact/JSCExecutor.cpp +++ b/ReactCommon/cxxreact/JSCExecutor.cpp @@ -581,30 +581,6 @@ namespace facebook { callNativeModules(std::move(result)); } - Value JSCExecutor::callFunctionSyncWithValue( - const std::string& module, const std::string& method, Value args) { - SystraceSection s("JSCExecutor::callFunction"); - Object result = [&] { - JSContextLock lock(m_context); - if (!m_callFunctionReturnResultAndFlushedQueueJS) { - bindBridge(); - } - return m_callFunctionReturnResultAndFlushedQueueJS->callAsFunction({ - Value(m_context, String::createExpectingAscii(m_context, module)), - Value(m_context, String::createExpectingAscii(m_context, method)), - std::move(args), - }).asObject(); - }(); - - Value length = result.getProperty("length"); - - if (!length.isNumber() || length.asInteger() != 2) { - std::runtime_error("Return value of a callFunction must be an array of size 2"); - } - callNativeModules(result.getPropertyAtIndex(1)); - return result.getPropertyAtIndex(0); - } - void JSCExecutor::setGlobalVariable(std::string propName, std::unique_ptr jsonValue) { try { SystraceSection s("JSCExecutor::setGlobalVariable", "propName", propName); diff --git a/ReactCommon/cxxreact/JSCExecutor.h b/ReactCommon/cxxreact/JSCExecutor.h index 258697af5c95..5acc967722e5 100644 --- a/ReactCommon/cxxreact/JSCExecutor.h +++ b/ReactCommon/cxxreact/JSCExecutor.h @@ -79,14 +79,6 @@ class RN_EXPORT JSCExecutor : public JSExecutor, public PrivateDataBase { const double callbackId, const folly::dynamic& arguments) override; - template - Value callFunctionSync( - const std::string& module, const std::string& method, T&& args) { - return callFunctionSyncWithValue( - module, method, JSCValueEncoder::type>::toJSCValue( - m_context, std::forward(args))); - } - virtual void setGlobalVariable( std::string propName, std::unique_ptr jsonValue) override; @@ -123,9 +115,6 @@ class RN_EXPORT JSCExecutor : public JSExecutor, public PrivateDataBase { void initOnJSVMThread() throw(JSException); static bool isNetworkInspected(const std::string &owner, const std::string &app, const std::string &device); - // This method is experimental, and may be modified or removed. - Value callFunctionSyncWithValue( - const std::string& module, const std::string& method, Value value); void terminateOnJSVMThread(); void bindBridge() throw(JSException); void callNativeModules(Value&&); diff --git a/ReactCommon/cxxreact/NativeToJsBridge.h b/ReactCommon/cxxreact/NativeToJsBridge.h index 586766e387bd..78d960a08a45 100644 --- a/ReactCommon/cxxreact/NativeToJsBridge.h +++ b/ReactCommon/cxxreact/NativeToJsBridge.h @@ -55,35 +55,6 @@ class NativeToJsBridge { */ void invokeCallback(double callbackId, folly::dynamic&& args); - /** - * Executes a JS method on the given executor synchronously, returning its - * return value. JSException will be thrown if JS throws an exception; - * another standard exception may be thrown for C++ bridge failures, or if - * the executor is not capable of synchronous calls. - * - * This method is experimental, and may be modified or removed. - * - * loadApplicationScriptSync() must be called and finished executing - * before callFunctionSync(). - */ - template - Value callFunctionSync(const std::string& module, const std::string& method, T&& args) { - if (*m_destroyed) { - throw std::logic_error( - folly::to("Synchronous call to ", module, ".", method, - " after bridge is destroyed")); - } - - JSCExecutor *jscExecutor = dynamic_cast(m_executor.get()); - if (!jscExecutor) { - throw std::invalid_argument( - folly::to("Executor type ", typeid(m_executor.get()).name(), - " does not support synchronous calls")); - } - - return jscExecutor->callFunctionSync(module, method, std::forward(args)); - } - /** * Starts the JS application. If bundleRegistry is non-null, then it is * used to fetch JavaScript modules as individual scripts. From 9366ce416fbf015e4795987d39a65199b1b335c2 Mon Sep 17 00:00:00 2001 From: Maksym Komarychev Date: Mon, 5 Mar 2018 15:46:32 -0800 Subject: [PATCH 13/50] Update opacity when `disabled` prop is changed Summary: fixes #17105 If you render ``` ... ``` and then ``` ... ``` The content of `TouchableOpacity` will still have opacity = 0.5 because real opacity is controlled by animated property which should be properly updated when `disabled` prop changes. Usually when a button or other UI component is built with `TouchableOpacity` you may want to change it's opacity if state of component is changed (enabled/disabled). Opacity provided in props is overridden with internally-managed animated value. Add extra check when component is updated to trigger opacity animation upon change of `disabled` flag. You can use code from https://github.com/facebook/react-native/issues/17105. (If this PR adds or changes functionality, please take some time to update the docs at https://github.com/facebook/react-native-website, and link to your PR here.) [GENERAL][BUGFIX][TouchableOpacity] - trigger animation on `opacity` upon change in `disabled` prop. Closes https://github.com/facebook/react-native/pull/17106 Differential Revision: D7158549 Pulled By: hramos fbshipit-source-id: 209cc433b829b129810e8a884964c8853ca3fe8f --- Libraries/Components/Touchable/TouchableOpacity.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/Libraries/Components/Touchable/TouchableOpacity.js b/Libraries/Components/Touchable/TouchableOpacity.js index abb77ac95a38..cbffbb597849 100644 --- a/Libraries/Components/Touchable/TouchableOpacity.js +++ b/Libraries/Components/Touchable/TouchableOpacity.js @@ -160,6 +160,12 @@ const TouchableOpacity = createReactClass({ ensurePositiveDelayProps(nextProps); }, + componentDidUpdate: function(prevProps, prevState) { + if (this.props.disabled !== prevProps.disabled) { + this._opacityInactive(250); + } + }, + /** * Animate the touchable to a new opacity. */ From b4ce4277af6e14dc2bdfa20c874e95348fcbae8f Mon Sep 17 00:00:00 2001 From: Kevin Gozali Date: Mon, 5 Mar 2018 18:29:39 -0800 Subject: [PATCH 14/50] iOS: branch out Fabric handling into a separate RCTSurface-compatible class. Reviewed By: mmmulani Differential Revision: D7158824 fbshipit-source-id: 80eb61835181fa3f522b788e2861470cba88890a --- React/Base/RCTRootContentView.h | 10 +----- React/Base/RCTRootContentView.m | 25 +++------------ React/Base/RCTRootView.h | 25 +-------------- React/Base/RCTRootView.m | 23 ++----------- React/Base/Surface/RCTSurface.h | 22 ++++++++----- React/Base/Surface/RCTSurface.mm | 32 ++++++++----------- .../RCTSurfaceHostingProxyRootView.h | 14 +------- .../RCTSurfaceHostingProxyRootView.mm | 26 ++------------- .../RCTSurfaceHostingView.h | 10 +++--- .../RCTSurfaceHostingView.mm | 20 +++++------- React/Fabric/Surface/RCTFabricSurface.h | 16 ++++++++++ React/Fabric/Surface/RCTFabricSurface.mm | 22 +++++++++++++ .../RCTFabricSurfaceHostingProxyRootView.h | 16 ++++++++++ .../RCTFabricSurfaceHostingProxyRootView.mm | 19 +++++++++++ .../Surface/RCTFabricSurfaceHostingView.h | 16 ++++++++++ .../Surface/RCTFabricSurfaceHostingView.mm | 25 +++++++++++++++ 16 files changed, 165 insertions(+), 156 deletions(-) create mode 100644 React/Fabric/Surface/RCTFabricSurface.h create mode 100644 React/Fabric/Surface/RCTFabricSurface.mm create mode 100644 React/Fabric/Surface/RCTFabricSurfaceHostingProxyRootView.h create mode 100644 React/Fabric/Surface/RCTFabricSurfaceHostingProxyRootView.mm create mode 100644 React/Fabric/Surface/RCTFabricSurfaceHostingView.h create mode 100644 React/Fabric/Surface/RCTFabricSurfaceHostingView.mm diff --git a/React/Base/RCTRootContentView.h b/React/Base/RCTRootContentView.h index bd14cfb2005e..28a0646cfed7 100644 --- a/React/Base/RCTRootContentView.h +++ b/React/Base/RCTRootContentView.h @@ -24,17 +24,9 @@ @property (nonatomic, assign) BOOL passThroughTouches; @property (nonatomic, assign) RCTRootViewSizeFlexibility sizeFlexibility; -@property (nonatomic, assign) BOOL fabric; - -- (instancetype)initWithFrame:(CGRect)frame - bridge:(RCTBridge *)bridge - reactTag:(NSNumber *)reactTag - sizeFlexiblity:(RCTRootViewSizeFlexibility)sizeFlexibility - fabric:(BOOL)fabric NS_DESIGNATED_INITIALIZER; - - (instancetype)initWithFrame:(CGRect)frame bridge:(RCTBridge *)bridge reactTag:(NSNumber *)reactTag - sizeFlexiblity:(RCTRootViewSizeFlexibility)sizeFlexibility; + sizeFlexiblity:(RCTRootViewSizeFlexibility)sizeFlexibility NS_DESIGNATED_INITIALIZER; @end diff --git a/React/Base/RCTRootContentView.m b/React/Base/RCTRootContentView.m index 7782d06f02c3..67b1f8b70021 100644 --- a/React/Base/RCTRootContentView.m +++ b/React/Base/RCTRootContentView.m @@ -21,10 +21,8 @@ - (instancetype)initWithFrame:(CGRect)frame bridge:(RCTBridge *)bridge reactTag:(NSNumber *)reactTag sizeFlexiblity:(RCTRootViewSizeFlexibility)sizeFlexibility - fabric:(BOOL)fabric { if ((self = [super initWithFrame:frame])) { - _fabric = fabric; _bridge = bridge; self.reactTag = reactTag; _sizeFlexibility = sizeFlexibility; @@ -35,14 +33,6 @@ - (instancetype)initWithFrame:(CGRect)frame return self; } -- (instancetype)initWithFrame:(CGRect)frame - bridge:(RCTBridge *)bridge - reactTag:(NSNumber *)reactTag - sizeFlexiblity:(RCTRootViewSizeFlexibility)sizeFlexibility -{ - return [self initWithFrame:frame bridge:bridge reactTag:reactTag sizeFlexiblity:sizeFlexibility fabric:NO]; -} - RCT_NOT_IMPLEMENTED(-(instancetype)initWithFrame:(CGRect)frame) RCT_NOT_IMPLEMENTED(-(instancetype)initWithCoder:(nonnull NSCoder *)aDecoder) @@ -109,17 +99,10 @@ - (void)invalidate self.userInteractionEnabled = NO; [(RCTRootView *)self.superview contentViewInvalidated]; - if (_fabric) { - [_bridge enqueueJSCall:@"ReactFabric" - method:@"unmountComponentAtNodeAndRemoveContainer" - args:@[self.reactTag] - completion:NULL]; - } else { - [_bridge enqueueJSCall:@"AppRegistry" - method:@"unmountApplicationComponentAtRootTag" - args:@[self.reactTag] - completion:NULL]; - } + [_bridge enqueueJSCall:@"AppRegistry" + method:@"unmountApplicationComponentAtRootTag" + args:@[self.reactTag] + completion:NULL]; } } diff --git a/React/Base/RCTRootView.h b/React/Base/RCTRootView.h index 41c21f672fdb..daab13efbe8c 100644 --- a/React/Base/RCTRootView.h +++ b/React/Base/RCTRootView.h @@ -44,16 +44,7 @@ extern NSString *const RCTContentDidAppearNotification; */ - (instancetype)initWithBridge:(RCTBridge *)bridge moduleName:(NSString *)moduleName - initialProperties:(NSDictionary *)initialProperties - fabric:(BOOL)fabric NS_DESIGNATED_INITIALIZER; - -/** - * - Convenience initializer - - * Initialize without using FabricUIManager. - */ -- (instancetype)initWithBridge:(RCTBridge *)bridge - moduleName:(NSString *)moduleName - initialProperties:(NSDictionary *)initialProperties; + initialProperties:(NSDictionary *)initialProperties NS_DESIGNATED_INITIALIZER; /** * - Convenience initializer - @@ -67,15 +58,6 @@ extern NSString *const RCTContentDidAppearNotification; initialProperties:(NSDictionary *)initialProperties launchOptions:(NSDictionary *)launchOptions; -/** - * - Convenience initializer - - */ -- (instancetype)initWithBundleURL:(NSURL *)bundleURL - moduleName:(NSString *)moduleName - initialProperties:(NSDictionary *)initialProperties - launchOptions:(NSDictionary *)launchOptions - fabric:(BOOL)fabric; - /** * The name of the JavaScript module to execute within the @@ -165,11 +147,6 @@ extern NSString *const RCTContentDidAppearNotification; @property (nonatomic, assign) NSTimeInterval loadingViewFadeDelay; @property (nonatomic, assign) NSTimeInterval loadingViewFadeDuration; -/** - * Indicates whether this view is managed by FabricUIManager or the traditional UIManager. - */ -@property (nonatomic, assign) BOOL fabric; - @end @interface RCTRootView (Deprecated) diff --git a/React/Base/RCTRootView.m b/React/Base/RCTRootView.m index 8fabbd6e8473..204dd5871be1 100644 --- a/React/Base/RCTRootView.m +++ b/React/Base/RCTRootView.m @@ -52,7 +52,6 @@ @implementation RCTRootView - (instancetype)initWithBridge:(RCTBridge *)bridge moduleName:(NSString *)moduleName initialProperties:(NSDictionary *)initialProperties - fabric:(BOOL)fabric { RCTAssertMainQueue(); RCTAssert(bridge, @"A bridge instance is required to create an RCTRootView"); @@ -66,7 +65,6 @@ - (instancetype)initWithBridge:(RCTBridge *)bridge if (self = [super initWithFrame:CGRectZero]) { self.backgroundColor = [UIColor whiteColor]; - _fabric = fabric; _bridge = bridge; _moduleName = moduleName; _appProperties = [initialProperties copy]; @@ -108,32 +106,16 @@ - (instancetype)initWithBridge:(RCTBridge *)bridge return self; } -- (instancetype)initWithBridge:(RCTBridge *)bridge - moduleName:(NSString *)moduleName - initialProperties:(NSDictionary *)initialProperties -{ - return [self initWithBridge:bridge moduleName:moduleName initialProperties:initialProperties fabric:NO]; -} - - (instancetype)initWithBundleURL:(NSURL *)bundleURL moduleName:(NSString *)moduleName initialProperties:(NSDictionary *)initialProperties launchOptions:(NSDictionary *)launchOptions - fabric:(BOOL)fabric { RCTBridge *bridge = [[RCTBridge alloc] initWithBundleURL:bundleURL moduleProvider:nil launchOptions:launchOptions]; - return [self initWithBridge:bridge moduleName:moduleName initialProperties:initialProperties fabric:fabric]; -} - -- (instancetype)initWithBundleURL:(NSURL *)bundleURL - moduleName:(NSString *)moduleName - initialProperties:(NSDictionary *)initialProperties - launchOptions:(NSDictionary *)launchOptions -{ - return [self initWithBundleURL:bundleURL moduleName:moduleName initialProperties:initialProperties launchOptions:launchOptions fabric:NO]; + return [self initWithBridge:bridge moduleName:moduleName initialProperties:initialProperties]; } RCT_NOT_IMPLEMENTED(- (instancetype)initWithFrame:(CGRect)frame) @@ -289,8 +271,7 @@ - (void)bundleFinishedLoading:(RCTBridge *)bridge _contentView = [[RCTRootContentView alloc] initWithFrame:self.bounds bridge:bridge reactTag:self.reactTag - sizeFlexiblity:_sizeFlexibility - fabric:self.fabric]; + sizeFlexiblity:_sizeFlexibility]; [self runApplication:bridge]; _contentView.passThroughTouches = _passThroughTouches; diff --git a/React/Base/Surface/RCTSurface.h b/React/Base/Surface/RCTSurface.h index 01d4896f9e30..5c3566725e49 100644 --- a/React/Base/Surface/RCTSurface.h +++ b/React/Base/Surface/RCTSurface.h @@ -42,16 +42,9 @@ NS_ASSUME_NONNULL_BEGIN @property (atomic, copy, readwrite) NSDictionary *properties; -@property (nonatomic, assign, readonly) BOOL fabric; - -- (instancetype)initWithBridge:(RCTBridge *)bridge - moduleName:(NSString *)moduleName - initialProperties:(NSDictionary *)initialProperties - fabric:(BOOL)fabric NS_DESIGNATED_INITIALIZER; - - (instancetype)initWithBridge:(RCTBridge *)bridge moduleName:(NSString *)moduleName - initialProperties:(NSDictionary *)initialProperties; + initialProperties:(NSDictionary *)initialProperties NS_DESIGNATED_INITIALIZER; #pragma mark - Dealing with UIView representation, the Main thread only access @@ -122,6 +115,19 @@ NS_ASSUME_NONNULL_BEGIN */ - (BOOL)synchronouslyWaitForStage:(RCTSurfaceStage)stage timeout:(NSTimeInterval)timeout; +#pragma mark - Mounting/Unmounting of React components + +/** + * Mount the React component specified by the given moduleName. This is typically + * calling runApplication.js from the native side. + */ +- (void)mountReactComponentWithBridge:(RCTBridge *)bridge moduleName:(NSString *)moduleName params:(NSDictionary *)params; + +/** + * Unmount the React component specified by the given rootViewTag, called from native. + */ +- (void)unmountReactComponentWithBridge:(RCTBridge *)bridge rootViewTag:(NSNumber *)rootViewTag; + @end NS_ASSUME_NONNULL_END diff --git a/React/Base/Surface/RCTSurface.mm b/React/Base/Surface/RCTSurface.mm index eac4985e04c3..2817cf29aa64 100644 --- a/React/Base/Surface/RCTSurface.mm +++ b/React/Base/Surface/RCTSurface.mm @@ -61,12 +61,10 @@ @implementation RCTSurface { - (instancetype)initWithBridge:(RCTBridge *)bridge moduleName:(NSString *)moduleName initialProperties:(NSDictionary *)initialProperties - fabric:(BOOL)fabric { RCTAssert(bridge.valid, @"Valid bridge is required to instanciate `RCTSurface`."); if (self = [super init]) { - _fabric = fabric; _bridge = bridge; _batchedBridge = [_bridge batchedBridge] ?: _bridge; _moduleName = moduleName; @@ -105,13 +103,6 @@ - (instancetype)initWithBridge:(RCTBridge *)bridge return self; } -- (instancetype)initWithBridge:(RCTBridge *)bridge - moduleName:(NSString *)moduleName - initialProperties:(NSDictionary *)initialProperties -{ - return [self initWithBridge:bridge moduleName:moduleName initialProperties:initialProperties fabric:NO]; -} - - (void)dealloc { [self _stop]; @@ -310,21 +301,14 @@ - (void)_run RCTLogInfo(@"Running surface %@ (%@)", _moduleName, applicationParameters); - [batchedBridge enqueueJSCall:@"AppRegistry" - method:@"runApplication" - args:@[_moduleName, applicationParameters] - completion:NULL]; + [self mountReactComponentWithBridge:batchedBridge moduleName:_moduleName params:applicationParameters]; [self _setStage:RCTSurfaceStageSurfaceDidRun]; } - (void)_stop { - RCTBridge *batchedBridge = self._batchedBridge; - [batchedBridge enqueueJSCall:@"AppRegistry" - method:@"unmountApplicationComponentAtRootTag" - args:@[self->_rootViewTag] - completion:NULL]; + [self unmountReactComponentWithBridge:self._batchedBridge rootViewTag:self->_rootViewTag]; } - (void)_registerRootView @@ -571,4 +555,16 @@ - (void)uiManagerDidPerformMounting:(RCTUIManager *)manager } } +#pragma mark - Mounting/Unmounting of React components + +- (void)mountReactComponentWithBridge:(RCTBridge *)bridge moduleName:(NSString *)moduleName params:(NSDictionary *)params +{ + [bridge enqueueJSCall:@"AppRegistry" method:@"runApplication" args:@[moduleName, params] completion:NULL]; +} + +- (void)unmountReactComponentWithBridge:(RCTBridge *)bridge rootViewTag:(NSNumber *)rootViewTag +{ + [bridge enqueueJSCall:@"AppRegistry" method:@"unmountApplicationComponentAtRootTag" args:@[rootViewTag] completion:NULL]; +} + @end diff --git a/React/Base/Surface/SurfaceHostingView/RCTSurfaceHostingProxyRootView.h b/React/Base/Surface/SurfaceHostingView/RCTSurfaceHostingProxyRootView.h index b761cc33bde8..6e07b1ac0a8f 100644 --- a/React/Base/Surface/SurfaceHostingView/RCTSurfaceHostingProxyRootView.h +++ b/React/Base/Surface/SurfaceHostingView/RCTSurfaceHostingProxyRootView.h @@ -35,28 +35,16 @@ NS_ASSUME_NONNULL_BEGIN @property (nonatomic, assign) BOOL passThroughTouches; @property (nonatomic, assign) NSTimeInterval loadingViewFadeDelay; @property (nonatomic, assign) NSTimeInterval loadingViewFadeDuration; -@property (nonatomic, assign) BOOL fabric; - (instancetype)initWithBridge:(RCTBridge *)bridge moduleName:(NSString *)moduleName - initialProperties:(NSDictionary *)initialProperties - fabric:(BOOL)fabric NS_DESIGNATED_INITIALIZER; - -- (instancetype)initWithBridge:(RCTBridge *)bridge - moduleName:(NSString *)moduleName - initialProperties:(NSDictionary *)initialProperties; + initialProperties:(NSDictionary *)initialProperties NS_DESIGNATED_INITIALIZER; - (instancetype)initWithBundleURL:(NSURL *)bundleURL moduleName:(NSString *)moduleName initialProperties:(NSDictionary *)initialProperties launchOptions:(NSDictionary *)launchOptions; -- (instancetype)initWithBundleURL:(NSURL *)bundleURL - moduleName:(NSString *)moduleName - initialProperties:(NSDictionary *)initialProperties - launchOptions:(NSDictionary *)launchOptions - fabric:(BOOL)fabric; - - (void)cancelTouches; @end diff --git a/React/Base/Surface/SurfaceHostingView/RCTSurfaceHostingProxyRootView.mm b/React/Base/Surface/SurfaceHostingView/RCTSurfaceHostingProxyRootView.mm index 114b1f3981bf..4fc100f6b6c1 100644 --- a/React/Base/Surface/SurfaceHostingView/RCTSurfaceHostingProxyRootView.mm +++ b/React/Base/Surface/SurfaceHostingView/RCTSurfaceHostingProxyRootView.mm @@ -51,7 +51,6 @@ @implementation RCTSurfaceHostingProxyRootView - (instancetype)initWithBridge:(RCTBridge *)bridge moduleName:(NSString *)moduleName initialProperties:(NSDictionary *)initialProperties - fabric:(BOOL)fabric { RCTAssertMainQueue(); RCTAssert(bridge, @"A bridge instance is required to create an RCTSurfaceHostingProxyRootView"); @@ -62,7 +61,7 @@ - (instancetype)initWithBridge:(RCTBridge *)bridge [bridge.performanceLogger markStartForTag:RCTPLTTI]; } - if (self = [super initWithBridge:bridge moduleName:moduleName initialProperties:initialProperties fabric:fabric]) { + if (self = [super initWithBridge:bridge moduleName:moduleName initialProperties:initialProperties]) { self.backgroundColor = [UIColor whiteColor]; } @@ -71,32 +70,16 @@ - (instancetype)initWithBridge:(RCTBridge *)bridge return self; } -- (instancetype)initWithBridge:(RCTBridge *)bridge - moduleName:(NSString *)moduleName - initialProperties:(NSDictionary *)initialProperties -{ - return [self initWithBridge:bridge moduleName:moduleName initialProperties:initialProperties fabric:NO]; -} - - (instancetype)initWithBundleURL:(NSURL *)bundleURL moduleName:(NSString *)moduleName initialProperties:(NSDictionary *)initialProperties launchOptions:(NSDictionary *)launchOptions - fabric:(BOOL)fabric { RCTBridge *bridge = [[RCTBridge alloc] initWithBundleURL:bundleURL moduleProvider:nil launchOptions:launchOptions]; - return [self initWithBridge:bridge moduleName:moduleName initialProperties:initialProperties fabric:fabric]; -} - -- (instancetype)initWithBundleURL:(NSURL *)bundleURL - moduleName:(NSString *)moduleName - initialProperties:(NSDictionary *)initialProperties - launchOptions:(NSDictionary *)launchOptions -{ - return [self initWithBundleURL:bundleURL moduleName:moduleName initialProperties:initialProperties launchOptions:launchOptions fabric:NO]; + return [self initWithBridge:bridge moduleName:moduleName initialProperties:initialProperties]; } RCT_NOT_IMPLEMENTED(- (instancetype)initWithFrame:(CGRect)frame) @@ -114,11 +97,6 @@ - (RCTBridge *)bridge return super.surface.bridge; } -- (BOOL)fabric -{ - return super.surface.fabric; -} - - (UIView *)contentView { return self; diff --git a/React/Base/Surface/SurfaceHostingView/RCTSurfaceHostingView.h b/React/Base/Surface/SurfaceHostingView/RCTSurfaceHostingView.h index 6f6ffe50f599..4434df84e005 100644 --- a/React/Base/Surface/SurfaceHostingView/RCTSurfaceHostingView.h +++ b/React/Base/Surface/SurfaceHostingView/RCTSurfaceHostingView.h @@ -43,13 +43,11 @@ NS_ASSUME_NONNULL_BEGIN initialProperties:(NSDictionary *)initialProperties; /** - * Convenience initializer. - * To control toggle Fabric for the Surface. + * Create an instance of RCTSurface to be hosted. */ -- (instancetype)initWithBridge:(RCTBridge *)bridge - moduleName:(NSString *)moduleName - initialProperties:(NSDictionary *)initialProperties - fabric:(BOOL)fabric; +- (RCTSurface *)createSurfaceWithBridge:(RCTBridge *)bridge + moduleName:(NSString *)moduleName + initialProperties:(NSDictionary *)initialProperties; /** * Surface object which is currently using to power the view. diff --git a/React/Base/Surface/SurfaceHostingView/RCTSurfaceHostingView.mm b/React/Base/Surface/SurfaceHostingView/RCTSurfaceHostingView.mm index de4f5ec97332..3c3ab2bf7fa8 100644 --- a/React/Base/Surface/SurfaceHostingView/RCTSurfaceHostingView.mm +++ b/React/Base/Surface/SurfaceHostingView/RCTSurfaceHostingView.mm @@ -33,23 +33,12 @@ @implementation RCTSurfaceHostingView { - (instancetype)initWithBridge:(RCTBridge *)bridge moduleName:(NSString *)moduleName initialProperties:(NSDictionary *)initialProperties - fabric:(BOOL)fabric { - RCTSurface *surface = [[RCTSurface alloc] initWithBridge:bridge - moduleName:moduleName - initialProperties:initialProperties - fabric:fabric]; + RCTSurface *surface = [self createSurfaceWithBridge:bridge moduleName:moduleName initialProperties:initialProperties]; return [self initWithSurface:surface]; } -- (instancetype)initWithBridge:(RCTBridge *)bridge - moduleName:(NSString *)moduleName - initialProperties:(NSDictionary *)initialProperties -{ - return [self initWithBridge:bridge moduleName:moduleName initialProperties:initialProperties fabric:NO]; -} - - (instancetype)initWithSurface:(RCTSurface *)surface { if (self = [super initWithFrame:CGRectZero]) { @@ -67,6 +56,13 @@ - (instancetype)initWithSurface:(RCTSurface *)surface return self; } +- (RCTSurface *)createSurfaceWithBridge:(RCTBridge *)bridge + moduleName:(NSString *)moduleName + initialProperties:(NSDictionary *)initialProperties +{ + return [[RCTSurface alloc] initWithBridge:bridge moduleName:moduleName initialProperties:initialProperties]; +} + - (void)setFrame:(CGRect)frame { [super setFrame:frame]; diff --git a/React/Fabric/Surface/RCTFabricSurface.h b/React/Fabric/Surface/RCTFabricSurface.h new file mode 100644 index 000000000000..1672a9a86ac6 --- /dev/null +++ b/React/Fabric/Surface/RCTFabricSurface.h @@ -0,0 +1,16 @@ +/** + * Copyright (c) 2015-present, Facebook, Inc. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +#import + +/** + * Fabric-compatible RCTSurface implementation. + * It may not continue extending from RCTSurface in the future. + */ +@interface RCTFabricSurface : RCTSurface + +@end diff --git a/React/Fabric/Surface/RCTFabricSurface.mm b/React/Fabric/Surface/RCTFabricSurface.mm new file mode 100644 index 000000000000..bcdaac13129e --- /dev/null +++ b/React/Fabric/Surface/RCTFabricSurface.mm @@ -0,0 +1,22 @@ +/** + * Copyright (c) 2015-present, Facebook, Inc. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +#import "RCTFabricSurface.h" + +#import + +@implementation RCTFabricSurface + +- (void)unmountReactComponentWithBridge:(RCTBridge *)bridge rootViewTag:(NSNumber *)rootViewTag +{ + [bridge enqueueJSCall:@"ReactFabric" + method:@"unmountComponentAtNodeAndRemoveContainer" + args:@[rootViewTag] + completion:NULL]; +} + +@end diff --git a/React/Fabric/Surface/RCTFabricSurfaceHostingProxyRootView.h b/React/Fabric/Surface/RCTFabricSurfaceHostingProxyRootView.h new file mode 100644 index 000000000000..3214426e77d6 --- /dev/null +++ b/React/Fabric/Surface/RCTFabricSurfaceHostingProxyRootView.h @@ -0,0 +1,16 @@ +/** + * Copyright (c) 2015-present, Facebook, Inc. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +#import + +/** + * Fabric-compatible RCTSurfaceHostingProxyRootView implementation. + */ +@interface RCTFabricSurfaceHostingProxyRootView : RCTSurfaceHostingProxyRootView + +@end + diff --git a/React/Fabric/Surface/RCTFabricSurfaceHostingProxyRootView.mm b/React/Fabric/Surface/RCTFabricSurfaceHostingProxyRootView.mm new file mode 100644 index 000000000000..159a63c865e4 --- /dev/null +++ b/React/Fabric/Surface/RCTFabricSurfaceHostingProxyRootView.mm @@ -0,0 +1,19 @@ +/** + * Copyright (c) 2015-present, Facebook, Inc. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +#import "RCTFabricSurfaceHostingProxyRootView.h" + +#import "RCTFabricSurface.h" + +@implementation RCTFabricSurfaceHostingProxyRootView + +- (RCTSurface *)createSurfaceWithBridge:(RCTBridge *)bridge moduleName:(NSString *)moduleName initialProperties:(NSDictionary *)initialProperties +{ + return [[RCTFabricSurface alloc] initWithBridge:bridge moduleName:moduleName initialProperties:initialProperties]; +} + +@end diff --git a/React/Fabric/Surface/RCTFabricSurfaceHostingView.h b/React/Fabric/Surface/RCTFabricSurfaceHostingView.h new file mode 100644 index 000000000000..c50fa51acee9 --- /dev/null +++ b/React/Fabric/Surface/RCTFabricSurfaceHostingView.h @@ -0,0 +1,16 @@ +/** + * Copyright (c) 2015-present, Facebook, Inc. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +#import + +/** + * Fabric-compatible RCTSurfaceHostingView implementation. + */ +@interface RCTFabricSurfaceHostingView : RCTSurfaceHostingView + +@end + diff --git a/React/Fabric/Surface/RCTFabricSurfaceHostingView.mm b/React/Fabric/Surface/RCTFabricSurfaceHostingView.mm new file mode 100644 index 000000000000..395d40afb68e --- /dev/null +++ b/React/Fabric/Surface/RCTFabricSurfaceHostingView.mm @@ -0,0 +1,25 @@ +/** + * Copyright (c) 2015-present, Facebook, Inc. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +#import "RCTFabricSurfaceHostingView.h" + +#import "RCTFabricSurface.h" + +@implementation RCTFabricSurfaceHostingView + +- (instancetype)initWithBridge:(RCTBridge *)bridge + moduleName:(NSString *)moduleName + initialProperties:(NSDictionary *)initialProperties +{ + RCTFabricSurface *surface = [[RCTFabricSurface alloc] initWithBridge:bridge + moduleName:moduleName + initialProperties:initialProperties]; + return [self initWithSurface:surface]; +} + +@end + From b98bf1e09739860d82e37225f1635bba3bc817b3 Mon Sep 17 00:00:00 2001 From: Eli White Date: Mon, 5 Mar 2018 18:34:33 -0800 Subject: [PATCH 15/50] Remove polymorphic types from StyleSheetTypes Summary: These types were polymorphic so that stricter types could be passed in for dimension or color. For example, color could be a union of allowed colors. However, since `rgb(0,0,0)` is a valid color, these would have to be allowed opaque types and every creator or caller of these colors would have to use a function. This would require a massive change to every RN product in the world for negligable gain because StyleSheet values are validated at dev at runtime and cause redboxes for invalid uses. Since we don't plan to adopt these widely, lets clean up the complexity of these types. Reviewed By: sahrens Differential Revision: D7158920 fbshipit-source-id: c58ae402c8248b0863c217c27153191a49c6b980 --- Libraries/StyleSheet/StyleSheetTypes.js | 116 ++++++++++++------------ Libraries/StyleSheet/flattenStyle.js | 4 +- 2 files changed, 60 insertions(+), 60 deletions(-) diff --git a/Libraries/StyleSheet/StyleSheetTypes.js b/Libraries/StyleSheet/StyleSheetTypes.js index cfd0f50bba2c..9d4916e66558 100644 --- a/Libraries/StyleSheet/StyleSheetTypes.js +++ b/Libraries/StyleSheet/StyleSheetTypes.js @@ -18,38 +18,38 @@ export opaque type StyleSheetStyle: number = number; export type ColorValue = null | string; export type DimensionValue = null | number | string | AnimatedNode; -export type LayoutStyle<+Dimension = DimensionValue> = { +export type LayoutStyle = { +display?: 'none' | 'flex', - +width?: Dimension, - +height?: Dimension, - +bottom?: Dimension, - +end?: Dimension, - +left?: Dimension, - +right?: Dimension, - +start?: Dimension, - +top?: Dimension, - +minWidth?: Dimension, - +maxWidth?: Dimension, - +minHeight?: Dimension, - +maxHeight?: Dimension, - +margin?: Dimension, - +marginBottom?: Dimension, - +marginEnd?: Dimension, - +marginHorizontal?: Dimension, - +marginLeft?: Dimension, - +marginRight?: Dimension, - +marginStart?: Dimension, - +marginTop?: Dimension, - +marginVertical?: Dimension, - +padding?: Dimension, - +paddingBottom?: Dimension, - +paddingEnd?: Dimension, - +paddingHorizontal?: Dimension, - +paddingLeft?: Dimension, - +paddingRight?: Dimension, - +paddingStart?: Dimension, - +paddingTop?: Dimension, - +paddingVertical?: Dimension, + +width?: DimensionValue, + +height?: DimensionValue, + +bottom?: DimensionValue, + +end?: DimensionValue, + +left?: DimensionValue, + +right?: DimensionValue, + +start?: DimensionValue, + +top?: DimensionValue, + +minWidth?: DimensionValue, + +maxWidth?: DimensionValue, + +minHeight?: DimensionValue, + +maxHeight?: DimensionValue, + +margin?: DimensionValue, + +marginBottom?: DimensionValue, + +marginEnd?: DimensionValue, + +marginHorizontal?: DimensionValue, + +marginLeft?: DimensionValue, + +marginRight?: DimensionValue, + +marginStart?: DimensionValue, + +marginTop?: DimensionValue, + +marginVertical?: DimensionValue, + +padding?: DimensionValue, + +paddingBottom?: DimensionValue, + +paddingEnd?: DimensionValue, + +paddingHorizontal?: DimensionValue, + +paddingLeft?: DimensionValue, + +paddingRight?: DimensionValue, + +paddingStart?: DimensionValue, + +paddingTop?: DimensionValue, + +paddingVertical?: DimensionValue, +borderWidth?: number, +borderBottomWidth?: number, +borderEndWidth?: number, @@ -114,8 +114,8 @@ export type TransformStyle = { >, }; -export type ShadowStyle<+Color = ColorValue> = { - +shadowColor?: Color, +export type ShadowStyle = { + +shadowColor?: ColorValue, +shadowOffset?: { +width?: number, +height?: number, @@ -124,19 +124,19 @@ export type ShadowStyle<+Color = ColorValue> = { +shadowRadius?: number, }; -export type ViewStyle<+Dimension = DimensionValue, +Color = ColorValue> = { - ...$Exact>, - ...$Exact>, +export type ViewStyle = { + ...$Exact, + ...$Exact, ...$Exact, +backfaceVisibility?: 'visible' | 'hidden', - +backgroundColor?: Color, - +borderColor?: Color, - +borderBottomColor?: Color, - +borderEndColor?: Color, - +borderLeftColor?: Color, - +borderRightColor?: Color, - +borderStartColor?: Color, - +borderTopColor?: Color, + +backgroundColor?: ColorValue, + +borderColor?: ColorValue, + +borderBottomColor?: ColorValue, + +borderEndColor?: ColorValue, + +borderLeftColor?: ColorValue, + +borderRightColor?: ColorValue, + +borderStartColor?: ColorValue, + +borderTopColor?: ColorValue, +borderRadius?: number, +borderBottomEndRadius?: number, +borderBottomLeftRadius?: number, @@ -158,9 +158,9 @@ export type ViewStyle<+Dimension = DimensionValue, +Color = ColorValue> = { +elevation?: number, }; -export type TextStyle<+Dimension = DimensionValue, +Color = ColorValue> = { - ...$Exact>, - +color?: Color, +export type TextStyle = { + ...$Exact, + +color?: ColorValue, +fontFamily?: string, +fontSize?: number, +fontStyle?: 'normal' | 'italic', @@ -185,7 +185,7 @@ export type TextStyle<+Dimension = DimensionValue, +Color = ColorValue> = { >, +textShadowOffset?: {+width?: number, +height?: number}, +textShadowRadius?: number, - +textShadowColor?: Color, + +textShadowColor?: ColorValue, +letterSpacing?: number, +lineHeight?: number, +textAlign?: 'auto' | 'left' | 'right' | 'center' | 'justify', @@ -197,21 +197,21 @@ export type TextStyle<+Dimension = DimensionValue, +Color = ColorValue> = { | 'line-through' | 'underline line-through', +textDecorationStyle?: 'solid' | 'double' | 'dotted' | 'dashed', - +textDecorationColor?: Color, + +textDecorationColor?: ColorValue, +writingDirection?: 'auto' | 'ltr' | 'rtl', }; -export type ImageStyle<+Dimension = DimensionValue, +Color = ColorValue> = { - ...$Exact>, +export type ImageStyle = { + ...$Exact, +resizeMode?: 'contain' | 'cover' | 'stretch' | 'center' | 'repeat', - +tintColor?: Color, + +tintColor?: ColorValue, +overlayColor?: string, }; -export type Style<+Dimension = DimensionValue, +Color = ColorValue> = { - ...$Exact>, +export type Style = { + ...$Exact, +resizeMode?: 'contain' | 'cover' | 'stretch' | 'center' | 'repeat', - +tintColor?: Color, + +tintColor?: ColorValue, +overlayColor?: string, }; @@ -233,7 +233,7 @@ export type StyleProp<+T> = // $Shape>, // >; -export type StyleObj = StyleProp<$Shape>>; +export type StyleObj = StyleProp<$Shape