Fix flow typing of Text

Summary:
Make Text prop types exact to catch tons of errors, including typos like in https://fb.workplace.com/groups/rn.support/permalink/2306953619353240/.

I tried to fix things when it was totally obvious what the intent was, but otherwise tried to keep the existing behavior the same, even if it meant that usage of some props was getting ignored, like `hitSlop`.

Reviewed By: TheSavior

Differential Revision: D13892999

fbshipit-source-id: 5003508a648287e4eca8055fb59da5f03bd066cc
This commit is contained in:
Spencer Ahrens 2019-02-05 15:23:14 -08:00 committed by Facebook Github Bot
parent cae6beff74
commit 10c8352141
3 changed files with 12 additions and 10 deletions

View File

@ -34,10 +34,10 @@ type ResponseHandlers = $ReadOnly<{|
onResponderTerminationRequest: () => boolean, onResponderTerminationRequest: () => boolean,
|}>; |}>;
type Props = $ReadOnly<{ type Props = $ReadOnly<{|
...TextProps, ...TextProps,
forwardedRef: ?React.Ref<'RCTText' | 'RCTVirtualText'>, forwardedRef: ?React.Ref<'RCTText' | 'RCTVirtualText'>,
}>; |}>;
type State = {| type State = {|
touchable: {| touchable: {|
@ -286,7 +286,6 @@ TextToExport.displayName = 'Text';
* and run Flow. */ * and run Flow. */
TextToExport.propTypes = DeprecatedTextPropTypes; TextToExport.propTypes = DeprecatedTextPropTypes;
/* $FlowFixMe(>=0.89.0 site=react_native_fb) This comment suppresses an error module.exports = ((TextToExport: $FlowFixMe): Class<
* found when Flow v0.89 was deployed. To see the error, delete this comment NativeComponent<TextProps>,
* and run Flow. */ >);
module.exports = (TextToExport: Class<NativeComponent<TextProps>>);

View File

@ -29,13 +29,15 @@ export type PressRetentionOffset = $ReadOnly<{|
/** /**
* @see https://facebook.github.io/react-native/docs/text.html#reference * @see https://facebook.github.io/react-native/docs/text.html#reference
*/ */
export type TextProps = $ReadOnly<{ export type TextProps = $ReadOnly<{|
/** /**
* Indicates whether the view is an accessibility element. * Indicates whether the view is an accessibility element.
* *
* See https://facebook.github.io/react-native/docs/text.html#accessible * See https://facebook.github.io/react-native/docs/text.html#accessible
*/ */
accessible?: ?boolean, accessible?: ?boolean,
accessibilityHint?: ?Stringish,
accessibilityLabel?: ?Stringish,
accessibilityRole?: ?AccessibilityRole, accessibilityRole?: ?AccessibilityRole,
accessibilityStates?: ?AccessibilityStates, accessibilityStates?: ?AccessibilityStates,
accessibilityTraits?: ?(AccessibilityTrait | Array<AccessibilityTrait>), accessibilityTraits?: ?(AccessibilityTrait | Array<AccessibilityTrait>),
@ -112,6 +114,7 @@ export type TextProps = $ReadOnly<{
onResponderTerminate?: ?(event: PressEvent) => void, onResponderTerminate?: ?(event: PressEvent) => void,
onResponderTerminationRequest?: ?() => boolean, onResponderTerminationRequest?: ?() => boolean,
onStartShouldSetResponder?: ?() => boolean, onStartShouldSetResponder?: ?() => boolean,
onMoveShouldSetResponder?: ?() => boolean,
onTextLayout?: ?(event: TextLayoutEvent) => mixed, onTextLayout?: ?(event: TextLayoutEvent) => mixed,
/** /**
@ -180,4 +183,4 @@ export type TextProps = $ReadOnly<{
* See https://facebook.github.io/react-native/docs/text.html#supperhighlighting * See https://facebook.github.io/react-native/docs/text.html#supperhighlighting
*/ */
suppressHighlighting?: ?boolean, suppressHighlighting?: ?boolean,
}>; |}>;

View File

@ -630,7 +630,7 @@ exports.examples = [
<WithLabel label="singleline"> <WithLabel label="singleline">
<TextInput style={styles.default} value="(value property)"> <TextInput style={styles.default} value="(value property)">
(first raw text node) (first raw text node)
<Text color="red">(internal raw text node)</Text> <Text style={{color: 'red'}}>(internal raw text node)</Text>
(last raw text node) (last raw text node)
</TextInput> </TextInput>
</WithLabel> </WithLabel>
@ -640,7 +640,7 @@ exports.examples = [
multiline={true} multiline={true}
value="(value property)"> value="(value property)">
(first raw text node) (first raw text node)
<Text color="red">(internal raw text node)</Text> <Text style={{color: 'red'}}>(internal raw text node)</Text>
(last raw text node) (last raw text node)
</TextInput> </TextInput>
</WithLabel> </WithLabel>