From 119959252e5e418e28eb5a2f660d4f9cf809817c Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Wed, 21 Jun 2017 12:23:58 -0700 Subject: [PATCH] Remove RN fiber createClass wrapper around View Reviewed By: spicyj Differential Revision: D5241527 fbshipit-source-id: 9209004544e83cc0f03fcaa27c9b1acf8db09930 --- Libraries/Components/ScrollView/ScrollView.js | 7 +- Libraries/Components/View/View.js | 103 +----------------- .../SwipeableQuickActionButton.js | 9 +- Libraries/Experimental/WindowedListView.js | 4 +- RNTester/js/RNTesterPage.js | 4 +- 5 files changed, 18 insertions(+), 109 deletions(-) diff --git a/Libraries/Components/ScrollView/ScrollView.js b/Libraries/Components/ScrollView/ScrollView.js index 463f77b6f..ec074ee0a 100644 --- a/Libraries/Components/ScrollView/ScrollView.js +++ b/Libraries/Components/ScrollView/ScrollView.js @@ -33,6 +33,8 @@ const invariant = require('fbjs/lib/invariant'); const processDecelerationRate = require('processDecelerationRate'); const requireNativeComponent = require('requireNativeComponent'); +import type {NativeMethodsMixinType} from 'ReactNativeTypes'; + /** * Component that wraps platform ScrollView while providing * integration with touch locking "responder" system. @@ -592,8 +594,8 @@ const ScrollView = React.createClass({ this._scrollViewRef = ref; }, - _innerViewRef: (null: ?View), - _setInnerViewRef: function(ref: ?View) { + _innerViewRef: (null: ?NativeMethodsMixinType), + _setInnerViewRef: function(ref: ?NativeMethodsMixinType) { this._innerViewRef = ref; }, @@ -825,6 +827,7 @@ if (Platform.OS === 'android') { (ScrollView: ReactClass), nativeOnlyProps, ); + // $FlowFixMe (bvaughn) Update ComponentInterface in ViewPropTypes to include a string type (for Fiber host components) in a follow-up. RCTScrollContentView = requireNativeComponent('RCTScrollContentView', View); } diff --git a/Libraries/Components/View/View.js b/Libraries/Components/View/View.js index 535a57ade..7b4586882 100644 --- a/Libraries/Components/View/View.js +++ b/Libraries/Components/View/View.js @@ -12,26 +12,15 @@ 'use strict'; const NativeMethodsMixin = require('NativeMethodsMixin'); -const NativeModules = require('NativeModules'); const Platform = require('Platform'); const PropTypes = require('prop-types'); const React = require('React'); -const ReactNativeFeatureFlags = require('ReactNativeFeatureFlags'); const ReactNativeStyleAttributes = require('ReactNativeStyleAttributes'); const ReactNativeViewAttributes = require('ReactNativeViewAttributes'); const ViewPropTypes = require('ViewPropTypes'); const invariant = require('fbjs/lib/invariant'); const requireNativeComponent = require('requireNativeComponent'); -const warning = require('fbjs/lib/warning'); - -const { - AccessibilityComponentTypes, - AccessibilityTraits, -} = require('ViewAccessibility'); - -const forceTouchAvailable = (NativeModules.PlatformConstants && - NativeModules.PlatformConstants.forceTouchAvailable) || false; import type {ViewProps} from 'ViewPropTypes'; @@ -94,18 +83,9 @@ const View = React.createClass({ // `propTypes` should not be accessed directly on View since this wrapper only // exists for DEV mode. However it's important for them to be declared. // If the object passed to `createClass` specifies `propTypes`, Flow will - // create a static type from it. This property will be over-written below with - // a warn-on-use getter though. - // TODO (bvaughn) Remove the warn-on-use comment after April 1. + // create a static type from it. propTypes: ViewPropTypes, - // ReactElementValidator will (temporarily) use this private accessor when - // detected to avoid triggering the warning message. - // TODO (bvaughn) Remove this after April 1 ReactNative RC is tagged. - statics: { - __propTypesSecretDontUseThesePlease: ViewPropTypes - }, - /** * `NativeMethodsMixin` will look for this when invoking `setNativeProps`. We * make `this` look like an actual native component class. @@ -132,70 +112,6 @@ const View = React.createClass({ }, }); -// Warn about unsupported use of View static properties as these will no longer -// be supported with React fiber. This warning message will go away in the next -// ReactNative release. Use defineProperty() rather than createClass() statics -// because the mixin process auto-triggers the 1-time warning message. -// TODO (bvaughn) Remove this after April 1 ReactNative RC is tagged. -function mixinStatics (target) { - let warnedAboutAccessibilityTraits = false; - let warnedAboutAccessibilityComponentType = false; - let warnedAboutForceTouchAvailable = false; - let warnedAboutPropTypes = false; - - // $FlowFixMe https://github.com/facebook/flow/issues/285 - Object.defineProperty(target, 'AccessibilityTraits', { - get: function() { - warning( - warnedAboutAccessibilityTraits, - 'View.AccessibilityTraits has been deprecated and will be ' + - 'removed in a future version of ReactNative. Use ' + - 'ViewAccessibility.AccessibilityTraits instead.' - ); - warnedAboutAccessibilityTraits = true; - return AccessibilityTraits; - } - }); - // $FlowFixMe https://github.com/facebook/flow/issues/285 - Object.defineProperty(target, 'AccessibilityComponentType', { - get: function() { - warning( - warnedAboutAccessibilityComponentType, - 'View.AccessibilityComponentType has been deprecated and will be ' + - 'removed in a future version of ReactNative. Use ' + - 'ViewAccessibility.AccessibilityComponentTypes instead.' - ); - warnedAboutAccessibilityComponentType = true; - return AccessibilityComponentTypes; - } - }); - // $FlowFixMe https://github.com/facebook/flow/issues/285 - Object.defineProperty(target, 'forceTouchAvailable', { - get: function() { - warning( - warnedAboutForceTouchAvailable, - 'View.forceTouchAvailable has been deprecated and will be removed ' + - 'in a future version of ReactNative. Use ' + - 'NativeModules.PlatformConstants.forceTouchAvailable instead.' - ); - warnedAboutForceTouchAvailable = true; - return forceTouchAvailable; - } - }); - // $FlowFixMe https://github.com/facebook/flow/issues/285 - Object.defineProperty(target, 'propTypes', { - get: function() { - warning( - warnedAboutPropTypes, - 'View.propTypes has been deprecated and will be removed in a future ' + - 'version of ReactNative. Use ViewPropTypes instead.' - ); - warnedAboutPropTypes = true; - return ViewPropTypes; - } - }); -} - const RCTView = requireNativeComponent('RCTView', View, { nativeOnly: { nativeBackgroundAndroid: true, @@ -216,21 +132,10 @@ if (__DEV__) { } } -// TODO (bvaughn) Remove feature flags once all static View accessors are gone. -// We temporarily wrap fiber native views with the create-class View above, -// Because external code sometimes accesses static properties of this view. let ViewToExport = RCTView; -if ( - __DEV__ || - ReactNativeFeatureFlags.useFiber -) { - mixinStatics(View); +if (__DEV__) { ViewToExport = View; -} else { - // TODO (bvaughn) Remove this mixin once all static View accessors are gone. - mixinStatics((RCTView : any)); } -// TODO (bvaughn) Temporarily mask Flow warnings for View property accesses. -// We're wrapping the string type (Fiber) for now to avoid any actual problems. -module.exports = ((ViewToExport : any) : typeof View); +// No one should depend on the DEV-mode createClass View wrapper. +module.exports = ((ViewToExport : any) : typeof RCTView); diff --git a/Libraries/Experimental/SwipeableRow/SwipeableQuickActionButton.js b/Libraries/Experimental/SwipeableRow/SwipeableQuickActionButton.js index ec6780e9d..afab08319 100644 --- a/Libraries/Experimental/SwipeableRow/SwipeableQuickActionButton.js +++ b/Libraries/Experimental/SwipeableRow/SwipeableQuickActionButton.js @@ -12,12 +12,11 @@ 'use strict'; const Image = require('Image'); -const React = require('React'); const PropTypes = require('prop-types'); +const React = require('React'); const Text = require('Text'); const TouchableHighlight = require('TouchableHighlight'); const View = require('View'); - const ViewPropTypes = require('ViewPropTypes'); import type {ImageSource} from 'ImageSource'; @@ -31,12 +30,12 @@ class SwipeableQuickActionButton extends React.Component { props: { accessibilityLabel?: string, imageSource: ImageSource | number, - imageStyle?: ?View.propTypes.style, + imageStyle?: ?ViewPropTypes.style, onPress?: Function, - style?: ?View.propTypes.style, + style?: ?ViewPropTypes.style, testID?: string, text?: ?(string | Object | Array), - textStyle?: ?View.propTypes.style, + textStyle?: ?ViewPropTypes.style, }; static propTypes = { diff --git a/Libraries/Experimental/WindowedListView.js b/Libraries/Experimental/WindowedListView.js index c512adb73..db6840186 100644 --- a/Libraries/Experimental/WindowedListView.js +++ b/Libraries/Experimental/WindowedListView.js @@ -27,6 +27,8 @@ const infoLog = require('infoLog'); const invariant = require('fbjs/lib/invariant'); const nullthrows = require('fbjs/lib/nullthrows'); +import type {NativeMethodsMixinType} from 'ReactNativeTypes'; + const DEBUG = false; /** @@ -613,7 +615,7 @@ type CellProps = { }; class CellRenderer extends React.Component { props: CellProps; - _containerRef: View; + _containerRef: NativeMethodsMixinType; _offscreenRenderDone = false; _timeout = 0; _lastLayout: ?Object = null; diff --git a/RNTester/js/RNTesterPage.js b/RNTester/js/RNTesterPage.js index db17d5a8b..071c5b1ec 100644 --- a/RNTester/js/RNTesterPage.js +++ b/RNTester/js/RNTesterPage.js @@ -11,8 +11,8 @@ */ 'use strict'; -var React = require('react'); var PropTypes = require('prop-types'); +var React = require('react'); var ReactNative = require('react-native'); var { ScrollView, @@ -37,7 +37,7 @@ class RNTesterPage extends React.Component { var ContentWrapper; var wrapperProps = {}; if (this.props.noScroll) { - ContentWrapper = (View: ReactClass); + ContentWrapper = ((View: any): ReactClass); } else { ContentWrapper = (ScrollView: ReactClass); // $FlowFixMe found when converting React.createClass to ES6