microsoft / TypeScript-React-Native-Starter

A starter template for TypeScript and React Native with a detailed README describing how to use the two together.
MIT License
1.91k stars 211 forks source link

Using functions within StyleSheet #59

Closed iremlopsum closed 4 years ago

iremlopsum commented 4 years ago

Hey guys,

Often times I want to do something like

const styles = StyleSheet.create({
  square: (size: number) => ({
    width: size,
    height: size,
  }),
})

Now this doesn't work, because I get Type '(size: number) => { width: number; height: number; }' is not assignable to type 'ViewStyle | TextStyle | ImageStyle'. I've tried doing things like

interface Style {
  square: (width: number) => ViewStyle
}

const styles = StyleSheet.create<Style>({
  square: (size: number) => ({
    width: size,
    height: size,
  }),
})

But then I get Type 'Style' does not satisfy the constraint 'NamedStyles<any> | NamedStyles<Style>'.

Any ideas how to deal with this?

orta commented 4 years ago

You should probably take this to stack overflow 👍