SSR: responsive styles doesn't resolve on initial render

[ykliuiev]

Hey, wanted to say thank you for the cool lib :)

I want to try it out with universal app (RN + RNW with Nextjs) but run into the issue where responsive styles are not applied properly on initial render, for example on desktop <Box flex="fluid" alignX="center" alignY={['center', 'top']}> will still render element in the center of the screen and only after I toggle back and forth responsive mode it renders on top. Currently the workaround is to load element dynamically like this: import dynamic from 'next/dynamic'; const Box = dynamic( () => import('@mobily/stacks').then((mod) => mod.Box), { ssr: false, }, );

I set up a quick example here

Let me know if description is not clear or you have any questions.

Thanks

[mobily]

@kliuiev thanks for setting the example up, it's always helpful! I will review it shortly and let you know as soon as I resolve this issue :)

[mobily]

@ykliuiev it's been fixed in v.1.0.3 (it's still an unofficial version, available under the next tag – yarn add @mobily/stacks@next)

[mobily]

@ykliuiev works fine, without dynamic imports, in v1.1.1 :)

[ykliuiev]

@mobily this is great, thank you so much :)