feat: added backgroundStyle, handleStyle & handleIndicatorStyle to bo…

…ttom sheet
gorhom · Aug 18, 2021 · 2211765 · 2211765
1 parent dd632b0
commit 2211765
Show file tree

Hide file tree

Showing 11 changed files with 186 additions and 38 deletions.
diff --git a/example/src/components/contactItem/ContactItem.tsx b/example/src/components/contactItem/ContactItem.tsx
@@ -1,16 +1,24 @@
 import React, { memo, useMemo } from 'react';
-import { Text, StyleSheet, View } from 'react-native';
+import { Text, StyleSheet, View, TextStyle, ViewStyle } from 'react-native';
 import { TouchableOpacity } from '@gorhom/bottom-sheet';
 
 interface ContactItemProps {
   title: string;
   subTitle?: string;
+  titleStyle?: TextStyle;
+  subTitleStyle?: TextStyle;
+  thumbnailStyle?: ViewStyle;
+  iconStyle?: ViewStyle;
   onPress?: () => void;
 }
 
 const ContactItemComponent = ({
   title,
   subTitle,
+  titleStyle,
+  subTitleStyle,
+  thumbnailStyle,
+  iconStyle,
   onPress,
 }: ContactItemProps) => {
   const ContentWrapper = useMemo<any>(
@@ -20,12 +28,14 @@ const ContactItemComponent = ({
   // render
   return (
     <ContentWrapper onPress={onPress} style={styles.container}>
-      <View style={styles.thumbnail} />
+      <View style={[styles.thumbnail, thumbnailStyle]} />
       <View style={styles.contentContainer}>
-        <Text style={styles.title}>{title}</Text>
-        {subTitle && <Text style={styles.subtitle}>{subTitle}</Text>}
+        <Text style={[styles.title, titleStyle]}>{title}</Text>
+        {subTitle && (
+          <Text style={[styles.subtitle, subTitleStyle]}>{subTitle}</Text>
+        )}
       </View>
-      <View style={styles.icon} />
+      <View style={[styles.icon, iconStyle]} />
     </ContentWrapper>
   );
 };

diff --git a/example/src/screens/advanced/CustomThemeExample.tsx b/example/src/screens/advanced/CustomThemeExample.tsx
@@ -0,0 +1,90 @@
+import React, { useCallback, useMemo, useRef } from 'react';
+import { View, StyleSheet } from 'react-native';
+import BottomSheet, { BottomSheetView } from '@gorhom/bottom-sheet';
+import Button from '../../components/button';
+import ContactItem from '../../components/contactItem';
+import { createContactListMockData } from '../../utilities';
+
+const CustomThemeExample = () => {
+  // hooks
+  const bottomSheetRef = useRef<BottomSheet>(null);
+
+  // variables
+  const snapPoints = useMemo(() => ['25%', '50%'], []);
+  const data = useMemo(() => createContactListMockData(5), []);
+
+  // callbacks
+  const handleExpandPress = useCallback(() => {
+    bottomSheetRef.current?.expand();
+  }, []);
+  const handleCollapsePress = useCallback(() => {
+    bottomSheetRef.current?.collapse();
+  }, []);
+  const handleClosePress = useCallback(() => {
+    bottomSheetRef.current?.close();
+  }, []);
+
+  // renders
+  const renderItem = useCallback(
+    (item, index) => (
+      <ContactItem
+        key={`${item.name}.${index}`}
+        title={item.name}
+        subTitle={item.jobTitle}
+        titleStyle={styles.titleStyle}
+        subTitleStyle={styles.subTitleStyle}
+        thumbnailStyle={styles.thumbnailStyle}
+        iconStyle={styles.iconStyle}
+      />
+    ),
+    []
+  );
+  return (
+    <View style={styles.container}>
+      <Button label="Expand" onPress={handleExpandPress} />
+      <Button label="Collapse" onPress={handleCollapsePress} />
+      <Button label="Close" onPress={handleClosePress} />
+
+      <BottomSheet
+        ref={bottomSheetRef}
+        snapPoints={snapPoints}
+        animateOnMount={true}
+        backgroundStyle={styles.backgroundContainer}
+        handleIndicatorStyle={styles.handleIndicator}
+      >
+        <BottomSheetView style={styles.contentContainer}>
+          {data.map(renderItem)}
+        </BottomSheetView>
+      </BottomSheet>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 24,
+  },
+  contentContainer: {
+    paddingHorizontal: 16,
+    overflow: 'visible',
+  },
+  backgroundContainer: {
+    backgroundColor: '#222',
+  },
+  handleIndicator: {
+    backgroundColor: '#eee',
+  },
+  titleStyle: {
+    color: '#dfdfdf',
+  },
+  subTitleStyle: {},
+  thumbnailStyle: {
+    backgroundColor: '#444',
+  },
+  iconStyle: {
+    backgroundColor: '#292929',
+  },
+});
+
+export default CustomThemeExample;
diff --git a/example/src/screens/screens.ts b/example/src/screens/screens.ts
@@ -77,6 +77,11 @@ export const screens = [
         slug: 'Advanced/CustomBackgroundExample',
         getScreen: () => require('./advanced/CustomBackgroundExample').default,
       },
+      {
+        name: 'Custom Theme',
+        slug: 'Advanced/CustomThemeExample',
+        getScreen: () => require('./advanced/CustomThemeExample').default,
+      },
       {
         name: 'Backdrop',
         slug: 'Advanced/BackdropExample',
@@ -97,16 +102,16 @@ export const screens = [
         slug: 'Advanced/ShadowExample',
         getScreen: () => require('./advanced/ShadowExample').default,
       },
-      {
-        name: 'Pull To Refresh',
-        slug: 'Advanced/PullToRefreshExample',
-        getScreen: () => require('./advanced/PullToRefreshExample').default,
-      },
       {
         name: 'Footer',
         slug: 'Advanced/FooterExample',
         getScreen: () => require('./advanced/FooterExample').default,
       },
+      {
+        name: 'Pull To Refresh',
+        slug: 'Advanced/PullToRefreshExample',
+        getScreen: () => require('./advanced/PullToRefreshExample').default,
+      },
       {
         name: 'Custom Gesture Handling',
         slug: 'Advanced/CustomGestureHandling',

diff --git a/src/components/bottomSheet/BottomSheet.tsx b/src/components/bottomSheet/BottomSheet.tsx
@@ -102,7 +102,12 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
       enableOverDrag = DEFAULT_ENABLE_OVER_DRAG,
       enablePanDownToClose = DEFAULT_ENABLE_PAN_DOWN_TO_CLOSE,
       overDragResistanceFactor = DEFAULT_OVER_DRAG_RESISTANCE_FACTOR,
+
+      // styles
       style: _providedStyle,
+      backgroundStyle: _providedBackgroundStyle,
+      handleStyle: _providedHandleStyle,
+      handleIndicatorStyle: _providedHandleIndicatorStyle,
 
       // hooks
       gestureEventsHandlersHook,
@@ -1502,6 +1507,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
                   animatedIndex={animatedIndex}
                   animatedPosition={animatedPosition}
                   backgroundComponent={backgroundComponent}
+                  backgroundStyle={_providedBackgroundStyle}
                 />
                 <Animated.View
                   pointerEvents="box-none"
@@ -1533,6 +1539,8 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
                   overDragResistanceFactor={overDragResistanceFactor}
                   keyboardBehavior={keyboardBehavior}
                   handleComponent={handleComponent}
+                  handleStyle={_providedHandleStyle}
+                  handleIndicatorStyle={_providedHandleIndicatorStyle}
                 />
               </Animated.View>
               {/* <BottomSheetDebugView

diff --git a/src/components/bottomSheet/types.d.ts b/src/components/bottomSheet/types.d.ts
@@ -160,7 +160,7 @@ export interface BottomSheetProps
   //#endregion
 
   /**
-   * View style to be applied at the sheet container,
+   * View style to be applied to the sheet container component,
    * it also could be an Animated Style.
    * @type Animated.AnimateStyle<ViewStyle>
    * @default undefined
@@ -178,6 +178,30 @@ export interface BottomSheetProps
       | 'transform'
     >
   >;
+  /**
+   * View style to be applied to the background component.
+   *
+   * @type ViewStyle
+   * @default undefined
+   */
+  backgroundStyle?: Omit<
+    ViewStyle,
+    'position' | 'top' | 'left' | 'bottom' | 'right'
+  >;
+  /**
+   * View style to be applied to the handle component.
+   *
+   * @type ViewStyle
+   * @default undefined
+   */
+  handleStyle?: ViewStyle;
+  /**
+   * View style to be applied to the handle indicator component.
+   *
+   * @type ViewStyle
+   * @default undefined
+   */
+  handleIndicatorStyle?: ViewStyle;
   /**
    * Custom hook to provide pan gesture events handler, which will allow advance and
    * customize handling for pan gesture.

diff --git a/src/components/bottomSheetBackground/BottomSheetBackground.tsx b/src/components/bottomSheetBackground/BottomSheetBackground.tsx
@@ -7,7 +7,7 @@ const BottomSheetBackgroundComponent = ({
   pointerEvents,
   style,
 }: BottomSheetBackgroundProps) => (
-  <View pointerEvents={pointerEvents} style={[style, styles.container]} />
+  <View pointerEvents={pointerEvents} style={[styles.container, style]} />
 );
 
 const BottomSheetBackground = memo(BottomSheetBackgroundComponent);

diff --git a/src/components/bottomSheetBackgroundContainer/BottomSheetBackgroundContainer.tsx b/src/components/bottomSheetBackgroundContainer/BottomSheetBackgroundContainer.tsx
@@ -1,21 +1,29 @@
-import React, { memo } from 'react';
+import React, { memo, useMemo } from 'react';
 import BottomSheetBackground from '../bottomSheetBackground';
 import type { BottomSheetBackgroundContainerProps } from './types';
 import { styles } from './styles';
+import { StyleSheet } from 'react-native';
 
 const BottomSheetBackgroundContainerComponent = ({
   animatedIndex,
   animatedPosition,
   backgroundComponent: _providedBackgroundComponent,
+  backgroundStyle: _providedBackgroundStyle,
 }: BottomSheetBackgroundContainerProps) => {
   const BackgroundComponent =
     _providedBackgroundComponent || BottomSheetBackground;
+
+  const backgroundStyle = useMemo(
+    () => StyleSheet.flatten([styles.container, _providedBackgroundStyle]),
+    [_providedBackgroundStyle]
+  );
+
   return _providedBackgroundComponent === null ? null : (
     <BackgroundComponent
       pointerEvents="none"
       animatedIndex={animatedIndex}
       animatedPosition={animatedPosition}
-      style={styles.container}
+      style={backgroundStyle}
     />
   );
 };

diff --git a/src/components/bottomSheetBackgroundContainer/types.d.ts b/src/components/bottomSheetBackgroundContainer/types.d.ts
@@ -2,5 +2,5 @@ import type { BottomSheetProps } from '../bottomSheet';
 import type { BottomSheetBackgroundProps } from '../bottomSheetBackground';
 
 export interface BottomSheetBackgroundContainerProps
-  extends Pick<BottomSheetProps, 'backgroundComponent'>,
+  extends Pick<BottomSheetProps, 'backgroundComponent' | 'backgroundStyle'>,
     BottomSheetBackgroundProps {}
diff --git a/src/components/bottomSheetHandle/BottomSheetHandle.tsx b/src/components/bottomSheetHandle/BottomSheetHandle.tsx
@@ -1,4 +1,5 @@
 import React, { memo, useMemo } from 'react';
+import { StyleSheet } from 'react-native';
 import Animated from 'react-native-reanimated';
 import { styles } from './styles';
 import type { BottomSheetDefaultHandleProps } from './types';
@@ -9,9 +10,12 @@ const BottomSheetHandleComponent = ({
   children,
 }: BottomSheetDefaultHandleProps) => {
   // styles
-  const containerStyle = useMemo(() => [styles.container, style], [style]);
+  const containerStyle = useMemo(
+    () => StyleSheet.flatten([styles.container, style]),
+    [style]
+  );
   const indicatorStyle = useMemo(
-    () => [styles.indicator, _indicatorStyle],
+    () => StyleSheet.flatten([styles.indicator, _indicatorStyle]),
     [_indicatorStyle]
   );
 

diff --git a/src/components/bottomSheetHandleContainer/BottomSheetHandleContainer.tsx b/src/components/bottomSheetHandleContainer/BottomSheetHandleContainer.tsx
@@ -17,6 +17,8 @@ function BottomSheetHandleContainerComponent({
   enableHandlePanningGesture,
   handleHeight,
   handleComponent: _providedHandleComponent,
+  handleStyle: _providedHandleStyle,
+  handleIndicatorStyle: _providedIndicatorStyle,
 }: BottomSheetHandleContainerProps) {
   //#region hooks
   const {
@@ -75,25 +77,11 @@ function BottomSheetHandleContainerComponent({
   //#endregion
 
   //#region renders
-  const renderHandle = useCallback(() => {
-    if (_providedHandleComponent === null) {
-      return null;
-    }
-    const HandleComponent =
-      _providedHandleComponent === undefined
-        ? BottomSheetHandle
-        : _providedHandleComponent;
-
-    return (
-      <HandleComponent
-        animatedIndex={animatedIndex}
-        animatedPosition={animatedPosition}
-      />
-    );
-  }, [animatedIndex, animatedPosition, _providedHandleComponent]);
-
-  const shouldRenderHandle = _providedHandleComponent !== null;
-  return shouldRenderHandle ? (
+  const HandleComponent =
+    _providedHandleComponent === undefined
+      ? BottomSheetHandle
+      : _providedHandleComponent;
+  return HandleComponent !== null ? (
     <PanGestureHandler
       enabled={enableHandlePanningGesture}
       waitFor={waitFor}
@@ -113,7 +101,12 @@ function BottomSheetHandleContainerComponent({
         accessibilityHint="Drag up or down to extend or minimize the Bottom Sheet"
         onLayout={handleContainerLayout}
       >
-        {renderHandle()}
+        <HandleComponent
+          animatedIndex={animatedIndex}
+          animatedPosition={animatedPosition}
+          style={_providedHandleStyle}
+          indicatorStyle={_providedIndicatorStyle}
+        />
       </Animated.View>
     </PanGestureHandler>
   ) : null;

diff --git a/src/components/bottomSheetHandleContainer/types.d.ts b/src/components/bottomSheetHandleContainer/types.d.ts
@@ -6,7 +6,13 @@ import type { useInteractivePanGestureHandlerConfigs } from '../../hooks/useGest
 
 export interface BottomSheetHandleContainerProps
   extends Pick<PanGestureHandlerProperties, 'simultaneousHandlers'>,
-    Pick<BottomSheetProps, 'handleComponent' | 'enableHandlePanningGesture'>,
+    Pick<
+      BottomSheetProps,
+      | 'handleComponent'
+      | 'enableHandlePanningGesture'
+      | 'handleIndicatorStyle'
+      | 'handleStyle'
+    >,
     Pick<
       useInteractivePanGestureHandlerConfigs,
       | 'enableOverDrag'