Are there any flow types definition for react-native styles?

13
votes

I'm making a react native component and using Flow to define the property types like this:

type Props = {
    text: string,
    textStyle: object
}

Those properties are then passed to the Text component inside my component. Are there any Flow type definitions for react-native that will allow me to do something like this:

textStyle: TextStyle

Now Flow would be able to check that the textStyle value contains only keys that are allowed for Text component style.

I see that there are interface definitions for TypeScript (React.TextStyle) but can't find anything for Flow.

2
react-nativeflowtype

2 Answers

9
votes

Update 3:

Current best practice is:

import type {
   ViewStyleProp,
   TextStyleProp,
   ImageStyleProp,
} from 'react-native/Libraries/StyleSheet/StyleSheet';

Update 2: The following PR makes things simpler, as of today flowtype styles are as follow.

type StyleValue = {[key: string]: Object} | number | false | null;
type StyleProp = StyleValue | Array<StyleValue>;

Obsolete: The following PR fixes it, can be found from v0.52.0

It is possible to do the following:

// @flow

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

type Props = {
    style?: StyleObj
};

Following discussion on: https://github.com/flowtype/flow-typed/issues/631#issuecomment-282009393

6
votes

Update

StyleObj is no longer part of StyleSheetTypes.

Now import:

{LayoutStyle, TransformStyle, ShadowStyle, ViewStyle, TextStyle, ImageStyle, DangerouslyImpreciseStyle} from 'react-native/Libraries/StyleSheet/StyleSheetTypes';

In your case, you should:

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