Unable to get react components to validate with flow version specified by expo?

Expo SDK
1

I’m finding it really difficult to work with flow in an expo app, since the fork of RN used by expo is locked to flow 0.51. I upgraded my project 0.52 without error, but going to 0.53 (the minimum version supported in flow.org’s “try flow” tool), generates a few hundred errors.

So my first question is about the delay in supporting newer versions of flow that matches the documentation for react on their site (Components | Flow is unusable with an expo project so far as I can tell).

Second question is, how can get a component typed with the version of flow listed? Even something as simple as

type Props = {
  initialDisplayMode?: displayMode
};

type State = {
  displayMode: string
};


class List extends React.Component<*, Props, State> {
  constructor(props:Props) {
    super(props)
  }

  render() {
    return (
      <Text>{this.state.displayMode}</Text>
    )
  }
}

fails to validate, with the following error:

Error: List.js:21
 21: class List extends React.Component<*, Props, State> {
                                                  ^^^^^ object type. This type is incompatible with
 21: class List extends React.Component<*, Props, State> {
                                                  ^^^^^ undefined. Did you forget to declare State?

Error: List.js:21
 21: class List extends React.Component<*, Props, State> {
                                                  ^^^^^ undefined. Did you forget to declare State?. This type is incompatible with
 21: class List extends React.Component<*, Props, State> {
                                                  ^^^^^ object type

Thanks!

2

@peterlandry Hi, with SDK 21 you should be able to use Flow 0.53 with Expo. I think 0.54 and 0.55 should work as well.

Flow doesn’t support multiple versions unfortunately — all your npm packages need to be compatible with the same version of Flow. This is often unrealistic unless you chase down all the npm packages that have Flow types or their flow-typed definitions. So one thing that I find helpful is to provide a stub definition that tells Flow to ignore outdated type definitions. See this stub file we use in expo-sdk itself: https://github.com/expo/expo-sdk/blob/master/flow-typed/react-native.js

And then in your .flowconfig you tell Flow to ignore specific node_modules: https://github.com/expo/expo-sdk/blob/master/.flowconfig

You also may want to use flow-bin if you don’t already so you can be precise about the version of Flow you use.

3

Hey @ide , thanks for the response. I am using flow-bin, and as soon as I specify a flow version of 0.53, I get 302 errors in react-native. Bumping down to flow 0.52, they all disappear.

4

Read the rest of my response to filter the errors.

1 Like
5

Thanks, I did, but if I’m understanding correctly, that throws away most of the use of typing components from React? Using an example from the Flow docs for react, this example should fail:

type Props = {
  foo: number,
  bar?: string,
};

class MyComponent extends React.Component<Props> {
  render() {
    this.props.doesNotExist; // Error! You did not define a `doesNotExist` prop.

    return <div>{this.props.bar}</div>;
  }
}

<MyComponent foo={42} />;

but now passes. Am I misunderstanding your solution somehow?

6

Ahh, my fault. It’s failing as expected, I had neglected to add // @flow for that file while testing. Thanks for bearing with me.