diff --git a/CHANGELOG.md b/CHANGELOG.md index 0476642cc..ec254b79b 100644 --- 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 index fe2a548bf..5d995f70a 100644 --- a/documentation/docs/fundamentals/usage.md +++ b/documentation/docs/fundamentals/usage.md @@ -192,16 +192,17 @@ ListHeaderComponentStyle?: StyleProp; ```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 index b03311c6d..f8f90f300 100644 --- 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 index 7a172e2b6..75436a1e1 100644 --- 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 = ( info: ListRenderItemInfo ) => 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 extends ScrollViewProps { /** diff --git a/src/__tests__/ContentContainerUtils.test.ts b/src/__tests__/ContentContainerUtils.test.ts index 83fa9b42d..595443f01 100644 --- 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 index 41b1179e0..dbfca1bc6 100644 --- 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":