React-native-keyboard-aware-scroll-view: Support for Animated.event

[jhalborg]

Hey!

Thanks for a great lib.

Any way to add an onScroll Animated.event to the component for some cool animation shenanigans? :)

Would be awesome if one could do something along the lines of

<KeyboardAwareScrollView
        style={styles.container}
        onScroll={Animated.event(
          [{ nativeEvent: { contentOffset: { y: this.state.scrollY } } }],
          { useNativeDriver: true }
        )}
      >
    <View />
</KeyboardAwareScrollView>

[alvaromb]

Hello @jhalborg!

This can actually be done, please check https://github.com/APSL/react-native-keyboard-aware-scroll-view/blob/master/lib/KeyboardAwareHOC.js#L348

[jhalborg]

Cool, thanks! It works! :-)

For anyone coming across this issue, remember to make the component animated using Animated.createAnimatedComponent, otherwise it will not work. Something like:

import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
...
const AnimatedKeyboardAwareScrollView = Animated.createAnimatedComponent(
  KeyboardAwareScrollView
);
...
const scale = this.state.scrollY.interpolate({
      inputRange: [-180, 0],
      outputRange: [0.5, 1],
      extrapolate: 'clamp',
    });

    return (
      <AnimatedKeyboardAwareScrollView
        scrollEventThrottle={16}
        onScroll={Animated.event(
          [{ nativeEvent: { contentOffset: { y: this.state.scrollY } } }],
          { useNativeDriver: true }
        )}
      >...</AnimatedKeyboardAwareScrollView>

[Aleksandar-FFWD]

@alvaromb No it cant, It crashes. When setting:

    onScroll={
        Animated.event(
            [{ nativeEvent: { contentOffset: { y: this.state.scrollY } } }],
            { useNativeDriver: true },
        )
    }

The reason is, this.props.onScroll is not a function, it's an object if you pass { useNativeDriver: true }.
First, it brakes propTypes because it's expecting a function and not an object.
And second, it crashes when you try to scroll because he calls this.props.onScroll as a function.

I'we been messing arround _onScroll function but could not figure out what I need to pass.

    _onScroll = (
      e: SyntheticEvent<*> & { nativeEvent: { contentOffset: number } }
    ) => {
      this._handleOnScroll(e)

      // `unseNativeDrivers = false
      if (typeof this.props.onScroll === 'function') {
        return this.props.onScroll(e);
      };

      // When `unseNativeDrivers
      if (typeof this.props.onScroll === 'object' && this.props.onScroll.__isNative) {
        //Figure out what we need to pass onScroll
      };
    }

[jhalborg]

@Aleksandar-FFWD - I ran into the same problem, but found the solution to be using

const AnimatedKeyboardAwareScrollView = Animated.createAnimatedComponent(
  KeyboardAwareScrollView
);

as noted above. The reason being that this provides the view with the Animated onScroll event that takes a declarative Animation object. You can read more here

[Aleksandar-FFWD]

@jhalborg It's still keyboard aware I guess ?

[jhalborg]

Yes :)

[Aleksandar-FFWD]

@jhalborg Grate! Thanks. I was banging my head for 2 days to try and figure out how to make it work. On my way to test it! 👍

[Aleksandar-FFWD]

@jhalborg Does not work for me when { useNativeDriver: true } only with { ueNativeDriver: false }

[jhalborg]

Don't know what to tell you, friend. It works for me with the code I've provided above.

Using Expo 24/React Native 0.51 and version 0.4.1 of this lib. Good luck :)

[Aleksandar-FFWD]

Figured out that for some reason if I pass refreshControl property it stops working.

[alvaromb]

@Aleksandar-FFWD do you have a repro for the issue you're experiencing that can be pasted & formatted here?

[Aleksandar-FFWD]

@alvaromb I'we just tested it with regular Animated.ScrollView and it works even if i pass refreshControl, so there's some kind of a problem with the module.

I'll go ahead and recreate it in a separate project and put a github link here in a bit.

[Aleksandar-FFWD]

@alvaromb Here's the repo.

https://github.com/Aleksandar-FFWD/KeyboardAwareAnimatedScrollView

[SebiVPS]

I have the same issue.
I use:

const AnimatedKeyboardAwareScrollView = Animated.createAnimatedComponent(
  KeyboardAwareScrollView
);

@alvaromb It works fine on iOS. On Android as soon as refreshControl is used, it stops working.
With normal Animated.ScrollViewit works like expected.

[ddxxtony]

In my case if I use this { useNativeDriver: true }, it stops working