Have a question about scaling feature

[yjb94]

Hi I am really glad to see this project you've achieved. It's greatful

By any chance, can I know is there any feature about scaling like react-native-size-matters?

If not, is there any feature to scale every styles included(like a style middleware)?

thaks!

[jpudysz]

Yes, you can easily achieve it. Please check this links:

Docs for plugins: https://www.unistyl.es/reference/plugins/
Example plugin for scaling: https://github.com/jpudysz/react-native-unistyles/blob/main/examples/expo/src/plugins/autoGuidelinePlugin.ts

[yjb94]

so the "plugin" is the key. what an extendable library. thx

[yvbeek]

@jpudysz Thanks for all of your hard work on this library, it looks awesome.

In our project we've been using react-native-extended-stylesheet with a couple of custom tweaks (e.g. TypeScript types). I would love to start using react-native-unistyles. Device-specific scaling is also a concern of mine.

Right now, we have a rem function that looks like this:

export const rem = (val: number) => (isTablet ? 18 : 16) * (isAndroid ? 1.08 : 1) * val

And our theme looks like this:

$rem: rem(1),

$fontSizeXS: "0.625rem",
$fontSizeSM: "0.8rem",
$fontSizeMD: "1rem",
$fontSizeLG: "1.25rem",
$fontSizeXL: "1.40rem",
$fontSizeXXL: "2rem",
$fontSizeXXXL: "3rem",

$gapXS: "0.3rem",
$gapSM: "0.625rem",
$gapMD: "1.25rem",
$gapLG: "1.875rem",
$gapXL: "2.5rem",
$gapXXL: "3rem",

...

In components you can do this:

const styles = createStyles({
  icon: {
    width: "100%",
    fontSize: "1.5rem",
    marginLeft: "$gapSM"
  },
})

What approach would you recommend for this when we start using react-native-unistyles?

I could sort of see a combination of breakpoints and media queries work, but I'm not really sure: (1) what would be the most efficient / performant way to do this and (2) how to prevent a lot of boilerplate in our components. Perhaps a plugin, like mentioned here could work, but I'm not sure what it would look like.

Thanks!

[jpudysz]

Hey 👋

What you've described here are custom tokens that can be used inside a StyleSheet. As of now, there is no support for tokens in Unistyles. Instead of tokens, we have the concept of themes.

You can define your fontSize/gap tokens inside the theme and use them as follows:

rem = (val: number) => (isTablet ? 18 : 16) * (isAndroid ? 1.08 : 1) * val

const theme = {
    // other keys like colors etc.
    gap: {
        xs: rem(0.3),
        sm: rem(0.625),
       // etc.
    },
    rem
}

const styles = createStyles(theme => ({
  icon: {
    width: "100%",
    fontSize: theme.rem(1.5),
    marginLeft: theme.gap.sm
  },
}))

[yvbeek]

This is great information, thank you!
I'm also excited to hear that you're working on v3