Support native events

[ShaMan123]

Describe the Feature

Native Events instead of ~js events~: onValueChange onSlidingStart onSlidingComplete

Possible Implementations

Supporting native events will unlock the abilities of Animated.event enabling tracking the Slider's value and animating stuff accordingly. This will enable customizing this view to a large extent easily and with high performance.

Avoiding breaking changes can be achieved with a flag from props or by checking typeof props.onValueChange === 'object'

.

Android JS Impl

Uses Slider for value and renders the rest on top. Native events will enhance this extremely and make dev experience easier (less code needed for customization)

Related Issues

[jayu]

I was trying to tackle that, but it does not work with the native driver. I was looking into the android implementation of Animated Animated and Scroll view (where onScroll can be used with native driver) but could not find anything that is implemented in the scroll view which is not implemented in slider in terms of events and actually I have no idea why it does not work. I didn't debug native code to see what values are there. Maybe someone with larger native knowledge could advise on how to implement it 😊

[ShaMan123]

I figured this out. The problem here is that the native event has a different name than the callback prop. You can hack this with a workaround.

enum NATIVE_EVENT_NAMES {
    onValueChange = 'topChange',
    onSlidingStart = 'topSlidingStart',
    onSlidingComplete = 'topSlidingComplete'
}


const val = new Animated.Value(0);
<AnimatedSlider
   topChange={event([{ nativeEvent: { value: val } }])}
/>

[jayu]

This is what I found also, we can fix it with some refactoring. But the problem is it does not work with native driver (at least for me, when I was playing with it)

Without a native driver, it will not be significantly more performant.

Maybe @osdnk could give it a try :D? or try to advise on what should be done in order to make a native driver work in that case

[ShaMan123]

I'm using it with reanimated and it works

[jayu]

As I remember I was trying with Animated, interesting. Seems like @ShaMan123 you are on a good way to open a PR :D

[BartoszKlonowski]

Hello @ShaMan123! I can see you already spent some time investigating that issue - thank you 👍 Would you like to open a PR with a fix for that?

[ShaMan123]

This is very stale, I abandoned react native a while back (Hoping never to return). So I decline with respect. BTW, I think reanimated released a major that will make this simpler to fix.

[ShaMan123]

I saw #164 , don't remember what I did there