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.
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 .
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.
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.
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);
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
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';
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With