Using a function on stylesheet typescript react native

Question

I try to use some variables inside my StyleSheet file.

The UI is working fine. But the type is error.

Any idea how to solve this?

type buttonStyle = (height: number, width: string, color: string) => ViewStyle;

export type Styles = {
  button: buttonStyle;
};


export default StyleSheet.create<Styles>({
  button: (height: number, width: string, color: string) => ({
    height: height,
    width: width,
    backgroundColor: color,
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: 10,
  }),
});

This is the error message from type.

Type 'Styles' does not satisfy the constraint 'NamedStyles<any> | NamedStyles<Styles>'.
  Type 'Styles' is not assignable to type 'NamedStyles<Styles>'.
    Types of property 'button' are incompatible.
      Type 'buttonStyle' is not assignable to type 'ViewStyle | TextStyle | ImageStyle

Did you already try this? https://github.com/DefinitelyTyped/DefinitelyTyped/issues/29651 — zidniryi, Mar 28 '22 at 09:14

Nasir Abbasi · Answer 1 · 2022-11-23T06:33:32.540

0

export default StyleSheet.create<Styles | any>({
  button: (height: number, width: string, color: string) => ({
    height: height,
    width: width,
    backgroundColor: color,
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: 10,
  }),
});

add type any like this,

StyleSheet.create<Styles | any>

edited Nov 23 '22 at 06:33

answered Nov 23 '22 at 06:26

Nasir Abbasi

1
1

score -1 · Answer 2 · answered Mar 31 '22 at 08:16

You can create a const style using StyleSheet.create() outside of your component:

const styles = ((height: number, width: string, color: string)) => StyleSheet.create({
    btn: {
        height: height,
        width: width,
        backgroundColor: color,
        alignItems: 'center',
        justifyContent: 'center',
        borderRadius: 10,
    }
});

and than call it like this in your component:

<Button style={styles(height: height, width: width, color: color).btn} />

explain why you downcast, would love to learn! – lmasneri Nov 16 '22 at 14:19 — lmasneri, Nov 16 '22 at 14:19

score -4 · Answer 3 · answered Mar 28 '22 at 09:23

I think StyleSheet does not contain function type. So I fix this error with this approach.

style file

import type { ViewStyle } from 'react-native';

const styles = {
  button: (height: number, width: string, color: string): ViewStyle => ({
    height: height,
    width: width,
    backgroundColor: color,
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: 10,
  }),
};

export default styles;

No need to define the styles type.

Using a function on stylesheet typescript react native

3 Answers3

Linked