feat: add overlayEnable option in drawer layout #11652
Open
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Please provide enough information so that others can review your pull request.
Motivation
I like the react-native-drawer-layout and want to use it to host some settings that will pull out in a drawer. In my case, the requirements are that the drawer open and close but the content remain interactive. Currently, when using
drawerType="front"
,drawerType="slide"
, anddrawerType="back"
and the drawer is open the content in the drawer is covered in an overlay that close the drawer when one attempts to interact with the content (children). This works well for use in a navigation but in my case I need to be able to interact with the content likedrawerType="permanent"
but open and close likedrawerType="front"
.I added a boolean option available on Drawer props following the naming conventions called
overlayEnabled
to allow the overlay to be turned off. It defaults to true to maintain the original functionality but can be set to false to allow the users to interact with the drawer content and leave the drawer open.Test plan
overlayEnabled={false}
and notice that you can click on the button to close the drawer in the screen (from the Drawer children).overlayEnabled={true}
the overlay appears over the content (children). Clicking any part of the will close the drawer.overlayEnabled
the overlay appears over the content (children). Clicking any part of the will close the drawer.