Flow: the types of a view style and a component for React/React Native

[xareelee]

What is the type of view style for React/React Native? Any other question: what is the type of a React component?

const HelloLabel = ({
  viewStyle: ????,  // what is the type?
  childrenComponent: ???? // what is the type?
}) => {
  return (
    <View style={viewStyle}>
      {childrenComponent}
    </View>
  )
}

Furthermore, how can I find all the types for React/React Native?

[danwang]

Style is an object: https://facebook.github.io/react-native/docs/style.html

You can type it as viewStyle: {[string]: mixed}.

I think you've misnamed childrenComponent. A _component_ is a function (or class) that computes a ReactElement. A ReactElement is a description of the UI to display. For example:

• <div>hello</div> is a ReactElement
• (props) => <div>{props.children}</div> is a component

In JSX, you can put ReactElements (also other things!) inside braces ({...}). Putting a component there won't do anything useful.

Typically we keep the name style and children because they're common across many React components. You can type children with ?React$Element<any>:

import type {Children} from 'react';
const HelloLabel = ({
  style: {[string]: mixed},
  children: ?React$Element<any>,
}) => <View style={style}>{children}</View>;

In this example, HelloLabel does nothing useful. We can achieve the same effect by renaming:

const HelloLabel = View;

[xareelee]

@danwang thanks for your reply and comments.

It would be very helpful if you can tell me the how to find all the types for React/ReactNative. :D

[xareelee]

Any other further question: I have a specific view style type TouchableHighlight.propTypes.style; how can I declare it in flowtype?

// React Native propTypes
Hello.propTypes = {
  style: TouchableHighlight.propTypes.style
}

// flowtype
type HelloProps = {
  style: ???
}