Why use StyleProp<ViewStyle> over ViewStyle?

Issue

I am looking at some React Native Typescript code and seeing components taking in style props. These are typed as StyleProp<ViewStyle>. That type causes me problems though, like not being able to spread the prop (I might want to spread to override backgroundColor for instance).

interface Props {
   aStyleProp: StyleProp<ViewStyle>
}

So I just typed aStyleProp as ViewStyle.

Am I losing something important by not using StyleProp?

Code trying to spread prop

Looking through the type definition for StyleProp (imported from 'react-native') I don't feel wiser from the RegisteredStyle<T> and RecursiveArray which are its possible types.

Solution

StyleProp<ViewStyle> accepts a wider range of types than ViewStyle.

The definition of StyleProp<T>:

export type StyleProp<T> =
  | T
  | RegisteredStyle<T>
  | RecursiveArray<T | RegisteredStyle<T> | Falsy>
  | Falsy;

So when it comes to StyleProp<ViewStyle> it accepts not only ViewStyle type, but also an array of ViewStyles, and a Falsy type, which translates to false || null || undefined.

This means that for example this is valid for StyleProp<ViewStyle> but not valid for ViewStyle:

• style={[styles.style1, styles.style2]} - array of styles
• style={undefined} - any Falsy value

Answered By - Maciej Dobosz