diff --git a/src/restyleFunctions.ts b/src/restyleFunctions.ts index 0f698fee..9c3bba94 100644 --- a/src/restyleFunctions.ts +++ b/src/restyleFunctions.ts @@ -310,14 +310,14 @@ export interface BackgroundColorShorthandProps { export type SpacingProps = { [Key in keyof typeof spacingProperties]?: ResponsiveValue< - keyof Theme['spacing'], + Theme['spacing'] extends object ? keyof Theme['spacing'] : number, Theme['breakpoints'] >; }; export type SpacingShorthandProps = { [Key in keyof typeof spacingPropertiesShorthand]?: ResponsiveValue< - keyof Theme['spacing'], + Theme['spacing'] extends object ? keyof Theme['spacing'] : number, Theme['breakpoints'] >; }; diff --git a/src/test/createRestyleComponent.test.tsx b/src/test/createRestyleComponent.test.tsx index 9fe1abce..6ddc792c 100644 --- a/src/test/createRestyleComponent.test.tsx +++ b/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 & + SpacingProps & + SpacingShorthandProps & + OpacityProps & + ViewProps, + ThemeWithoutSpacing +>([backgroundColor, spacing, spacingShorthand, opacity]); const cardVariant = createVariant({ 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( + + + , + ); + expect(root.findByType(View).props).toStrictEqual({ + style: [ + {gap: 10, columnGap: 20, rowGap: 22, marginTop: 2, paddingBottom: 3}, + ], + }); + }); }); }); diff --git a/src/types.ts b/src/types.ts index 2384c9fd..f2a3a230 100644 --- a/src/types.ts +++ b/src/types.ts @@ -35,7 +35,7 @@ export interface KnownBaseTheme { colors: { [key: string]: string; }; - spacing: { + spacing?: { [key: string]: number | string; }; breakpoints?: {