【Flow】React Native styleのtypeは？ #reactnative

背景

styleはオブジェクトだとしてObjectを定義しがち。

type Props = {
  style?: Object,
};

脱Object

各Styleのtypeは以下からimportできる

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

このIssueのこのコメントと、このコメントを参考にパターン洗い出し。

パターン1) importする

importして使用する

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

type Props = {
  style?: ViewStyleProp,
};

パターン2) importなし

importなし

type ViewProps = React.ElementProps<typeof View>;
type ViewStyleProp = $PropertyType<ViewProps, 'style'>;

パターン3) declsに展開

decls(declarations)に展開しておいて、使用する。 (declarationsについて, 外部宣言ファイルの読み込み)
declsでは当然Reactをimportしなければパターン2のように宣言できないので、importしてdeclare定義する

decls定義)

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

declare type $styles = ViewStyleProp;
declare type $textStyles = TextStyleProp;
declare type $imageStyles = ImageStyleProp;

これでStyleの型定義ができました。

参照

flow-typed issue https://github.com/flow-typed/flow-typed/issues/631