Fix styling applied to DatePicker (#827)

Author: YoussefHenna

packages/core/src/components/DatePicker/DatePicker.tsx

@@ -16,6 +16,7 @@ import {
   Platform,
 } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
+import omit from "lodash.omit";
 
 import dateFormat from "dateformat";
 import { withTheme } from "../../theming";
@@ -25,7 +26,12 @@ import DateTimePicker from "./DatePickerComponent";
 
 import type { Theme } from "../../styles/DefaultTheme";
 import type { IconSlot } from "../../interfaces/Icon";
-import { extractStyles } from "../../utilities";
+import {
+  extractStyles,
+  marginStyleNames,
+  paddingStyleNames,
+  positionStyleNames,
+} from "../../utilities";
 
 const AnimatedText = Animated.createAnimatedComponent(Text);
 
@@ -124,7 +130,7 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
     width: number;
   }>({ measured: false, width: 0 });
 
-  const { viewStyles, textStyles } = extractStyles(style);
+  const { textStyles } = extractStyles(style);
 
   const getValidDate = (): Date => {
     if (!value) {
@@ -384,21 +390,24 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
     type === "solid" ? { marginHorizontal: 12 } : {},
   ];
 
-  // const render = (props) => <NativeTextInput {...props} />;
-
   return (
-    <View style={[styles.container, style]}>
+    <>
       <Touchable disabled={disabled} onPress={toggleVisibility}>
         <View pointerEvents="none">
-          <View style={[styles.container, style]}>
+          <View
+            style={[
+              styles.container,
+              omit(style, [...paddingStyleNames, "backgroundColor"]),
+            ]}
+          >
             {leftIconName && leftIconMode === "outset" ? (
               <Icon {...leftIconProps} style={leftIconStyle} />
             ) : null}
             <View
               style={[
                 containerStyle,
                 style ? { height: style.height } : {},
-                viewStyles,
+                omit(style, [...marginStyleNames, ...positionStyleNames]),
               ]}
             >
               {type === "underline" ? (
@@ -546,7 +555,7 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
           </View>
         </Portal>
       )}
-    </View>
+    </>
   );
 };
 

packages/core/src/utilities.ts

@@ -80,6 +80,18 @@ export const marginStyleNames = [
   "marginVertical",
 ];
 
+export const paddingStyleNames = [
+  "padding",
+  "paddingBottom",
+  "paddingEnd",
+  "paddingHorizontal",
+  "paddingLeft",
+  "paddingRight",
+  "paddingStart",
+  "paddingTop",
+  "paddingVertical",
+];
+
 export function extractBorderAndMarginStyles(
   style: StyleProp<any>,
   additionalBorderStyles?: string[],