feat(foundation): added dynamic header to bottom sheet

sendbird · Dec 6, 2022 · 850cb68 · 850cb68
1 parent 3efa164
commit 850cb68
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 1 deletion.
diff --git a/packages/uikit-react-native-foundation/src/ui/BottomSheet/index.tsx b/packages/uikit-react-native-foundation/src/ui/BottomSheet/index.tsx
@@ -15,14 +15,15 @@ export type BottomSheetItem = {
  titleColor?: string;
  onPress: () => void;
  }[];
+ HeaderComponent?: () => JSX.Element;
 };
 type Props = {
  visible: boolean;
  onHide: () => Promise<void>;
  onError?: (error: unknown) => void;
  onDismiss?: () => void;
 } & BottomSheetItem;
-const BottomSheet = ({ onDismiss, onHide, visible, sheetItems }: Props) => {
+const BottomSheet = ({ onDismiss, onHide, visible, sheetItems, HeaderComponent }: Props) => {
  const { statusBarTranslucent } = useHeaderStyle();
  const { width } = useWindowDimensions();
  const { bottom, left, right } = useSafeAreaInsets();
@@ -36,6 +37,7 @@ const BottomSheet = ({ onDismiss, onHide, visible, sheetItems }: Props) => {
  backgroundStyle={{ alignItems: 'center', justifyContent: 'flex-end' }}
  >
  <DialogSheet style={{ width, paddingBottom: bottom }}>
+ {HeaderComponent && <HeaderComponent />}
  {sheetItems.map(({ onPress, ...props }, idx) => (
  <TouchableOpacity
  activeOpacity={0.75}

diff --git a/packages/uikit-react-native-foundation/src/ui/Dialog/index.tsx b/packages/uikit-react-native-foundation/src/ui/Dialog/index.tsx
@@ -154,6 +154,7 @@ export const DialogProvider = ({ defaultLabels, children }: Props) => {
  onDismiss={consumeQueue}
  visible={visibleState.current}
  sheetItems={workingDialogJob.current.props.sheetItems}
+ HeaderComponent={workingDialogJob.current.props.HeaderComponent}
  />
  )}
  </BottomSheetContext.Provider>