React Native Redash, TypeError: this.props.onScroll is not a function

Viewed 2632

I got errors with useValue and interpolateColor and onScrollEvent!!! I checked the docs in github and it seams that since version 15.0.0 we need to import the above from v1 like:

import { useValue } from 'react-native-redash/src/v1/Hooks'
import { interpolateColor } from 'react-native-redash/src/v1/Colors'
import { onScrollEvent } from 'react-native-redash/src/v1/Gesture'

Now I got no errors at the beginning, but I get a blank screen and if I try to scroll, I get the following error:

TypeError: this.props.onScroll is not a function. (In 'this.props.onScroll(e)', 'this.props.onScroll' is an instance of AnimatedEvent)

Is there something wrong with the imports?

The rest of the code is:

const { width } = Dimensions.get('window')
export interface OnboardingProps {

}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white'

  },
  slider: {
    height: SLIDE_HEIGHT,
    borderBottomRightRadius: 75

  },
  footer: {
    flex: 1
  }
})

const Onboarding: React.SFC<OnboardingProps> = () => {
  const x = useValue(0)
  // TODO: useScrollEvent
  const onScroll = onScrollEvent({ x });
  const backgroundColor = interpolateColor(x, {
    inputRange: [0, width, width * 2, width * 3],
    outputRange: ["#2ECC71", "#5DADE2", "#82E0AA", "#5499C7"]
  })
  return (
    <View style={styles.container}>
      <Animated.View style={[styles.slider, { backgroundColor }]}>
        <Animated.ScrollView horizontal snapToInterval={width}
          decelerationRate='fast' showsHorizontalScrollIndicator={false}
          bounces={false}
          {...{ onScroll }}
        >
          <Slide label='Relaxed' />
          <Slide label='Playful' right />
          <Slide label='Exentric' />
          <Slide label='Funky' right />
        </Animated.ScrollView>
      </Animated.View>
      <View style={styles.footer} >
        <Animated.View style={{ ...StyleSheet.absoluteFillObject, backgroundColor }} >
          <View style={{ flex: 1, backgroundColor: 'white', borderTopLeftRadius: 75 }} ></View>
        </Animated.View>
      </View>
    </View>

  );
}

The instructor (William Candillon) has a TODO: useScrollEvent note. Probably wants to try later to use that in place of onScrollEvent. Where is the useScrollEvent to be found?

I also get an error with the style that uses the backgroundColor:

...
 const backgroundColor = interpolateColor(x, {
    inputRange: [0, width, width * 2, width * 3],
    outputRange: ["#2ECC71", "#5DADE2", "#82E0AA", "#5499C7"]
  })
...
<Animated.View style={[styles.slider, { backgroundColor}]}>

Namely the word style is underlined with red.

I use a normal color the error goes away:

<Animated.View style={[styles.slider, { backgroundColor: 'cyan'}]}>

The code is from YouTube Any suggestions ?

Thanks in advance!

0 Answers
Related