Skip to content

Feature Request: Custom (Animated) width #37

@CommanderRedYT

Description

@CommanderRedYT

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.

Metadata

Metadata

Assignees

Labels

enhancementNew feature or request

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions