feat: make spacing property as optional

Author: mlecoq

src/restyleFunctions.ts

@@ -310,14 +310,14 @@ export interface BackgroundColorShorthandProps<Theme extends BaseTheme> {
 
 export type SpacingProps<Theme extends BaseTheme> = {
   [Key in keyof typeof spacingProperties]?: ResponsiveValue<
-    keyof Theme['spacing'],
+    Theme['spacing'] extends object ? keyof Theme['spacing'] : number,
     Theme['breakpoints']
   >;
 };
 
 export type SpacingShorthandProps<Theme extends BaseTheme> = {
   [Key in keyof typeof spacingPropertiesShorthand]?: ResponsiveValue<
-    keyof Theme['spacing'],
+    Theme['spacing'] extends object ? keyof Theme['spacing'] : number,
     Theme['breakpoints']
   >;
 };

src/test/createRestyleComponent.test.tsx

@@ -48,10 +48,16 @@ const themeWithVariant = {
   },
 };
 
+const themeWithoutSpacing = {
+  ...theme,
+  spacing: undefined,
+};
+
 const {breakpoints, ...themeWithoutBreakpoints} = theme;
 
 type Theme = typeof theme;
 type ThemeWithVariant = typeof themeWithVariant;
+type ThemeWithoutSpacing = typeof themeWithoutSpacing;
 
 const mockUseWindowDimensions = jest.fn();
 
@@ -67,6 +73,14 @@ const Component = createRestyleComponent<
     ViewProps,
   Theme
 >([backgroundColor, spacing, spacingShorthand, opacity]);
+const ComponentWithoutSpacing = createRestyleComponent<
+  BackgroundColorProps<ThemeWithoutSpacing> &
+    SpacingProps<ThemeWithoutSpacing> &
+    SpacingShorthandProps<ThemeWithoutSpacing> &
+    OpacityProps<ThemeWithoutSpacing> &
+    ViewProps,
+  ThemeWithoutSpacing
+>([backgroundColor, spacing, spacingShorthand, opacity]);
 const cardVariant = createVariant<ThemeWithVariant, 'cardVariants'>({
   themeKey: 'cardVariants',
 });
@@ -230,5 +244,24 @@ describe('createRestyleComponent', () => {
         style: [{gap: 8, columnGap: 8, rowGap: 8}],
       });
     });
+
+    it('passes gap values from the theme when no spacing prop is defined', () => {
+      const {root} = render(
+        <ThemeProvider theme={themeWithoutSpacing}>
+          <ComponentWithoutSpacing
+            gap={10}
+            columnGap={20}
+            rowGap={22}
+            marginTop={2}
+            paddingBottom={3}
+          />
+        </ThemeProvider>,
+      );
+      expect(root.findByType(View).props).toStrictEqual({
+        style: [
+          {gap: 10, columnGap: 20, rowGap: 22, marginTop: 2, paddingBottom: 3},
+        ],
+      });
+    });
   });
 });

src/types.ts

@@ -35,7 +35,7 @@ export interface KnownBaseTheme {
   colors: {
     [key: string]: string;
   };
-  spacing: {
+  spacing?: {
     [key: string]: number | string;
   };
   breakpoints?: {