Media queries and transform styles don't seem to work

[fax1ty]

Description

transform: [
      {
        translateY: {
          [mq.only.width(320, 345)]: 40,
          [mq.only.width(345)]: 0,
        },
      }

Steps to reproduce

1. Make a component
2. Transform hasn't been applied.

Snack or a link to a repository (optional)

No response

Unistyles version

2.9.1

React Native version

0.74.2

Platforms

Android

Engine

Hermes

Architecture

Paper (old)

[jpudysz]

Thanks for the report. Next week I want to release new version. I will try to repro!

[tamangupta1999]

Thanks @jpudysz for this great library. 🙌

Built-in breakpoints landscape and portrait also isnt working:

    backgroundColor: {
      landscape: theme.colors.background,
      portrait: theme.colors.warning
    },

[jpudysz]

@tamangupta1999 please read the docs, they work only on mobile when you don't register your own breakpoints.

[jpudysz]

@fax1ty I can't reproduce it.

Tested on Android:

1. Console log current screen width with UnistylesRuntime.screen.width -> 448
2. Add style to container:

    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        paddingHorizontal: 20,
        backgroundColor: theme.colors.backgroundColor,
        rowGap: 20,
        transform: [
            {
                translateY: {
                    [mq.only.width(320, 448)]: 200,
                    [mq.only.width(449)]: 0
                }
            }
        ]
    },

3. Result:

{"alignItems": "center", "backgroundColor": "#ffffff", "flex": 1, "justifyContent": "center", "paddingHorizontal": 20, "rowGap": 20, "transform": [{"translateY": 200}]}

Keep in mind that mq is resolved in order and has the biggest priority.