I want to discuss something we are facing after getting a great kickstart from this post. That is responsiveness problem.
We have made significant progress in our journey of converting existing RN apps to RNW. In-fact i am now writing a series of articles on my experience, first one was written last weekend and i plan on writing next this weekend. Here is the first part: medium.com/@ziaulrehman/part-1-con...
For my use case, i am using a similar approach to this library: github.com/calinortan/react-getscreen it basically adds event handlers which trigger a state change hence re-render whenever screen size crosses one of pre-defined(configurable) widths.
This allows us to add conditional styles etc on some elements, or even hide/show some elements conditionally. This along with Platform.OS === 'web' is basically all we are doing for now. It doesn't look very clean but it works and gives us responsive design.
What techniques have you used(if any) for this? What worked best? And what would you suggest. Thanks.
Yeah similar approach with HOC for class components. I actually just released a small RN component for this(actually my first npm package). npmjs.com/package/react-native-get...
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
I want to discuss something we are facing after getting a great kickstart from this post. That is responsiveness problem.
We have made significant progress in our journey of converting existing RN apps to RNW. In-fact i am now writing a series of articles on my experience, first one was written last weekend and i plan on writing next this weekend. Here is the first part:
medium.com/@ziaulrehman/part-1-con...
For my use case, i am using a similar approach to this library: github.com/calinortan/react-getscreen it basically adds event handlers which trigger a state change hence re-render whenever screen size crosses one of pre-defined(configurable) widths.
This allows us to add conditional styles etc on some elements, or even hide/show some elements conditionally. This along with Platform.OS === 'web' is basically all we are doing for now. It doesn't look very clean but it works and gives us responsive design.
What techniques have you used(if any) for this? What worked best? And what would you suggest. Thanks.
I have a custom hook that checks the app dimensions and returns if it’s small/medium/large: github.com/devhubapp/devhub/blob/m...
Besides that, make sure to always use flexbox and percentages where makes sense, not fixed widths in pixels.
Yeah similar approach with HOC for class components. I actually just released a small RN component for this(actually my first npm package). npmjs.com/package/react-native-get...