React Native onScrollBeginDrag not very responsive to the scroll

Question

I want the opacity to go to 0 as I start to scroll down and the opposite as I scroll up. My code currently achieves a similar effect, but not as responsive. First, it goes to opacity: 1 abruptly, not gradually, and 2) the change happens late no matter how much I change the inputRange.

    const [inputAnimation] = useState(new Animated.Value(0))
    const inputInterpolate = inputAnimation.interpolate({
        inputRange: [0, 10],
        outputRange: [1, 0]
    })

    const animatedInputStyles = {
        opacity: inputInterpolate
    }

return (
        <View
            style={[styles.upperContainer]}
        >
            <View style={styles.textInputContainer}>
                <Animated.View style={animatedInputStyles}>
                    <TextInput
                        style={styles.textInput}
                        onChangeText={text => onChangeText(text)}
                        value={value}
                    />
                </Animated.View>
            </View>
        </View>
        <ScrollView
            contentContainerStyle={styles.container}
            onScrollBeginDrag={Animated.event([
                {
                    nativeEvent: {
                        contentOffset: {
                            y: inputAnimation
                        }
                    }
                }
            ])}
        >
        </ScrollView>
)

How do I make the opacity animation more responsive?

score 0 · Answer 1 · answered Dec 21 '19 at 22:25

Try

<Animated.ScrollView
        contentContainerStyle={styles.container}
        onScroll={Animated.event([
            {
                nativeEvent: {
                    contentOffset: {
                        y: inputAnimation
                    }
                }
            }
        ])}
    >

React Native onScrollBeginDrag not very responsive to the scroll

1 Answers1