react-native-wheely icon indicating copy to clipboard operation
react-native-wheely copied to clipboard

onChange not working in browser

Open dracoblackie opened this issue 4 years ago • 6 comments

I have tested some code in android, and it worked fine. Then when run in chrome it seems like we dont hit onChange.

Neither with a static value <WheelPicker selectedIndex={defaultIndex} options={someOptionsArray} onChange={(index) => this.setState({someStateValue: 2})} /> or if we set someStateValue to someOptionsArray[index]

In chrome devtools, i have set a debugpoint at onChange. When i run it on an android emulator we hit it in the debugger, but when run on a webserver, we dont hit the onChange. Additionally i have tried with a simple console.log("hello world") instead => <WheelPicker selectedIndex={defaultIndex} options={someOptionsArray} onChange={(index) => { console.log("Hello World") } } /> We do not seem to get the message in the console of the browser.

In both tests i have used mouse and keyboard.

I will isolate the code into a modal module to see if this fixes things, but thought this would be helpfull.

dracoblackie avatar Jun 23 '21 07:06 dracoblackie

Do you mean with react-native-web? I have never used it but I'll try to reproduce.

erksch avatar Jun 23 '21 15:06 erksch

Yes, i mean with react-native-web. After writing the bug-report i realized that it never states in this library that it supports web, so this might be more of a feature request. Also, isolating the code did not change the outcome.

dracoblackie avatar Jun 24 '21 06:06 dracoblackie

Sorry, I currently do not come around to reproduce your example, if you want you can create a pull request for react-native-web support, feel free to do so.

react-native-wheely uses a FlatList internally and calls onChange on onMomentumScrollEnd. Maybe onMomentumScrollEnd is not called in web.

erksch avatar Aug 12 '21 08:08 erksch

@erksch indeed looks like onMomentScrollEnd isn't fired on web:

    onScroll={Animated.event(
      [{ nativeEvent: { contentOffset: { y: scrollY } } }],
      { useNativeDriver: true, listener: (event) => handleScroll(event)  },
    )}

Solution might be to call it on scroll all the time although there might be some performance issues there.

ToshKoevoets avatar Sep 25 '21 13:09 ToshKoevoets

I've added react-native for web support off this forked repoistory: https://github.com/alexkendall/react-native-wheely

alexkendall avatar Jun 09 '22 13:06 alexkendall

FYI @alexkendall has a fix for this pending review at https://github.com/erksch/react-native-wheely/pull/31

Jaza avatar Aug 27 '24 07:08 Jaza