When developing for mobile devices, not all screens are the same. For portrait mode, having the drawer take full width is perfect. But for landscape or tablets, it makes more sense visually to not use the full width.
Currently, in my code I use the style prop on BottomSheet like this:
const MyComponent: FC = () => {
const { orientation } = useOrientation(); // Custom hook, basically just has a listener on 'Dimensions' from react-native.
const drawerRef = useRef<BottomSheetMethods>(null);
return (
<BottomSheet
ref={drawerRef}
style={{
left: orientation === Orientation.LANDSCAPE ? '25%' : 0,
right: orientation === Orientation.LANDSCAPE ? '25%' : 0,
width: orientation === Orientation.LANDSCAPE ? '50%' : '100%',
}}
>
{/* ... */}
</BottomSheet>
);
};
export default MyComponent;
It would be nice to have if this would be a included feature that, if it makes sense and is possible, also is able to being animated.
When developing for mobile devices, not all screens are the same. For portrait mode, having the drawer take full width is perfect. But for landscape or tablets, it makes more sense visually to not use the full width.
Currently, in my code I use the
styleprop onBottomSheetlike this:It would be nice to have if this would be a included feature that, if it makes sense and is possible, also is able to being animated.