fix: Picker Wheel not scrolling in Android ScrollView

components/date-picker-view/PropsType.tsx

@@ -16,6 +16,7 @@ export interface DatePickerViewPropsType
     | 'numberOfLines'
     | 'renderMaskTop'
     | 'renderMaskBottom'
+    | 'withWrapper'
   > {
   value?: PickerDate
   defaultValue?: PickerDate

components/date-picker-view/demo/basic.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
 import { ScrollView, Text } from 'react-native'
+import { createNativeWrapper } from 'react-native-gesture-handler'
 import { DatePickerView } from '../../'
 import { DatePickerFilter } from '../../date-picker/date-picker-utils'
 
@@ -39,6 +40,12 @@ export default () => {
         precision="hour"
         renderLabel={labelRenderer}
         filter={dateFilter}
+        withWrapper={(Component) =>
+          createNativeWrapper(Component, {
+            disallowInterruption: true,
+            shouldCancelWhenOutside: false,
+          })
+        }
       />
     </ScrollView>
   )

components/picker-view/PropsType.tsx

@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react'
+import { ComponentType } from 'react'
 import { StyleProp, TextStyle, ViewStyle } from 'react-native'
 
 export type PickerValue = string | number
@@ -16,7 +17,6 @@ export type PickerColumnItem = {
 }
 
 export type PickerColumn = PickerColumnItem[]
-// type PickerColumn = (string | PickerColumnItem)[] // TODO: support string type
 
 export interface PickerViewPropsType {
   value?: PickerValue[]
@@ -35,4 +35,18 @@ export interface PickerViewPropsType {
   renderLabel?: (item: PickerColumnItem, index: number) => ReactNode
   renderMaskTop?: () => ReactNode
   renderMaskBottom?: () => ReactNode
+  /**
+   * @description HOC for Wheel
+   * @example ```tsx
+   * import { createNativeWrapper } from 'react-native-gesture-handler'
+   *
+   * withWrapper={(Component) =>
+   *  createNativeWrapper(Component, {
+   *    disallowInterruption: true,
+   *    shouldCancelWhenOutside: false,
+   *  })
+   * }
+   * ```
+   */
+  withWrapper?: (Component: ComponentType<any>) => ComponentType<any>
 }

components/picker-view/Wheel.tsx

@@ -1,4 +1,3 @@
-// 需要重构成translate3d
 import type { ReactNode } from 'react'
 import React from 'react'
 import {

components/picker-view/demo/basic.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { ScrollView, Text } from 'react-native'
+import { createNativeWrapper } from 'react-native-gesture-handler'
 import { PickerView } from '../../'
 
 const basicColumns = [
@@ -40,6 +41,13 @@ export default class PickerViewExample extends React.Component {
           itemStyle={{
             padding: 0,
           }}
+          // To fix: Wheel not scrolling in Android ScrollView
+          withWrapper={(Component) =>
+            createNativeWrapper(Component, {
+              disallowInterruption: true,
+              shouldCancelWhenOutside: false,
+            })
+          }
         />
 
         <Text style={{ margin: 16 }}>受控模式</Text>

components/picker-view/picker-view.tsx

@@ -32,6 +32,7 @@ export default class RMCPickerView extends React.Component<
     renderMaskBottom: () => (
       <View style={{ flex: 1, backgroundColor: 'rgba(255,255,255,0.8)' }} />
     ),
+    withWrapper: (Component: any) => Component,
   }
 
   constructor(props: RMCPickerViewProps) {
@@ -110,8 +111,10 @@ export default class RMCPickerView extends React.Component<
       numberOfLines,
       handleSelect,
       loadingContent,
+      withWrapper,
     } = this.props
     const itemHeight = this.props.itemHeight || this.state.itemHeight
+    const WheelHOC = withWrapper?.(Wheel) || Wheel
     return (
       <WithTheme themeStyles={pickerViewStyles} styles={styles}>
         {(s) =>
@@ -133,7 +136,6 @@ export default class RMCPickerView extends React.Component<
               <View style={[s.wheelWrapper, { height: wheelHeight }]}>
                 {(loading || columns?.length === 0) && loading !== false
                   ? loadingContent || (
-                      // TODO-luokun: loading样式优化
                       <View style={{ flex: 1, alignSelf: 'center' }}>
                         <ActivityIndicator
                           animating
@@ -144,7 +146,7 @@ export default class RMCPickerView extends React.Component<
                   : itemHeight > 0 &&
                     wheelHeight > 0 &&
                     columns.map((column, index) => (
-                      <Wheel
+                      <WheelHOC
                         key={index}
                         index={index}
                         column={column}