diff --git a/README.md b/README.md index ee74be9..778eca9 100644 --- a/README.md +++ b/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` | diff --git a/example/src/components/Panel/Bar.tsx b/example/src/components/Panel/Bar.tsx index e81c67a..dcf1746 100644 --- a/example/src/components/Panel/Bar.tsx +++ b/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 ( - + ); diff --git a/example/src/components/Panel/Panel.tsx b/example/src/components/Panel/Panel.tsx index 15f0ffc..83d9cf0 100644 --- a/example/src/components/Panel/Panel.tsx +++ b/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 noBackgroundOpacity, style, barStyle, + barContainerStyle, closeRootStyle, closeIconStyle, onClose, @@ -249,7 +251,7 @@ class SwipeablePanel extends Component ]} {...this._panResponder.panHandlers} > - {!this.props.noBar && } + {!this.props.noBar && } {this.props.showCloseButton && ( )} diff --git a/example/src/hooks/useSwipeablePanel.ts b/example/src/hooks/useSwipeablePanel.ts index 714c71f..da81a82 100644 --- a/example/src/hooks/useSwipeablePanel.ts +++ b/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', }); diff --git a/index.d.ts b/index.d.ts index 6c37d9c..172b2bd 100644 --- a/index.d.ts +++ b/index.d.ts @@ -79,6 +79,11 @@ declare interface SwipeablePanelProps extends React.Props { */ smallPanelHeight?: number; + /** + * Use this prop to override bar container style + */ + barContainerStyle?: object; + /** * Set true if you want to make toucable outside of panel */ diff --git a/src/Bar.tsx b/src/Bar.tsx index 046ee8e..dcf1746 100644 --- a/src/Bar.tsx +++ b/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 ( - + ); diff --git a/src/Panel.tsx b/src/Panel.tsx index 15f0ffc..6eb28e4 100644 --- a/src/Panel.tsx +++ b/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 noBackgroundOpacity, style, barStyle, + barContainerStyle, closeRootStyle, closeIconStyle, onClose, @@ -249,7 +251,7 @@ class SwipeablePanel extends Component ]} {...this._panResponder.panHandlers} > - {!this.props.noBar && } + {!this.props.noBar && } {this.props.showCloseButton && ( )} diff --git a/src/typings.d.ts b/src/typings.d.ts index 22a4964..117d98b 100644 --- a/src/typings.d.ts +++ b/src/typings.d.ts @@ -76,6 +76,10 @@ declare interface SwipeablePanelProps extends React.Props { * 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