`sizes` not working properly on mobile native

[rafaelrinaldi]

I am trying to use sizes to specify the height of a Pressable. It works fine on the browser, but I can't seem to make it work for mobile native other than inlining the value itself.

// theme.ts
export const theme = makeTheme({
  /* ... */
  sizes: {
    $0: 0,
    $1: 4,
    $2: 8,
    $3: 12,
    $4: 16,
    $5: 20,
    $6: 24,
    $7: 32,
    $8: 40,
  }
  /* ... */
})

// Button.tsx
const Button = ({ children, variant = 'primary' }) => (
    <Pressable
      sx={{
          variant: `buttons.${variant}`,
          justifyContent: 'center',
          backgroundColor: 'red',
          height: '$8'
       }}>
        {children}
</Pressable>
)

Browser output:

iOS Simulator error:

Am I doing something wrong?

[nandorojo]

yeah something is probably wrong here. can you try making sx a function of your theme and log it?

[rafaelrinaldi]

@nandorojo I am not sure I understand. Do you want me to share the whole theme definition?

[nandorojo]

Do this:

<Pressable
  sx={(theme) => {
    console.log(theme.sizes)

    return { height: theme.sizes.$8 }
  }}
/>

To make sure that the theme is getting picked up correctly.

[nandorojo]

any luck?