feat: add support to barContainerStyle prop (#109)

Author: PitzTech

README.md

@@ -86,6 +86,7 @@ export default App = () => {
 | **closeIconStyle**      | `Object`   | Use this prop to override close button icon style           | `{}`    |
 | **barStyle**            | `Object`   | Use this prop to override bar style                         | `{}`    |
 | **smallPanelHeight**    | `Object`   | Use this prop to override the small panel default height    |         |
+| **barContainerStyle**   | `Object`   | Use this prop to override bar container style               | `{}`    |
 | **closeOnTouchOutside** | `bool`     | Set true if you want to close panel by touching outside     | `false` |
 | **allowTouchOutside**   | `bool`     | Set true if you want to make toucable outside of panel      | `false` |
 | **noBar**               | `bool`     | Set true if you want to remove gray bar                     | `false` |

example/src/components/Panel/Bar.tsx

@@ -1,13 +1,14 @@
-import React from 'react';
-import {StyleSheet, View} from 'react-native';
+import * as React from 'react';
+import { StyleSheet, View } from 'react-native';
 
 type BarProps = {
-  barStyle?: Object;
+  barStyle?: object;
+  barContainerStyle?: object;
 };
 
-export const Bar = ({barStyle}: BarProps) => {
+export const Bar = ({ barStyle, barContainerStyle }: BarProps) => {
   return (
-    <View style={BarStyles.barContainer}>
+    <View style={[BarStyles.barContainer, barContainerStyle]}>
       <View style={[BarStyles.bar, barStyle]} />
     </View>
   );

example/src/components/Panel/Panel.tsx

@@ -40,6 +40,7 @@ type SwipeablePanelProps = {
   smallPanelHeight?: number;
   noBar?: boolean;
   barStyle?: object;
+  barContainerStyle?: object;
   allowTouchOutside?: boolean;
   scrollViewProps?: ScrollViewProps;
 };
@@ -205,6 +206,7 @@ class SwipeablePanel extends Component<SwipeablePanelProps, SwipeablePanelState>
       noBackgroundOpacity,
       style,
       barStyle,
+      barContainerStyle,
       closeRootStyle,
       closeIconStyle,
       onClose,
@@ -249,7 +251,7 @@ class SwipeablePanel extends Component<SwipeablePanelProps, SwipeablePanelState>
           ]}
           {...this._panResponder.panHandlers}
         >
-          {!this.props.noBar && <Bar barStyle={barStyle} />}
+          {!this.props.noBar && <Bar barStyle={barStyle} barContainerStyle={barContainerStyle} />}
           {this.props.showCloseButton && (
             <Close rootStyle={closeRootStyle} iconStyle={closeIconStyle} onPress={this.props.onClose} />
           )}

example/src/hooks/useSwipeablePanel.ts

@@ -18,6 +18,7 @@ const useSwipeablePanel = () => {
     onlySmall: false,
     allowTouchOutside: false,
     barStyle: {},
+    barContainerStyle: {},
     style: {},
     closeRootStyle: {},
     contentType: null,
@@ -77,6 +78,7 @@ const useSwipeablePanel = () => {
       noBar: false,
       style: { backgroundColor: '#1f1f1f' },
       barStyle: { backgroundColor: 'rgba(255,255,255,0.2)' },
+      barContainerStyle: { backgroundColor: '#1f1f1f' },
       closeRootStyle: { backgroundColor: 'rgba(255,255,255,0.2)' },
       contentType: 'darkShoppingCart',
     });

index.d.ts

@@ -79,6 +79,11 @@ declare interface SwipeablePanelProps extends React.Props<SwipeablePanel> {
    */
   smallPanelHeight?: number;
 
+  /**
+   * Use this prop to override bar container style
+   */
+  barContainerStyle?: object;
+
   /**
    * Set true if you want to make toucable outside of panel
    */

src/Bar.tsx

@@ -3,11 +3,12 @@ import { StyleSheet, View } from 'react-native';
 
 type BarProps = {
   barStyle?: object;
+  barContainerStyle?: object;
 };
 
-export const Bar = ({ barStyle }: BarProps) => {
+export const Bar = ({ barStyle, barContainerStyle }: BarProps) => {
   return (
-    <View style={BarStyles.barContainer}>
+    <View style={[BarStyles.barContainer, barContainerStyle]}>
       <View style={[BarStyles.bar, barStyle]} />
     </View>
   );

src/Panel.tsx

@@ -40,6 +40,7 @@ type SwipeablePanelProps = {
   smallPanelHeight?: number;
   noBar?: boolean;
   barStyle?: object;
+  barContainerStyle?: object,
   allowTouchOutside?: boolean;
   scrollViewProps?: ScrollViewProps;
 };
@@ -205,6 +206,7 @@ class SwipeablePanel extends Component<SwipeablePanelProps, SwipeablePanelState>
       noBackgroundOpacity,
       style,
       barStyle,
+      barContainerStyle,
       closeRootStyle,
       closeIconStyle,
       onClose,
@@ -249,7 +251,7 @@ class SwipeablePanel extends Component<SwipeablePanelProps, SwipeablePanelState>
           ]}
           {...this._panResponder.panHandlers}
         >
-          {!this.props.noBar && <Bar barStyle={barStyle} />}
+          {!this.props.noBar && <Bar barStyle={barStyle} barContainerStyle={barContainerStyle} />}
           {this.props.showCloseButton && (
             <Close rootStyle={closeRootStyle} iconStyle={closeIconStyle} onPress={this.props.onClose} />
           )}

src/typings.d.ts

@@ -76,6 +76,10 @@ declare interface SwipeablePanelProps extends React.Props<SwipeablePanel> {
    * Use this prop to override the small panel default height
    */
   smallPanelHeight?: number;
+  /**
+   * Use this prop to override bar container style
+   */
+  barContainerStyle?: object;
 
   /**
    * Set true if you want to make toucable outside of panel