Skip to content

Commit

Permalink
Fix flow typing of Text
Browse files Browse the repository at this point in the history
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
  • Loading branch information
sahrens authored and facebook-github-bot committed Feb 5, 2019
1 parent cae6bef commit 10c8352
Show file tree
Hide file tree
Showing 3 changed files with 12 additions and 10 deletions.
11 changes: 5 additions & 6 deletions Libraries/Text/Text.js
Original file line number Diff line number Diff line change
Expand Up @@ -34,10 +34,10 @@ type ResponseHandlers = $ReadOnly<{|
onResponderTerminationRequest: () => boolean,
|}>;

type Props = $ReadOnly<{
type Props = $ReadOnly<{|
...TextProps,
forwardedRef: ?React.Ref<'RCTText' | 'RCTVirtualText'>,
}>;
|}>;

type State = {|
touchable: {|
Expand Down Expand Up @@ -286,7 +286,6 @@ TextToExport.displayName = 'Text';
* and run Flow. */
TextToExport.propTypes = DeprecatedTextPropTypes;

/* $FlowFixMe(>=0.89.0 site=react_native_fb) This comment suppresses an error
* found when Flow v0.89 was deployed. To see the error, delete this comment
* and run Flow. */
module.exports = (TextToExport: Class<NativeComponent<TextProps>>);
module.exports = ((TextToExport: $FlowFixMe): Class<
NativeComponent<TextProps>,
>);
7 changes: 5 additions & 2 deletions Libraries/Text/TextProps.js
Original file line number Diff line number Diff line change
Expand Up @@ -29,13 +29,15 @@ export type PressRetentionOffset = $ReadOnly<{|
/**
* @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.
*
* See https://facebook.github.io/react-native/docs/text.html#accessible
*/
accessible?: ?boolean,
accessibilityHint?: ?Stringish,
accessibilityLabel?: ?Stringish,
accessibilityRole?: ?AccessibilityRole,
accessibilityStates?: ?AccessibilityStates,
accessibilityTraits?: ?(AccessibilityTrait | Array<AccessibilityTrait>),
Expand Down Expand Up @@ -112,6 +114,7 @@ export type TextProps = $ReadOnly<{
onResponderTerminate?: ?(event: PressEvent) => void,
onResponderTerminationRequest?: ?() => boolean,
onStartShouldSetResponder?: ?() => boolean,
onMoveShouldSetResponder?: ?() => boolean,
onTextLayout?: ?(event: TextLayoutEvent) => mixed,

/**
Expand Down Expand Up @@ -180,4 +183,4 @@ export type TextProps = $ReadOnly<{
* See https://facebook.github.io/react-native/docs/text.html#supperhighlighting
*/
suppressHighlighting?: ?boolean,
}>;
|}>;
4 changes: 2 additions & 2 deletions RNTester/js/TextInputExample.ios.js
Original file line number Diff line number Diff line change
Expand Up @@ -630,7 +630,7 @@ exports.examples = [
<WithLabel label="singleline">
<TextInput style={styles.default} value="(value property)">
(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)
</TextInput>
</WithLabel>
Expand All @@ -640,7 +640,7 @@ exports.examples = [
multiline={true}
value="(value property)">
(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)
</TextInput>
</WithLabel>
Expand Down

0 comments on commit 10c8352

Please sign in to comment.