Issue with ColorPicker and Panel3 in React Native

[rahuldev761]

Description

I am experiencing an issue with the ColorPicker component when used with Panel3. Specifically, the ColorPicker scrolls along with the page when it should remain stationary.

Here are the details:

Scrolling Issue: The ColorPicker moves when scrolling within a KeyboardAwareScrollView. I also tried using react-native-gesture-handler's ScrollView but encountered the same problem.

Function Callbacks: We are using two functions, onChange and onComplete. When the scrolling issue occurs, the onComplete function does not get called.

Problems:

1. The ColorPicker scrolls along with the content when it should remain fixed.
2. When the ColorPicker scrolls, the onComplete function is not triggered.

I am sharing the problem video for a better understanding.

Screen.Recording.2024-05-17.at.1.28.54.PM.mov

here is my code:

 <View style={styles.container}>

            <GestureHandlerRootView style={{ paddingBottom: 150 }}>
                <KeyboardAwareScrollView
                    enableOnAndroid
                    bounces={false}
                    showsVerticalScrollIndicator={false}
                    contentContainerStyle={{ paddingBottom: normalize(36) }}
                    keyboardShouldPersistTaps="handled"
                    enableResetScrollToCoords={false}
                >
                    <View style={styles.colorWheelContainer}>
                        <ColorPicker
                            value={defaultColor}
                            thumbInnerStyle={[styles.thumbStyle, thumbStyle]}
                            onChange={onChange}
                            onComplete={(color) => {
                                onComplete(color?.hex)
                            }}
                        >
                            <Panel3 style={[styles.panelStyle, colorWheelStyle]} />
                        </ColorPicker>
                    </View>

                </KeyboardAwareScrollView>
            </GestureHandlerRootView>

        </View>

Steps to reproduce

To reproduce do the same thing which is in the video, Just press press and drag.

Screen.Recording.2024-05-17.at.1.28.54.PM.mov

Snack or a link to a repository

No response

Reanimated Color Picker version

3.4.2

React Native version

0.70.10

React Native Reanimated version

2.14.0

React Native Gesture Handler version

2.5.0

Platforms

Android, iOS

JavaScript runtime

JSC

Workflow

React Native (without Expo)

Architecture

Paper (Old Architecture)

Build type

Debug mode

[alabsi91]

I recommend using the color picker inside a modal as a popup. This is because you are relying on RNGH to decide which gestures to cancel and which to allow. While RNGH scroll view works most of the time, it does not seem to work in your case. However, you can add a new gesture to disable and enable the scroll view, and then attach it to Panel3 see gestures and software-mansion/react-native-gesture-handler#2616