Permalink
Browse files

RN: Switch `Text` to `React.forwardRef`

Reviewed By: sahrens

Differential Revision: D7902262

fbshipit-source-id: 218f95cde6d77f21d9362a2f2bd47c5f83d5ee15
  • Loading branch information...
yungsters authored and facebook-github-bot committed May 9, 2018
1 parent 06c05e7 commit e708010d18f938e2d6b6424cfc9485d8e5dd2800
@@ -22,9 +22,6 @@ exports[`TouchableHighlight renders correctly 1`] = `
tvParallaxProperties={undefined}
>
<Text
accessible={true}
allowFontScaling={true}
ellipsizeMode="tail"

This comment has been minimized.

@rajivshah3

rajivshah3 Oct 25, 2018

Contributor

Hi @yungsters , what's causing these props to no longer show up in snapshot tests?

This comment has been minimized.

@yungsters

yungsters Oct 31, 2018

Contributor

I don't remember exactly, but I think it may have been because of how we do the component mocking in Jest tests and the opaqueness of React.forwardRef's return value.

This comment has been minimized.

@rajivshah3

rajivshah3 Oct 31, 2018

Contributor

Ah, I see. Thanks!

style={null}
>
Touchable
@@ -11,7 +11,6 @@
'use strict';
const React = require('React');
const ReactNative = require('ReactNative');
const ReactNativeViewAttributes = require('ReactNativeViewAttributes');
const TextAncestor = require('TextAncestor');
const TextPropTypes = require('TextPropTypes');
@@ -23,6 +22,7 @@ const nullthrows = require('fbjs/lib/nullthrows');
const processColor = require('processColor');
import type {PressEvent} from 'CoreEventTypes';
import type {NativeComponent} from 'ReactNative';
import type {PressRetentionOffset, TextProps} from 'TextProps';
type ResponseHandlers = $ReadOnly<{|
@@ -34,7 +34,10 @@ type ResponseHandlers = $ReadOnly<{|
onResponderTerminationRequest: () => boolean,
|}>;
type Props = TextProps;
type Props = $ReadOnly<{
...TextProps,
forwardedRef: ?React.Ref<NativeComponent<TextProps, any>>,
}>;
type State = {|
touchable: {|
@@ -70,9 +73,7 @@ const viewConfig = {
*
* See https://facebook.github.io/react-native/docs/text.html
*/
class Text extends ReactNative.NativeComponent<Props, State> {
static propTypes = TextPropTypes;
class TouchableText extends React.Component<Props, State> {
static defaultProps = {
accessible: true,
allowFontScaling: true,
@@ -138,10 +139,10 @@ class Text extends ReactNative.NativeComponent<Props, State> {
<TextAncestor.Consumer>
{hasTextAncestor =>
hasTextAncestor ? (
<RCTVirtualText {...props} />
<RCTVirtualText {...props} ref={props.forwardedRef} />
) : (
<TextAncestor.Provider value={true}>
<RCTText {...props} />
<RCTText {...props} ref={props.forwardedRef} />
</TextAncestor.Provider>
)
}
@@ -260,4 +261,13 @@ const RCTVirtualText =
uiViewClassName: 'RCTVirtualText',
}));
module.exports = Text;
// $FlowFixMe - TODO T29156721 `React.forwardRef` is not defined in Flow, yet.
const Text = React.forwardRef((props, ref) => (
<TouchableText {...props} forwardedRef={ref} />
));
Text.displayName = 'Text';
// TODO: Deprecate this.
Text.propTypes = TextPropTypes;
module.exports = ((Text: any): NativeComponent<TextProps, any>);
@@ -28,6 +28,10 @@ module.exports = (moduleName, instanceMethods) => {
}
};
if (RealComponent.propTypes != null) {
Component.propTypes = RealComponent.propTypes;
}
if (instanceMethods != null) {
Object.assign(Component.prototype, instanceMethods);
}
@@ -35,7 +35,7 @@ jest.setMock('ErrorUtils', require('ErrorUtils'));
jest
.mock('InitializeCore', () => {})
.mock('Image', () => mockComponent('Image'))
.mock('Text', () => mockComponent('Text'))
.mock('Text', () => mockComponent('Text', MockNativeMethods))
.mock('TextInput', () => mockComponent('TextInput'))
.mock('Modal', () => mockComponent('Modal'))
.mock('View', () => mockComponent('View', MockNativeMethods))

0 comments on commit e708010

Please sign in to comment.