Responsive Example

[seanaguinaga]

Hey there

I am new to React Native and I am not familiar with how react-native does responsive design.

Are there any examples of responsive app layouts? Think side menu on tablet and desktop => tab bar on mobile.

Also are platform specific modals and things like that rendered by default in a way that looks native? Like the swipe up drawer on Apple Maps, with animations and all? Or do you have to add those to everything?

[nandorojo]

Hey, RN doesn’t have responsive design baked in, so libraries like Dripsy and Restyle do it for you. Under the hood, it uses useWindowDimensions() to conditionally apply styles. See the Dripsy docs to see how to use responsive styles (just pass an array to any value in the sx prop.)

The React Native Modal component is good for full screen modals. To make it look like an iOS modal you’ll want the formSheet presentation style prop set.

For an Apple Maps type bottom sheet, you’ll want react-native-bottom-sheet by @gorhom. That’s a really good lib.

[nandorojo]

bottom sheet here: https://github.com/gorhom/react-native-bottom-sheet