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!