diff --git a/src/components/Box/Box.tsx b/src/components/Box/Box.tsx
index 354555d..84a483f 100644
--- a/src/components/Box/Box.tsx
+++ b/src/components/Box/Box.tsx
@@ -1,5 +1,6 @@
 import {
   backgroundColor,
+  backgroundColorShorthand,
   opacity,
   visible,
   layout,
@@ -20,14 +21,15 @@ type RestyleProps = RestyleBoxProps<Theme>;
 
 const restyleFunctions = composeRestyleFunctions<Theme, RestyleProps>([
   backgroundColor,
+  backgroundColorShorthand,
   opacity,
   visible,
   layout,
   spacing,
+  spacingShorthand,
   border,
   shadow,
   position,
-  spacingShorthand,
 ]);
 
 export type BoxProps = RNViewProps & RestyleProps;
diff --git a/src/components/Modal/__snapshots__/Modal.test.tsx.snap b/src/components/Modal/__snapshots__/Modal.test.tsx.snap
index 88ed3f7..0c25052 100644
--- a/src/components/Modal/__snapshots__/Modal.test.tsx.snap
+++ b/src/components/Modal/__snapshots__/Modal.test.tsx.snap
@@ -44,10 +44,10 @@ exports[`Modal should render Modal when visible true with children 1`] = `
   <View
     accessibilityLabel="modal"
     accessible={true}
-    bg="white"
     style={
       Array [
         Object {
+          "backgroundColor": "#FFFFFF",
           "borderRadius": 8,
           "padding": 16,
         },
@@ -276,10 +276,10 @@ exports[`Modal should render Modal without header 1`] = `
   <View
     accessibilityLabel="modal"
     accessible={true}
-    bg="white"
     style={
       Array [
         Object {
+          "backgroundColor": "#FFFFFF",
           "borderRadius": 8,
           "padding": 16,
         },