Support array style

[Ngoc Le]

Description

export const theme = {
  colors: {
    blood: '#eb4d4b',
    barbie: '#e056fd',
    pumpkin: '#f0932b',
    background: '#ffffff'
  },
  components: {
    typography: {
      bold: {
        fontWeight: 'bold'
      },
      thin: {
        fontWeight: '300'
      }
    }
  }
}

Can u support array theme like this?

const stylesheet = createStyleSheet(theme => ({
    textName:[theme.components.typography.bold, {color:theme.colors.blood}]
}))

Steps to reproduce

see my code above

Snack or a link to a repository (optional)

No response

Unistyles version

1.0.0

React Native version

0.72.5

Platforms

Android, iOS

[Jacek Pudysz]

@masonle2x2 please don't open an issue for questions/feature requests. If you want to discuss it create a thread in discussions.

Nevertheless, what's the benefit of doing so, if you can use object destructuring?

const stylesheet = createStyleSheet(theme => ({
    textName: {
         ...theme.components.typography.bold,
         color: theme.colors.blood
    }
}))

[Andrei Zgîrvaci]

@masonle2x2 please don't open an issue for questions/feature requests. If you want to discuss it create a thread in discussions.

Nevertheless, what's the benefit of doing so, if you can use object destructuring?

const stylesheet = createStyleSheet(theme => ({
    textName: {
         ...theme.components.typography.bold,
         color: theme.colors.blood
    }
}))

For me, this approach results in the typescript throwing an error when creating useStyles. Is typescript complaining on your side?

[Jacek Pudysz]

No, it doesn't. How does your theme.components.typography.bold looks like?

[Andrei Zgîrvaci]

I actually have a different component object, like so:

// theme.js

// ...
components: {
    container: {
      flex: 1,
      justifyContent: 'space-between',
      alignItems: 'stretch',
      backgroundColor: 'white',
    },
  },
//...

// index.js

const { styles } = useStyles(stylesheet); // <— Typescript error appears here

//...
const stylesheet = createStyleSheet((theme) => ({
  container: {
    ...theme.components.container,
    paddingTop: 40,
    paddingBottom: 20,
    paddingHorizontal: 20,
  },
//...

The error goes away as soon as I remove these 2 lines from the component object:

justifyContent: 'space-between',
alignItems: 'stretch',

[Jacek Pudysz]

What's the error?

[Andrei Zgîrvaci]

Oh jeez, these typescript errors... 😅

Argument of type '((theme: { colors: { primary: string; }; components: { container: { flex: number; justifyContent: string; alignItems: string; backgroundColor: string; }; }; utils: { hexToRGBA: (hex: string, opacity: number) => string; }; }) => { ...; }) | { ...; }' is not assignable to parameter of type 'CustomNamedStyles<{ container: { paddingTop: number; paddingBottom: number; paddingHorizontal: number; flex: number; justifyContent: string; alignItems: string; backgroundColor: string; }; headerTitle: { fontSize: number; marginBottom: number; textAlign: "center"; }; headerDescription: { ...; }; actionButton: (devic...'.
  Type '(theme: { colors: { primary: string; }; components: { container: { flex: number; justifyContent: string; alignItems: string; backgroundColor: string; }; }; utils: { hexToRGBA: (hex: string, opacity: number) => string; }; }) => { ...; }' is not assignable to type 'CustomNamedStyles<{ container: { paddingTop: number; paddingBottom: number; paddingHorizontal: number; flex: number; justifyContent: string; alignItems: string; backgroundColor: string; }; headerTitle: { fontSize: number; marginBottom: number; textAlign: "center"; }; headerDescription: { ...; }; actionButton: (devic...'.
    Type '(theme: { colors: { primary: string; }; components: { container: { flex: number; justifyContent: string; alignItems: string; backgroundColor: string; }; }; utils: { hexToRGBA: (hex: string, opacity: number) => string; }; }) => { ...; }' is not assignable to type 'CreateStylesFactory<CustomNamedStyles<{ container: { paddingTop: number; paddingBottom: number; paddingHorizontal: number; flex: number; justifyContent: string; alignItems: string; backgroundColor: string; }; headerTitle: { fontSize: number; marginBottom: number; textAlign: "center"; }; headerDescription: { ...; }; ...'.
      Call signature return types '{ container: { paddingTop: number; paddingBottom: number; paddingHorizontal: number; flex: number; justifyContent: string; alignItems: string; backgroundColor: string; }; headerTitle: { fontSize: number; marginBottom: number; textAlign: "center"; }; headerDescription: { ...; }; actionButton: (deviceFound: boolean) =...' and 'CustomNamedStyles<{ container: { paddingTop: number; paddingBottom: number; paddingHorizontal: number; flex: number; justifyContent: string; alignItems: string; backgroundColor: string; }; headerTitle: { fontSize: number; marginBottom: number; textAlign: "center"; }; headerDescription: { ...; }; actionButton: (devic...' are incompatible.
        The types of 'container' are incompatible between these types.
          Type '{ paddingTop: number; paddingBottom: number; paddingHorizontal: number; flex: number; justifyContent: string; alignItems: string; backgroundColor: string; }' is not assignable to type 'StaticStyles<{ xs: number; }>'.
            Type '{ paddingTop: number; paddingBottom: number; paddingHorizontal: number; flex: number; justifyContent: string; alignItems: string; backgroundColor: string; }' is not assignable to type 'DeepUniStyle<Omit<ImageStyle, NestedTypes>, { xs: number; }> & UnistyleNested<{ xs: number; }>'.
              Type '{ paddingTop: number; paddingBottom: number; paddingHorizontal: number; flex: number; justifyContent: string; alignItems: string; backgroundColor: string; }' is not assignable to type 'DeepUniStyle<Omit<ImageStyle, NestedTypes>, { xs: number; }>'.
                Types of property 'alignItems' are incompatible.
                  Type 'string' is not assignable to type 'UniStyle<FlexAlignType | undefined, { xs: number; }>'.ts(2345)

[Jacek Pudysz]

Can you cast your theme to as const?

const yourSuperTheme = {
// ...
components: {
    container: {
      flex: 1,
      justifyContent: 'space-between',
      alignItems: 'stretch',
      backgroundColor: 'white',
    },
  },
//...
} as const

[Andrei Zgîrvaci]

Yep, seems to fix it! What was the issue?

[Jacek Pudysz]

Actually, that's an issue with the react-native typings. It behaves the same way with StyleSheet. For example, your alignItems style must be specifically stretch, not a generic string.

[Andrei Zgîrvaci]

I see. Well, thanks for the explanation. Maybe you can mention as const in your documentation. I am sure it will be helpful to some folks. 😊

[Jacek Pudysz]

I will, thank you for pointing it out!