Use useWindowDimensions hook instead of defining our own

package.json

@@ -32,7 +32,7 @@
     "@shopify/eslint-plugin": "^37.0.0",
     "@types/jest": "^25.0.0",
     "@types/react": "^16.9.2",
-    "@types/react-native": "^0.60.10",
+    "@types/react-native": "^0.66.4",
     "@types/react-test-renderer": "^16.9.0",
     "babel-jest": "^25.5.0",
     "eslint": "^7.14.0",
@@ -46,8 +46,8 @@
     "typescript": "~3.7.5"
   },
   "peerDependencies": {
-    "react": ">=16.8.0",
-    "react-native": ">=0.59.0"
+    "react": "*",
+    "react-native": "*"
   },
   "files": [
     "dist/*"

src/context.tsx

@@ -1,8 +1,6 @@
 import React from 'react';
 import {BaseTheme} from 'types';
 
-import {DimensionsProvider} from './hooks/useDimensions';
-
 export const ThemeContext = React.createContext({
   colors: {},
   spacing: {},
@@ -15,8 +13,4 @@ export const ThemeProvider = ({
 }: {
   theme: BaseTheme;
   children: React.ReactNode;
-}) => (
-  <ThemeContext.Provider value={theme}>
-    <DimensionsProvider>{children}</DimensionsProvider>
-  </ThemeContext.Provider>
-);
+}) => <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>;

src/hooks/useResponsiveProp.ts

@@ -1,17 +1,18 @@
+import {useWindowDimensions} from 'react-native';
+
 import {BaseTheme, PropValue, ResponsiveValue} from '../types';
 import {
   getValueForScreenSize,
   isResponsiveObjectValue,
 } from '../responsiveHelpers';
 
-import useDimensions from './useDimensions';
 import useTheme from './useTheme';
 
 const useResponsiveProp = <Theme extends BaseTheme, TVal extends PropValue>(
   propValue: ResponsiveValue<TVal, Theme>,
 ) => {
   const theme = useTheme<Theme>();
-  const dimensions = useDimensions();
+  const dimensions = useWindowDimensions();
 
   return isResponsiveObjectValue(propValue, theme)
     ? getValueForScreenSize({

src/hooks/useRestyle.ts

@@ -1,10 +1,9 @@
 import {useMemo} from 'react';
-import {StyleProp} from 'react-native';
+import {StyleProp, useWindowDimensions} from 'react-native';
 
 import {BaseTheme, RNStyle, Dimensions} from '../types';
 import {getKeys} from '../typeHelpers';
 
-import useDimensions from './useDimensions';
 import useTheme from './useTheme';
 
 const filterRestyleProps = <
@@ -63,7 +62,7 @@ const useRestyle = <
   props: TProps,
 ) => {
   const theme = useTheme<Theme>();
-  const dimensions = useDimensions();
+  const dimensions = useWindowDimensions();
 
   const {cleanProps, restyleProps, serializedRestyleProps} = filterRestyleProps(
     props,

src/test/createRestyleComponent.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import {create as render, act} from 'react-test-renderer';
-import {View, Dimensions, ViewProps} from 'react-native';
+import {create as render} from 'react-test-renderer';
+import {View, ViewProps} from 'react-native';
 
 import createRestyleComponent from '../createRestyleComponent';
 import {
@@ -48,21 +48,11 @@ const themeWithVariant = {
 type Theme = typeof theme;
 type ThemeWithVariant = typeof themeWithVariant;
 
-jest.mock('react-native', () => {
-  return Object.setPrototypeOf(
-    {
-      Dimensions: {
-        get: () => ({
-          width: 375,
-          height: 667,
-        }),
-        addEventListener: jest.fn(() => ({remove: () => {}})),
-        removeEventListener: jest.fn(),
-      },
-    },
-    jest.requireActual('react-native'),
-  );
-});
+const mockUseWindowDimensions = jest.fn();
+
+jest.mock('react-native/Libraries/Utilities/useWindowDimensions', () => ({
+  default: mockUseWindowDimensions,
+}));
 
 const Component = createRestyleComponent<
   BackgroundColorProps<Theme> &
@@ -86,7 +76,7 @@ const ComponentWithVariant = createRestyleComponent<
 describe('createRestyleComponent', () => {
   describe('creates a component that', () => {
     beforeEach(() => {
-      (Dimensions.addEventListener as jest.Mock).mockClear();
+      mockUseWindowDimensions.mockReturnValue({width: 375, height: 667});
     });
 
     it('passes styles based on the given props', () => {
@@ -133,8 +123,7 @@ describe('createRestyleComponent', () => {
       });
     });
 
-    it('re-renders with styles specific to the screen size when dimensions change', async () => {
-      (Dimensions.addEventListener as jest.Mock).mockClear();
+    it('renders with phone-specific style', async () => {
       const {root} = render(
         <ThemeProvider theme={theme}>
           <Component opacity={{phone: 0.5, tablet: 0.8}} />
@@ -144,14 +133,19 @@ describe('createRestyleComponent', () => {
         style: [{opacity: 0.5}],
       });
       await new Promise(resolve => setTimeout(resolve, 0));
-      const {calls} = (Dimensions.addEventListener as jest.Mock).mock;
-      const onChange = calls[calls.length - 1][1];
-      act(() => {
-        onChange({window: {width: 768, height: 1024}});
-      });
+    });
+
+    it('renders with tablet-specific style when dimensions are bigger', async () => {
+      mockUseWindowDimensions.mockReturnValue({width: 768, height: 1024});
+      const {root} = render(
+        <ThemeProvider theme={theme}>
+          <Component opacity={{phone: 0.5, tablet: 0.8}} />
+        </ThemeProvider>,
+      );
       expect(root.findByType(View).props).toStrictEqual({
         style: [{opacity: 0.8}],
       });
+      await new Promise(resolve => setTimeout(resolve, 0));
     });
 
     it('forwards refs', () => {

yarn.lock

@@ -1920,13 +1920,12 @@
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.2.tgz#0e58ae66773d7fd7c372a493aff740878ec9ceaa"
   integrity sha512-f8JzJNWVhKtc9dg/dyDNfliTKNOJSLa7Oht/ElZdF/UbMUmAH3rLmAk3ODNjw0mZajDEgatA03tRjB4+Dp/tzA==
 
-"@types/react-native@^0.60.10":
-  version "0.60.11"
-  resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.60.11.tgz#c797f89180291c3a1d6f573f1e89644c8c17f60e"
-  integrity sha512-JAe7/UCGhnXxTwHCix1Gs6EbbCTeqU8TxxKHKNrsVtECZ9cPYp1UmJoDIDaNTz8o1/9nTFOtPj7CvHp2hWpEIQ==
+"@types/react-native@^0.66.4":
+  version "0.66.25"
+  resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.66.25.tgz#0a10458e28d88bb04a19b2a911b6cfe73835dcfe"
+  integrity sha512-PChgvdSNebNLsp+0F9hElID2u1JMkOMme5zE3zrHeh156HN5y+tzYqyzDFCor1d2/HDah+St2zQavt8nfWfuMQ==
   dependencies:
-    "@types/prop-types" "*"
-    "@types/react" "*"
+    "@types/react" "^17"
 
 "@types/react-test-renderer@^16.9.0":
   version "16.9.0"
@@ -1943,6 +1942,20 @@
     "@types/prop-types" "*"
     csstype "^2.2.0"
 
+"@types/react@^17":
+  version "17.0.52"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.52.tgz#10d8b907b5c563ac014a541f289ae8eaa9bf2e9b"
+  integrity sha512-vwk8QqVODi0VaZZpDXQCmEmiOuyjEFPY7Ttaw5vjM112LOq37yz1CDJGrRJwA1fYEq4Iitd5rnjd1yWAc/bT+A==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
+"@types/scheduler@*":
+  version "0.16.2"
+  resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
+  integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==
+
 "@types/stack-utils@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e"
@@ -3003,6 +3016,11 @@ csstype@^2.2.0:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.6.tgz#c34f8226a94bbb10c32cc0d714afdf942291fc41"
   integrity sha512-RpFbQGUE74iyPgvr46U9t1xoQBM8T4BL8SxrN66Le2xYAPSaDJJKeztV3awugusb3g3G9iL8StmkBBXhcbbXhg==
 
+csstype@^3.0.2:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.1.tgz#841b532c45c758ee546a11d5bd7b7b473c8c30b9"
+  integrity sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==
+
 damerau-levenshtein@^1.0.4:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.5.tgz#780cf7144eb2e8dbd1c3bb83ae31100ccc31a414"