styles that depend dimension/layout APIs

[b_d]

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) 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?

[Sébastien Lorber]

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 <[e-mail]> 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 <necolas/react-native-web#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 <#11?email_source=notifications&email_token=AAFW6PVGF5Y3ZEE2S4OZF6TP3UO3VA5CNFSM4H2UAOUKYY3PNVWWK3TUL52HS4DFUVEXG43VMWVGG33NNVSW45C7NFSM4G3AYVXQ>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAFW6PQQQACFAN6ZDUBLAW3P3UO3VANCNFSM4H2UAOUA> .

[b_d]

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.

[Sébastien Lorber]

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 <[e-mail]> 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 <#11?email_source=notifications&email_token=AAFW6PQW46WWBDI5U27H6OTP3UUUNA5CNFSM4H2UAOUKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODYJMYVQ#issuecomment-504548438>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAFW6PRZ5FICFVMKZHUXZVLP3UUUNANCNFSM4H2UAOUA> .

[b_d]

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 😅

[Sébastien Lorber]

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