2

We have a recycler view in our Android code base which we want to convert into a native UI component and utilize it in React Native.

I am prototyping some functionality and ran into this issue.

We have to implement a spring animation based on onScrollBeginDrag event. I am not able to make it work with useNativeDriver:true. If I listen to the event on React thread and update the animated value it works but it runs into occasional glitches.

Here is the code piece that doesn't work:

this._onRegisterLastScroll = Animated.event(
      [{ nativeEvent: { contentOffset: { y: this._lastScrollY } } }],
      { useNativeDriver: true }
    );

But this exact code works with useNativeDriver: true.

I have also tried attachNativeEvent and this doesn't work as well:

componentDidMount() {
    Animated.attachNativeEvent(
      this.nativeScroll,
      'onScrollBeginDrag',
      [{nativeEvent: {contentOffset: {y: this._lastScrollY}}}],
    );
  }

I am registering onScrollBeginDrag event on my android code base properly and I verified that by logging that events are flowing. This is the piece of code I am using to push the event from android recycler view.

    @Override
    public boolean onInterceptTouchEvent(MotionEvent e) {
        try {
            if (super.onInterceptTouchEvent(e)) {
                final Context context = getContext();
                if (context instanceof ReactContext) {
                    ScrollEvent.obtain(
                            getId(),
                            ScrollEventType.BEGIN_DRAG,
                            this.computeHorizontalScrollOffset(),
                            this.computeVerticalScrollOffset(),
                            0,
                            0,
                            getChildAt(0).getWidth(),
                            getChildAt(0).getHeight(),
                            getWidth(),
                            getHeight()).dispatch(((ReactContext) context).getJSModule(RCTEventEmitter.class));
                }
                return true;
            }
        } catch (IllegalArgumentException exception) {
        }

        return false;
    }

React Native experts out there do you what else I should be doing to make this work?

0 Answers0