Update react-native types to comply to RN 0.72

Shopify · Aug 1, 2023 · 92c3645 · 92c3645
1 parent b5fe766
commit 92c3645
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 27 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,9 @@ and adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
 
+- Update types to match `react-native@0.72` view types.
+  - https://github.com/Shopify/flash-list/pull/890
+
 ## [1.5.0] - 2023-07-12
 
 - Update kotlin version to 1.8.10 for RN 0.72 compatibility

diff --git a/documentation/docs/fundamentals/usage.md b/documentation/docs/fundamentals/usage.md
@@ -192,16 +192,17 @@ ListHeaderComponentStyle?: StyleProp<ViewStyle>;
 ```tsx
 contentContainerStyle?: ContentStyle;
 
-interface ContentStyle {
-  backgroundColor?: ColorValue;
-  paddingTop?: string | number;
-  paddingLeft?: string | number;
-  paddingRight?: string | number;
-  paddingBottom?: string | number;
-  padding?: string | number;
-  paddingVertical?: string | number;
-  paddingHorizontal?: string | number;
-}
+export type ContentStyle = Pick<
+  ViewStyle,
+  | "backgroundColor"
+  | "paddingTop"
+  | "paddingLeft"
+  | "paddingRight"
+  | "paddingBottom"
+  | "padding"
+  | "paddingVertical"
+  | "paddingHorizontal"
+>;
 ```
 
 You can use `contentContainerStyle` to apply padding that will be applied to the whole content itself. For example, you can apply this padding, so that all of your items have leading and trailing space.

diff --git a/package.json b/package.json
@@ -36,6 +36,7 @@
     "test": "jest",
     "lint": "yarn eslint . --ext .ts,.tsx",
     "lint:fix": "yarn eslint . --ext .ts,.tsx --fix",
+    "type-check": "yarn tsc --pretty --noEmit",
     "build": "tsc -b",
     "e2e:build:android": "detox build -c android.emu.release",
     "run-ios": "cd fixture && yarn react-native run-ios && yarn build --watch",
@@ -63,7 +64,7 @@
     "@react-native-community/eslint-config": "^3.0.3",
     "@shopify/eslint-plugin": "^41.3.1",
     "@types/jest": "^28.1.3",
-    "@types/react-native": "0.67.6",
+    "@types/react-native": "0.72.2",
     "babel-jest": "^28.1.1",
     "enhanced-resolve": "^5.9.3",
     "eslint": "8.18.0",

diff --git a/src/FlashListProps.ts b/src/FlashListProps.ts
@@ -5,7 +5,6 @@ import {
   ViewabilityConfig,
   ViewabilityConfigCallbackPairs,
   ViewStyle,
-  ColorValue,
 } from "react-native";
 
 import { BlankAreaEventHandler } from "./native/auto-layout/AutoLayoutView";
@@ -36,16 +35,17 @@ export type ListRenderItem<TItem> = (
   info: ListRenderItemInfo<TItem>
 ) => React.ReactElement | null;
 
-export interface ContentStyle {
-  backgroundColor?: ColorValue;
-  paddingTop?: string | number;
-  paddingLeft?: string | number;
-  paddingRight?: string | number;
-  paddingBottom?: string | number;
-  padding?: string | number;
-  paddingVertical?: string | number;
-  paddingHorizontal?: string | number;
-}
+export type ContentStyle = Pick<
+  ViewStyle,
+  | "backgroundColor"
+  | "paddingTop"
+  | "paddingLeft"
+  | "paddingRight"
+  | "paddingBottom"
+  | "padding"
+  | "paddingVertical"
+  | "paddingHorizontal"
+>;
 
 export interface FlashListProps<TItem> extends ScrollViewProps {
   /**

diff --git a/src/__tests__/ContentContainerUtils.test.ts b/src/__tests__/ContentContainerUtils.test.ts
@@ -60,7 +60,7 @@ describe("ContentContainerUtils", () => {
       paddingRight: 0,
     });
     expect(
-      updateContentStyle({}, { paddingLeft: "1", paddingVertical: "1" })
+      updateContentStyle({}, { paddingLeft: 1, paddingVertical: 1 })
     ).toEqual({
       paddingTop: 1,
       paddingBottom: 1,

diff --git a/yarn.lock b/yarn.lock
@@ -1576,6 +1576,14 @@
   resolved "https://registry.yarnpkg.com/@react-native/polyfills/-/polyfills-2.0.0.tgz#4c40b74655c83982c8cf47530ee7dc13d957b6aa"
   integrity sha512-K0aGNn1TjalKj+65D7ycc1//H9roAQ51GJVk5ZJQFb2teECGmzd86bYDC0aYdbRf7gtovescq4Zt6FR0tgXiHQ==
 
+"@react-native/virtualized-lists@^0.72.4":
+  version "0.72.5"
+  resolved "https://registry.yarnpkg.com/@react-native/virtualized-lists/-/virtualized-lists-0.72.5.tgz#a7b261357ec7e0e5aa97a24d4acab1d903811e09"
+  integrity sha512-AtKE3dez3lf89O87wC2ZglV5aPsifopQgn/UmFhXAwi18Yp1BJfEGh3sUqOPNgZNByYPAGxFANeZq44VATXeJA==
+  dependencies:
+    invariant "^2.2.4"
+    nullthrows "^1.1.1"
+
 "@shopify/eslint-plugin@^41.3.1":
   version "41.3.1"
   resolved "https://registry.yarnpkg.com/@shopify/eslint-plugin/-/eslint-plugin-41.3.1.tgz#8fe55b13a5f5d1b9f45c55a25f5d085e1908fe5c"
@@ -1739,11 +1747,12 @@
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.4.tgz#fcf7205c25dff795ee79af1e30da2c9790808f11"
   integrity sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==
 
-"@types/react-native@0.67.6":
-  version "0.67.6"
-  resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.67.6.tgz#9a7de5feba6065aec9f44f9a1e8f6e55ee5d015c"
-  integrity sha512-NM6atxrefIXMLE/PyQ1bIQjQ/lWLdls3uVxItzKvNUUVZlGqgn/uGN4MarM9quSf90uSqJYPIAeAgTtBTUjhgg==
+"@types/react-native@0.72.2":
+  version "0.72.2"
+  resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.72.2.tgz#27c931a899c555b28e20cdd12e570b017808de96"
+  integrity sha512-/eEjr04Zqo7mTMszuSdrLx90+j5nWhDMMOgtnKZfAYyV3RwmlpSb7F17ilmMMxZWJY81n/JZ4e6wdhMJFpjrCg==
   dependencies:
+    "@react-native/virtualized-lists" "^0.72.4"
     "@types/react" "*"
 
 "@types/react-test-renderer@^17.0.0":