feat: Shopify#187 add gap property

package.json

@@ -31,23 +31,23 @@
   "devDependencies": {
     "@shopify/eslint-plugin": "^37.0.0",
     "@types/jest": "^25.0.0",
-    "@types/react": "^16.9.2",
-    "@types/react-native": "^0.60.10",
+    "@types/react": "^18.0.24",
+    "@types/react-native": "^0.71.0",
     "@types/react-test-renderer": "^16.9.0",
-    "babel-jest": "^25.5.0",
+    "babel-jest": "^29.2.1",
     "eslint": "^7.14.0",
     "husky": "^4.2.3",
-    "jest": "^25.5.0",
+    "jest": "^29.2.1",
     "prettier": "^1.18.2",
-    "react": "^17.0.2",
-    "react-native": "0.66.3",
+    "react": "18.2.0",
+    "react-native": "0.71.0",
     "react-test-renderer": "^17.0.2",
     "ts-jest": "^25.5.0",
-    "typescript": "~3.7.5"
+    "typescript": "4.8.4"
   },
   "peerDependencies": {
-    "react": ">=16.8.0",
-    "react-native": ">=0.59.0"
+    "react": ">=18.2.0",
+    "react-native": ">=0.71.0"
   },
   "files": [
     "dist/*"

src/hooks/useDimensions.tsx

@@ -20,11 +20,7 @@ export const DimensionsProvider = ({children}: {children: React.ReactNode}) => {
   useEffect(() => {
     const subscription = Dimensions.addEventListener('change', onChange) as any;
 
-    return () =>
-      // Using removeEventListener is deprecated in react-native > 0.65 and will throw warning. Use .remove() if available.
-      subscription && subscription.remove
-        ? subscription.remove()
-        : Dimensions.removeEventListener('change', onChange);
+    return () => subscription.remove();
   }, []);
 
   return (

src/hooks/useRestyle.ts

@@ -23,7 +23,9 @@ const filterRestyleProps = <
         return {
           cleanProps,
           restyleProps: {...restyleProps, [key]: props[key]},
-          serializedRestyleProps: `${serializedRestyleProps}${key}:${props[key]};`,
+          serializedRestyleProps: `${serializedRestyleProps}${String(key)}:${
+            props[key]
+          };`,
         };
       } else {
         return {

src/responsiveHelpers.ts

@@ -104,7 +104,9 @@ export const getResponsiveValue = <
   if (transform) return transform({value: val, theme, themeKey});
   if (isThemeKey(theme, themeKey)) {
     if (val && theme[themeKey][val as string] === undefined)
-      throw new Error(`Value '${val}' does not exist in theme['${themeKey}']`);
+      throw new Error(
+        `Value '${val}' does not exist in theme['${String(themeKey)}']`,
+      );
 
     return val ? theme[themeKey][val as string] : val;
   }

src/restyleFunctions.ts

@@ -23,6 +23,9 @@ const spacingProperties = {
   paddingVertical: true,
   paddingStart: true,
   paddingEnd: true,
+  columnGap: true,
+  rowGap: true,
+  gap: true,
 };
 
 const spacingPropertiesShorthand = {
@@ -44,6 +47,9 @@ const spacingPropertiesShorthand = {
   py: 'paddingVertical',
   ps: 'paddingStart',
   pe: 'paddingEnd',
+  g: 'gap',
+  rG: 'rowGap',
+  cG: 'columnGap',
 };
 
 const typographyProperties = {

src/typeHelpers.ts

@@ -1 +1,2 @@
-export const getKeys = <T>(object: T) => Object.keys(object) as (keyof T)[];
+export const getKeys = <T extends Record<string, any>>(object: T) =>
+  Object.keys(object) as (keyof T)[];

src/types.ts

@@ -48,7 +48,7 @@ export interface Dimensions {
 }
 
 export interface RestyleFunctionContainer<
-  TProps extends Record<string, unknown>,
+  TProps extends Record<string, any>,
   Theme extends BaseTheme = BaseTheme,
   P extends keyof TProps = keyof TProps,
   K extends keyof Theme | undefined = keyof Theme | undefined