ScrollView TypeScript issue missing following properties

[midrizi]

I get the following typescript error whenever I use ScrollView Component:

Type '{ children: Element; }' is missing the following properties from type 'Pick<Omit<{ testID?: string; pointerEvents?: "auto" | "none" | "box-none" | "box-only"; style?: StyleProp; horizontal?: boolean; hitSlop?: Insets; ... 100 more ...; persistentScrollbar?: boolean; }, keyof StyledProps<...>> & StyledProps<...> & { ...; } & RefAttributes<...>, "key" | ... 1 more ... | keyof ...': stickyHeaderHiddenOnScroll, StickyHeaderComponent, automaticallyAdjustKeyboardInsets, automaticallyAdjustsScrollIndicatorInsetsts(2739)

The issue seems to be in: node_modules/@dripsy/core/build/components/ScrollView.d.ts line 239, ...keyof import("react-native").ScrollViewProps...

[karmatradeDev]

im also experiencing this but on all dripsy components (text Input, Pressable, ScrollView etc..)

[nandorojo]

hmm i think this might be related to react 18 or something. could you do yarn why react and yarn why @types/react?

[midrizi]

Yes we are using react 18, here's the output:

➜ yarn why react
yarn why v1.22.18
[1/4] Why do we have the module "react"...?
[2/4] Initialising dependency graph...
[3/4] Finding dependency...
[4/4] Calculating file sizes...
=> Found "react@18.0.0"
info Has been hoisted to "react"
info This module exists because it's specified in "dependencies".
info Disk size without dependencies: "388KB"
info Disk size with unique dependencies: "420KB"
info Disk size with transitive dependencies: "448KB"
info Number of shared dependencies: 2
=> Found "xdl#react@16.14.0"
info This module exists because "detox-expo-helpers#xdl" depends on it.
info Disk size without dependencies: "332KB"
info Disk size with unique dependencies: "516KB"
info Disk size with transitive dependencies: "596KB"
info Number of shared dependencies: 5

➜ yarn why @types/react
yarn why v1.22.18
[1/4] Why do we have the module "@types/react"...?
[2/4] Initialising dependency graph...
[3/4] Finding dependency...
[4/4] Calculating file sizes...
=> Found "@types/react@18.0.21"
info Has been hoisted to "@types/react"
info Reasons this module exists
   - Specified in "devDependencies"
   - Hoisted from "@types#react-native#@types#react"
   - Hoisted from "@types#react-test-renderer#@types#react"
info Disk size without dependencies: "196KB"
info Disk size with unique dependencies: "1.38MB"
info Disk size with transitive dependencies: "1.38MB"
info Number of shared dependencies: 3

[nandorojo]

looks like you have react installed twice. can you uninstall xdl?

[nandorojo]

alternatively try a yarn resolution for react

[midrizi]

I removed detox-expo-helpers which uses xdl, but still the same issue

error TS2739: Type '{ children: Element[]; style: ViewStyle; contentContainerStyle: ViewStyle; }' is missing the following properties from type 'Pick<Omit<{ testID?: string; pointerEvents?: "none" | "auto" | "box-none" | "box-only"; style?: StyleProp; horizontal?: boolean; hitSlop?: Insets; ... 100 more ...; persistentScrollbar?: boolean; }, keyof StyledProps<...>> & StyledProps<...> & { ...; } & RefAttributes<...>, "key" | ... 1 more ... | keyof ...': stickyHeaderHiddenOnScroll, StickyHeaderComponent, automaticallyAdjustKeyboardInsets, automaticallyAdjustsScrollIndicatorInsets

➜ yarn why react    
yarn why v1.22.18
[1/4] Why do we have the module "react"...?
[2/4] Initialising dependency graph...
[3/4] Finding dependency...
[4/4] Calculating file sizes...
=> Found "react@18.0.0"
info Has been hoisted to "react"
info This module exists because it's specified in "dependencies".
info Disk size without dependencies: "388KB"
info Disk size with unique dependencies: "420KB"
info Disk size with transitive dependencies: "448KB"
info Number of shared dependencies: 2

➜ yarn why @types/react         
yarn why v1.22.18
[1/4] Why do we have the module "@types/react"...?
[2/4] Initialising dependency graph...
[3/4] Finding dependency...
[4/4] Calculating file sizes...
=> Found "@types/react@18.0.21"
info Has been hoisted to "@types/react"
info Reasons this module exists
   - Specified in "devDependencies"
   - Hoisted from "@types#react-native#@types#react"
   - Hoisted from "@types#react-test-renderer#@types#react"
info Disk size without dependencies: "196KB"
info Disk size with unique dependencies: "1.38MB"
info Disk size with transitive dependencies: "1.38MB"
info Number of shared dependencies: 3

[midrizi]

A few devDependencies:

"@types/react": "^18",
"@types/react-native": "0.69.6",
"@types/react-test-renderer": "18.0.0",

resolutions:

"resolutions": {
  "react": "18.0.0",
  "@types/react": "^18",
  "@types/react-dom": "18.0.0",
  "ts-toolbelt": "^9.6.0"
}

[nandorojo]

Are you using NPM or Yarn?

[midrizi]

@nandorojo yarn

[RichardLindhout]

I have this on all dripsy components like TextInput, ScrollView after upgrading next + expo

[nandorojo]

I think this is a duplicate of #260. Please see the workaround there.