loading...

re: Tutorial: How to share code between iOS, Android & Web using React Native, react-native-web and monorepo VIEW POST

FULL DISCUSSION
 

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...

Code of Conduct Report abuse