Flow: Working with React Native's propTypes

[xareelee]

I have a React Native component BannerButton. The React propTypes should be:

BannerButton.propTypes = {
  title: PropTypes.string.isRequired,
  onPress: PropTypes.func.isRequired,
  style: View.propTypes.style,
  titleStyle: Text.propTypes.style,
  disabled: PropTypes.bool,
  disabledColor: PropTypes.string,
};

Now I want to use flowtype instead of propTypes. How do I get the flowtype from View.propTypes.style and Text.propTypes.style?

props: {
  title: string,
  onPress: Function,
  style: View.propTypes.style,  // No idea how to get the flowtype
  titleStyle: Text.propTypes.style,  // No idea how to get the flowtype
  disabled: boolean,
  disabledColor: string,
};

Did I do right?

UPDATED

There are more React Native propTypes need to be changed to flowtype. For example:

TouchableHighlight.propTypes.style
Image.propTypes.source

How can I find those flowtypes?

[Palisand]

For a general style flowtype, see https://github.com/flowtype/flow-typed/issues/631.

I'm facing a similar issue when creating custom components that wrap around native components:

import {Text} from "react-native";

const CustomText = (
  {foo, ...props}: {foo: string, props: /*flowtype for Text.propTypes */}
) => (
  <Text foo {...props} .. >
)

It seems that, as of now at least, we have to use a combination of PropTypes and flow.

[blazevignesh]

import { View, ViewPropTypes } from 'react-native';

view: ViewPropTypes.style,

[cglacet]

@blainekasten any idea where to find some documentation on this?

Any news on this issue? I've been looking on both flow/react-native documentation but even these simple things do not seems to be mentioned anywhere. For example it seems like TextInput doesn't have the equivalent of the view props type. On the other hand TextInput apparently has a TextInput.propTypes but flow doesn't really seem to like it used as props type:

class CustomTextInput extends React.Component<TextInput.propTypes> {
...
}

Gives:

Cannot use propTypes as a type. A name can be used as a type only if it refers to a type, interface, class, or enum definition. To get the type of a non-class value, use typeof.Flow(value-as-type)

It looks to be defined here, but no clue on how to access this as end user. And I wouldn't like to have to check this every time I need to extend existing types. I remember working with flow 2 years ago was a nightmare but it looks even worse today. I guess nobody cares and people will just go without any static type checking because it's just too messy.

This is somewhat related to Are there any flow types definition for react-native styles?.

In the mean time, I can use a similar workaround, but that's a bit strange:

import type {Props as TextInputProps} from "react-native/Libraries/Components/TextInput/TextInput";
class CustomTextInput extends React.Component<TextInputProps>{}

Still digging into this, even stranger, there is no consistency over different components, for example with Text that would look like this (again a hack, not really a good/stable solution):

import type {TextProps} from "react-native/Libraries/Text/TextProps";
class CustomText extends React.Component<TextProps>{}