erksch / react-native-wheely

An all JavaScript wheel picker for react-native without any native code.
427 stars 60 forks source link

onChange not working in browser #9

Open dracoblackie opened 3 years ago

dracoblackie commented 3 years ago

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.

erksch commented 3 years ago

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

dracoblackie commented 3 years ago

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.

erksch commented 3 years ago

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.

ToshKoevoets commented 3 years ago

@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.

alexkendall commented 2 years ago

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

Jaza commented 1 month ago

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