Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 681
Mike P. Avatar asked Jan 21 '17 13:01

Mike P.


People also ask

What is style type React Native?

With React Native, you style your application using JavaScript. All of the core components accept a prop named style . The style names and values usually match how CSS works on the web, except names are written using camel casing, e.g. backgroundColor rather than background-color .

How do you organize styles in React Native?

Organizing React Native styles A nice approach is to create a folder for each component or set of components. In our component's subdirectory, we can add a file called style. js . In here, create the component-specific stylesheet which we will ultimately import into our component file.

What is componenttype in React?

A React.Element<typeof Component> takes a single type argument, typeof Component . typeof Component is the component type of the React element. For an intrinsic element, typeof Component will be the string literal for the intrinsic you used.

What is flow and TypeScript?

Both Flow and TypeScript provide the ability to explicitly cast a variable from one type to another. With Flow, we cast using the symbol : , while in TypeScript we cast using the keyword as . // TypeScript let value = 1 as number; // Flow let value = 1; (value: number);


2 Answers

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

like image 80
locropulenton Avatar answered Sep 25 '22 13:09

locropulenton


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';

like image 29
AMB Avatar answered Sep 25 '22 13:09

AMB