styles that depend dimension/layout APIs

[brianjd]

I have styles that depend upon the dimension/layout API. In my gatsby-ssr/onRenderBody, I have been calling Dimensions.set (as per https://github.com/necolas/react-native-web/issues/1225) with mobile dimensions, taking a 'mobile-first' approach to styling/rendering. In addition, my components are wrapped in a dimensions aware context/consumer. The issue is that the mobile styles are cached when accessed on desktop. I tried to remedy this by calling Dimensions._update from gatsby-browser/onInitialClientRender, but this did not trigger style re-calculation.

So the question, what is the best approach to set initial dimensions for ssr rendering?

[slorber]

Hi

Not sure this is particularly related to RNW nor my Gatsby plugin. You would have the same problem with anything that use sizes in render methods.

If you are doing a static / ssr website which need to be responsive I don't see other way than using mediaqueries. The server/static build can't know the size the browser will be so in any case you have to render markup that works for all responsive use cases at the same time. At best you could render the same page in 2 distinct static pages for mobile/desktop and try to redirect the user to the appropriate one with SEO or something.

The dimension api is not listener based AFAIK so even if you set a dimension it won't trigger a re-render. Even if it did you would have flickering when the layout change from one to the other

Le ven. 21 juin 2019 à 20:47, b_d notifications@github.com a écrit :

I have styles that depend upon the dimension/layout API. In my gatsby-ssr/onRenderBody, I have been calling Dimensions.set (as per necolas/react-native-web#1225 https://github.com/necolas/react-native-web/issues/1225) with mobile dimensions, taking a 'mobile-first' approach to styling/rendering. In addition, my components are wrapped in a dimensions aware context/consumer. The issue is that the mobile styles are cached when accessed on desktop. I tried to remedy this by calling Dimensions._update from gatsby-browser/onInitialClientRender, but this did not trigger style re-calculation.

So the question, what is the best approach to set initial dimensions for ssr rendering?

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/slorber/gatsby-plugin-react-native-web/issues/11?email_source=notifications&email_token=AAFW6PVGF5Y3ZEE2S4OZF6TP3UO3VA5CNFSM4H2UAOUKYY3PNVWWK3TUL52HS4DFUVEXG43VMWVGG33NNVSW45C7NFSM4G3AYVXQ, or mute the thread https://github.com/notifications/unsubscribe-auth/AAFW6PQQQACFAN6ZDUBLAW3P3UO3VANCNFSM4H2UAOUA .

[brianjd]

Hi Sébastien,

Maybe not a problem specifically with the plugin itself, but definitely something other users of this plugin will encounter when using the Dimensions API. I thought there may be a better way of hooking into the Gatsby SSR and Browser API lifecycle hooks to get things working as expected.

The dimension API is listener based. A call to Dimensions._update fires the listeners as well. I have the listener attached in my 'dimensions aware context'. It fires, just styles don't update.

I guess I can just use regular CSS w/ media-queries for styling components that require platform specific responsive attributes. I was trying to keep things pure, and in congruence with RNW best practices.

[slorber]

I would also like this to be possible but so far I don't know what can be done.

I've asked a similar question here and did not make much progress to answer it https://stackoverflow.com/q/35361085/82609

What I would do it build a responsive library that is cross platform, using dimensions on RN and mediaqueries in web. This way you wouldn't pollute your RN code with CSS

Le ven. 21 juin 2019 à 21:36, b_d notifications@github.com a écrit :

Hi Sébastien,

Maybe not a problem specifically with the plugin itself, but definitely something other users of this plugin will encounter when using the Dimensions API. I thought there may be a better way of hooking into the Gatsby SSR and Browser API lifecycle hooks to get things working as expected.

The dimension API is listener based. A call to Dimensions._update https://github.com/necolas/react-native-web/blob/36dacb2052efdab2a28655773dc76934157d9134/packages/react-native-web/src/exports/Dimensions/index.js#L47 fires the listeners as well. I have the listener attached in my 'dimensions aware context'. It fires, just styles don't update.

I guess I can just use regular CSS w/ media-queries for styling components that require platform specific responsive attributes. I was trying to keep things pure, and in congruence with RNW best practices.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/slorber/gatsby-plugin-react-native-web/issues/11?email_source=notifications&email_token=AAFW6PQW46WWBDI5U27H6OTP3UUUNA5CNFSM4H2UAOUKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODYJMYVQ#issuecomment-504548438, or mute the thread https://github.com/notifications/unsubscribe-auth/AAFW6PRZ5FICFVMKZHUXZVLP3UUUNANCNFSM4H2UAOUA .

[brianjd]

I could also setup multiple build targets in Gatsby (mobile, tablet, desktop). In each build pre-render call Dimensions.set with the average dimensions for the target platform. Since I'm using S3/Cloudfront for delivery, I can then use Cloudfront device type detection and then route the appropriate build / origin. Or maybe I'm just complicating things 😅

[slorber]

Yeah don't know if this would always be safe but you can try