Add rootContainerStyle prop to ReanimatedDrawerLayout#3846
Conversation
Added mainContainerStyle prop to customize the main component's style.
|
Hi @jr-k! Would you mind sharing an example where this prop is necessary? |
|
Hi! To be honest, it has been a while and I do not remember the exact case that led me to add this React prop. That said, I still think it is useful to expose it. It gives consumers more flexibility to customize the component when needed, without us having to anticipate every possible use case or block people later on. |
m-bert
left a comment
m-bert
left a comment
There was a problem hiding this comment.
I guess it wouldn't hurt us to have such prop, though I'm still not sure about the use case.
This should also have its entry in Drawer documentation.
There was a problem hiding this comment.
Pull request overview
Note
Copilot was unable to run its full agentic suite in this review.
Adds a new styling hook to ReanimatedDrawerLayout so consumers can style the view wrapping the background/main container.
Changes:
- Introduced
backgroundContainerStyleprop onDrawerLayoutProps. - Wired the new prop into the root
Animated.Viewstyle array.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| /** | ||
| * Style wrapping the background component. | ||
| */ | ||
| backgroundContainerStyle?: StyleProp<ViewStyle>; |
| userSelect={userSelect} | ||
| enableContextMenu={enableContextMenu}> | ||
| <Animated.View style={styles.main} onLayout={handleContainerLayout}> | ||
| <Animated.View style={[styles.main, backgroundContainerStyle]} onLayout={handleContainerLayout}> |
| userSelect={userSelect} | ||
| enableContextMenu={enableContextMenu}> | ||
| <Animated.View style={styles.main} onLayout={handleContainerLayout}> | ||
| <Animated.View style={[styles.main, backgroundContainerStyle]} onLayout={handleContainerLayout}> |
m-bert
left a comment
m-bert
left a comment
There was a problem hiding this comment.
Hi @jr-k! Thank you again for this PR. I took the liberty of updating it since it had conflicts with main branch. We've also decided to use rootContainerStyle name instead. Let me know if this works for you, or do you have any other suggestions!
m-bert
changed the title
rootContainerStyle prop to ReanimatedDrawerLayout
|
Perfect, thanks! |
What this PR does
This PR adds a new
mainContainerStyleprop to the main component. Until now, it was not possible to apply custom styles to the wrapper since it was fully controlled internally. By exposing this prop, consumers can now override or extend the wrapper's styles and apply absolute positioning or any other layout adjustment when needed.Why
I needed to apply absolute positioning to the top-level wrapper but there was no way to customize it. Adding this prop keeps the existing default behavior while allowing more flexibility for advanced layout cases.
How
mainContainerStylepropReanimatedDrawerLayoutelement