StyleSheet.create "not covered by flow"

Question

I am using flow 0.42.0 in a react native project with nuclide.

With the default project, I get the following message:

Along with the following errors:

> flow check
index.ios.js:40
 40:             <View style={style.container}>
                                    ^^^^^^^^^ property `container`. Property cannot be accessed on possibly undefined value
 40:             <View style={style.container}>
                              ^^^^^ undefined

index.ios.js:40
 40:             <View style={style.container}>
                                    ^^^^^^^^^ property `container`. Property not found in
 40:             <View style={style.container}>
                              ^^^^^ Array

index.ios.js:41
 41:                 <Text style={style.welcome}>
                                        ^^^^^^^ property `welcome`. Property cannot be accessed on possibly undefined value
 41:                 <Text style={style.welcome}>
                                  ^^^^^ undefined

index.ios.js:41
 41:                 <Text style={style.welcome}>
                                        ^^^^^^^ property `welcome`. Property not found in
 41:                 <Text style={style.welcome}>
                                  ^^^^^ Array

index.ios.js:44
 44:                 <Text style={style.instructions}>
                                        ^^^^^^^^^^^^ property `instructions`. Property cannot be accessed on possibly undefined value
 44:                 <Text style={style.instructions}>
                                  ^^^^^ undefined

index.ios.js:44
 44:                 <Text style={style.instructions}>
                                        ^^^^^^^^^^^^ property `instructions`. Property not found in
 44:                 <Text style={style.instructions}>
                                  ^^^^^ Array

index.ios.js:47
 47:                 <Text style={style.instructions}>
                                        ^^^^^^^^^^^^ property `instructions`. Property cannot be accessed on possibly undefined value
 47:                 <Text style={style.instructions}>
                                  ^^^^^ undefined

index.ios.js:47
 47:                 <Text style={style.instructions}>
                                        ^^^^^^^^^^^^ property `instructions`. Property not found in
 47:                 <Text style={style.instructions}>
                                  ^^^^^ Array


Found 8 errors

This issue ( https://github.com/flowtype/flow-typed/issues/631 ) seemed to suggest that the correct type was StyleSheet.Styles, but that gives me the same message (and the same errors from above):

Is there any way I can get proper flow typing working here?

For reference, the complete file is:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

export default class PartalkReact extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>
                    Welcome to React Native!
                </Text>
                <Text style={styles.instructions}>
                    To get started, edit index.ios.js
                </Text>
                <Text style={styles.instructions}>
                    Press Cmd+R to reload,{'\n'}
                    Cmd+D or shake for dev menu
                </Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('PartalkReact', () => PartalkReact);

Edit After upgrading to flow 0.45.0, as per the comments, I no longer have problems in my files, but react itself fails with the following errors: https://pastebin.com/raw/Ngpagayi

Answer 1

The warning is because of the third party has not integrated flow to their end. In our case, the StyleSheet is giving the warning so react native is the third party who has not integrated flow. React native only included flow in some components only may be core ones and it was officially declared by them.

As told by you that react-native is using flow in stylesheet so i came to a conclusion:

import type { StyleObj } from 'react-
native/Libraries/StyleSheet/StyleSheetTypes';

type Props = {
    style?: StyleObj,
};

The other way is to upgrade the flow.

Cheers :)

Answer 2

I've been using the following to pretty good success
This will show errors if you use non existent style properties and enable code completion

const rawStyles = { ... }
export const styles: typeof rawStyles = StyleSheet.create(rawStyles)