Banner border still visible when the banner is hidden

[Ross-Landry]

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch [email protected] for the project I'm working on.

The issue:
I've applied some color to the bottom border of a Banner. When the banner is hidden - the bottom border is still visible.
( Here's a snack demonstrating the issue )

My fix:
I applied a conditional style object to the banner container, that sets the bottom border width to 0 when the banner is not visible.

Here is the diff that solved my problem:

diff --git a/node_modules/react-native-paper/src/components/Banner.tsx b/node_modules/react-native-paper/src/components/Banner.tsx
index 4b52832..331f333 100644
--- a/node_modules/react-native-paper/src/components/Banner.tsx
+++ b/node_modules/react-native-paper/src/components/Banner.tsx
@@ -189,7 +189,7 @@ const Banner = ({
   return (
     <Surface
       {...rest}
-      style={[!theme.isV3 && styles.elevation, style]}
+      style={[!theme.isV3 && styles.elevation, style, !visible && styles.hiddenBorder]}
       theme={theme}
       {...(theme.isV3 && { elevation })}
     >
@@ -289,6 +289,9 @@ const styles = StyleSheet.create({
   elevation: {
     elevation: 1,
   },
+  hiddenBorder: {
+    borderBottomWidth:0
+  }
 });
 
 export default withInternalTheme(Banner);

This issue body was partially generated by patch-package.

[lukewalczak]

Hey @Ross-Landry, thanks for the bug report. Could you please attach the snack presenting the issue?

[Ross-Landry]

@lukewalczak Added a snack link. Thanks for your attention on this!