0

Using Animated library, I'm trying to change background color when scrolling horizontally inside ScrollView. But the background color didn't change.

const renderMultipleView = () => {
  return ['Page 1', 'Page 2'].map(t => (
    <View
      style={{
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: 'transparent',
        width: widthScreen,
        height: '100%',
      }}>
      <Text style={{color: 'white'}}>{t.toString()}</Text>
    </View>
  ));
};

const App = () => {
  var [scrollX] = useState(new Animated.Value(0));

  var backgroundColorChange = scrollX.interpolate({
    inputRange: [0, widthScreen / 2, widthScreen],
    outputRange: ['#b3006e', '#9a015f', '#380624'],
    extrapolate: 'clamp',
  });

  return (
    <Animated.ScrollView
      horizontal={true}
      onScroll={e => {
        console.log('e: ' + e.nativeEvent.contentOffset.x);
        Animated.event(
          [
            {
              nativeEvent: {contentOffset: {x: scrollX}},
            },
          ],
          {useNativeDriver: true},
        );
      }}
      scrollEventThrottle={16}
      style={[styles.scrollView, {backgroundColor: backgroundColorChange}]}>
      {renderMultipleView()}
    </Animated.ScrollView>
  );
};

Here is the result, I want it to change from pink to violet when scrolling from left to right and reverse but it's only pink.

enter image description here

Do I make anything wrong with the animation code or animation in RN can't change background. How can I fix that.

Thanks in advance!

1 Answer 1

0

Background Color is not supported by the native Animated module.

change your onScroll method to,

onScroll={Animated.event(
        [
          {
            nativeEvent: {contentOffset: {x: scrollX}},
          },
        ],
        // {useNativeDriver: true},
      )}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.