useKeyboardHandler duplicates events

[Yuri-Oliferchuk]

When I use useKeyboardHandler on Android, it exhibits strange behavior: the handler duplicates events. On iOS, everything works as expected.

• Device: Android
• RN version: 0.76.5
• Library version: 1.15.2

console.log('init');
useKeyboardHandler(
{
onStart: e => {
'worklet';
console.log('START');
},
onMove: e => {
'worklet';
console.log(e.height);
},
onEnd: e => {
'worklet';
console.log('END');
},
},
[],
);

LOGS:
(NOBRIDGE) LOG init
(NOBRIDGE) LOG START
(NOBRIDGE) LOG START
(NOBRIDGE) LOG 0
(NOBRIDGE) LOG 0
(NOBRIDGE) LOG 0
(NOBRIDGE) LOG 0
(NOBRIDGE) LOG 32.3636360168457
(NOBRIDGE) LOG 32.3636360168457
(NOBRIDGE) LOG 61.818180084228516
(NOBRIDGE) LOG 61.818180084228516
(NOBRIDGE) LOG 96.36363983154297
(NOBRIDGE) LOG 96.36363983154297
(NOBRIDGE) LOG 122.18181610107422
(NOBRIDGE) LOG 122.18181610107422
(NOBRIDGE) LOG 144
(NOBRIDGE) LOG 144
(NOBRIDGE) LOG 178.18182373046875
(NOBRIDGE) LOG 178.18182373046875
(NOBRIDGE) LOG 213.4545440673828
(NOBRIDGE) LOG 213.4545440673828
(NOBRIDGE) LOG 230.18182373046875
(NOBRIDGE) LOG 230.18182373046875
(NOBRIDGE) LOG 242.5454559326172
(NOBRIDGE) LOG 242.5454559326172
(NOBRIDGE) LOG 248.72727966308594
(NOBRIDGE) LOG 248.72727966308594
(NOBRIDGE) LOG 253.4545440673828
(NOBRIDGE) LOG 253.4545440673828
(NOBRIDGE) LOG 257.81817626953125
(NOBRIDGE) LOG 257.81817626953125
(NOBRIDGE) LOG 261.81817626953125
(NOBRIDGE) LOG 261.81817626953125
(NOBRIDGE) LOG 265.4545593261719
(NOBRIDGE) LOG 265.4545593261719
(NOBRIDGE) LOG 268
(NOBRIDGE) LOG 268
(NOBRIDGE) LOG 271.2727355957031
(NOBRIDGE) LOG 271.2727355957031
(NOBRIDGE) LOG 273.4545593261719
(NOBRIDGE) LOG 273.4545593261719
(NOBRIDGE) LOG 275.2727355957031
(NOBRIDGE) LOG 275.2727355957031
(NOBRIDGE) LOG 277.4545593261719
(NOBRIDGE) LOG 277.4545593261719
(NOBRIDGE) LOG 278.9090881347656
(NOBRIDGE) LOG 278.9090881347656
(NOBRIDGE) LOG 280.3636474609375
(NOBRIDGE) LOG 280.3636474609375
(NOBRIDGE) LOG 281.0909118652344
(NOBRIDGE) LOG 281.0909118652344
(NOBRIDGE) LOG 282.18182373046875
(NOBRIDGE) LOG 282.18182373046875
(NOBRIDGE) LOG 282.9090881347656
(NOBRIDGE) LOG 282.9090881347656
(NOBRIDGE) LOG 283.2727355957031
(NOBRIDGE) LOG 283.2727355957031
(NOBRIDGE) LOG 283.6363525390625
(NOBRIDGE) LOG 283.6363525390625
(NOBRIDGE) LOG 283.6363525390625
(NOBRIDGE) LOG 283.6363525390625
(NOBRIDGE) LOG 284
(NOBRIDGE) LOG 284
(NOBRIDGE) LOG END
(NOBRIDGE) LOG END

[kirillzyusko]

@Yuri-Oliferchuk which Android version do you use?

[Yuri-Oliferchuk]

XIAOMI Redmi Note 10 pro
MIUI 14.0.8
Android API 33

Emulator with API 35 - has the same behaviour

[kirillzyusko]

Yep, I can reproduce it in example project 🎉 Will investigate what happens 👀

[kirillzyusko]

@Yuri-Oliferchuk I believe it's a problem in react-native-reanimated. I used next code:

    const h = useAnimatedScrollHandler({
      onBeginDrag: (e) => {
        console.log(888, e);
      },
    }, []);

// ...

      <ScrollViewComponent
        ref={onRef}
        {...rest}
        scrollEventThrottle={16}
        onLayout={onScrollViewLayout}
        onScroll={h}
      >

And it produced:

 (NOBRIDGE) LOG  888 {"contentInset": {"bottom": 0, "left": 0, "right": 0, "top": 0}, "contentOffset": {"x": 0, "y": 0}, "contentSize": {"height": 1241.90478515625, "width": 379.4285583496094}, "eventName": "onScrollBeginDrag", "layoutMeasurement": {"height": 810.2857055664062, "width": 411.4285583496094}, "responderIgnoreScroll": true, "target": 448, "velocity": {"x": 0, "y": 0}}
 (NOBRIDGE) LOG  888 {"contentInset": {"bottom": 0, "left": 0, "right": 0, "top": 0}, "contentOffset": {"x": 0, "y": 0}, "contentSize": {"height": 1241.90478515625, "width": 379.4285583496094}, "eventName": "onScrollBeginDrag", "layoutMeasurement": {"height": 810.2857055664062, "width": 411.4285583496094}, "responderIgnoreScroll": true, "target": 448, "velocity": {"x": 0, "y": 0}}

So I tend to think that the problem is in reanimated code 🤔

[kirillzyusko]

Should be fixed in software-mansion/react-native-reanimated#6907