buttonDock preview Screen styling fix

Author: SkitPie

src/components/common/CustomButtonDock.js

@@ -12,11 +12,11 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
  * @param {React.ReactNode} firstButton - The first button component to display
  * @param {React.ReactNode} secondButton - The second button component to display
  */
-const CustomButtonDock = ({ direction = "vertical", firstButton, secondButton }) => {
+const CustomButtonDock = ({ direction = "vertical", firstButton, secondButton, style }) => {
  const insets = useSafeAreaInsets();
 
  return (
- <View style={[styles.overlay, { marginBottom: insets.bottom }]} pointerEvents="box-none">
+ <View style={[styles.overlay, { paddingBottom: insets.bottom, ...style }]} pointerEvents="box-none">
  <View style={styles.bottomContainer} pointerEvents="box-none">
  <View style={[styles.dock, direction === "horizontal" ? styles.horizontal : styles.vertical]}>
  {firstButton && (

src/screens/PreviewScreens/buttonDockScreen.js

@@ -17,21 +17,23 @@ const ButtonDockScreen = () => {
  style={{
  ...textStyles.text_sm_regular,
  color: colors.grey500,
- paddingBottom: paddings.p_32,
+ marginBottom: paddings.p_32,
  }}
  >
  The count changes dynamically based on the button Count (min 1, max 2)
  </Text>
  <View style={{ height: 89 }}>
  <CustomButtonDock
  firstButton={<CustomButton text="Primary" type="primary" />}
+ style={{paddingBottom: 0}} // No need! Adds custom styling to the ButtonDock. (Just for the preview screen needed)
  />
  </View>
 
  <View style={{ marginTop: paddings.p_16, marginBottom: paddings.p_32, height: 161 }}>
  <CustomButtonDock
  firstButton={<CustomButton text="Primary" type="primary" />}
  secondButton={<CustomButton text="Secondary" type="secondary" />}
+ style={{paddingBottom: 0}} // No need! Adds custom styling to the ButtonDock. (Just for the preview screen needed)
  />
  </View>
 
@@ -51,10 +53,9 @@ const ButtonDockScreen = () => {
  direction="horizontal"
  firstButton={<CustomButton text="Primary" type="primary" />}
  secondButton={<CustomButton text="Secondary" type="secondary" />}
+ style={{paddingBottom: 0}}
  />
  </View>
-
-
  </ScrollView>
  </View>
  );