React Native functions in Stylesheet typescript

Question

I don't understand how to create a good interface dynamic stylesheet

interface Styles {
  container: (backgroundColor: string) => StyleProp<ViewStyle>;
  image: (color: string) => StyleProp<ImageStyle>;
}

const styles = StyleSheet.create<Styles>({
  container: (backgroundColor: string) => ({
    width: "100%",
    height: "100%",
    backgroundColor,
  }),
  image: (color: string) => ({
    width: 10,
    height: 10,
    tintColor: color,
  }),
});

I got an error like this :

 Type '(backgroundColor: string) => StyleProp<ViewStyle>' is not assignable to type 'ViewStyle | ImageStyle | TextStyle'

Answer 1

Can you post your code where you set the style of the component? I think you forgot to call the function.

<View style={styles.container("black")} />

if not then, change your interface to

interface Styles {
  container: (backgroundColor: string) => ViewStyle | ImageStyle | TextStyle;
  image: (color: string) => ViewStyle | ImageStyle | TextStyle;
}