TS Declaration for passing StyleSheet parameters

Question

I'm trying to find a way to make TypeScript accept passing variables to StyleSheet

Exemple:



...

export default StyleSheet.create({
  foo: (isVisible: boolean) => ({
    opacity: isVisible ? 1 : 0
  })
  bar: {
    // something
  }
})

I tried to redeclare StyleSheet.create with the code below but I can't find a solution. Any idea ?

import 'react-native'

declare module 'react-native' {
  namespace StyleSheet {
    type Style = ViewStyle | TextStyle | ImageStyle
    type NamedStyles = { [P in keyof T]: Style }

    export function create | NamedStyles>(
      styles: T | NamedStyles,
    ): T & S
  }
}

user_14969281 · Answer

You could just turn your StyleSheet constant into a function and pass optional props to it with explicit typing as follows.

type StyleSheetProps = {
  isVisible?: boolean
}

const styles = (props?: StyleSheetProps) =>
  StyleSheet.create({
    opacityStyle: props?.isVisible ? 1 : 0
  })

And then use it as follows.

TS Declaration for passing StyleSheet parameters

1 Answers