In my react native app I'm trying to animate opacity of a View. When I scroll, I saw the animation do the job, but it’s flickering at the same time. I don’t know why.

Video example : .mov

Here is the code I made

const Scrollable = () => {
  const largeHeaderSize = useState({
    height: 0,
    y: 0
  });

  const animatedValueScrollY = new Animated.Value(largeHeaderSize.height);
  const [scrollY, setScrollY] = useState(0);

  const headerOpacity = animatedValueScrollY.interpolate({
    inputRange: [0, largeHeaderSize.height],
    outputRange: [1, 0],
    extrapolate: "clamp"
  });

  return (
    <SafeAreaView>
      <Animated.View
        style={{
        borderBottomWidth:
          scrollY >= largeHeaderSize.height ? StyleSheet.hairlineWidth : 0
      }}>
        <View>
          <Animated.View style={{ zIndex: 1, opacity: headerOpacity }}>
            <Text>Title</Text>
          </Animated.View>
        </View>
      </Animated.View>
      <Animated.ScrollView
        onScroll={Animated.event(
          [{ nativeEvent: { contentOffset: { y: animatedValueScrollY } } }],
          {
            useNativeDriver: true,
            listener: event => setScrollY(event.nativeEvent.contentOffset.y)
          }
        )}
        scrollEventThrottle={16}
        contentInset={{
          top: 0,
          bottom: 50
        }}
        contentOffset={{
          y: 0
        }}
      />
    </SafeAreaView>
  );
};

How I can I solve that?

In my react native app I'm trying to animate opacity of a View. When I scroll, I saw the animation do the job, but it’s flickering at the same time. I don’t know why.

Video example : https://cdn.discordapp./attachments/102861040538120192/560165613092339734/video.mov

Here is the code I made

const Scrollable = () => {
  const largeHeaderSize = useState({
    height: 0,
    y: 0
  });

  const animatedValueScrollY = new Animated.Value(largeHeaderSize.height);
  const [scrollY, setScrollY] = useState(0);

  const headerOpacity = animatedValueScrollY.interpolate({
    inputRange: [0, largeHeaderSize.height],
    outputRange: [1, 0],
    extrapolate: "clamp"
  });

  return (
    <SafeAreaView>
      <Animated.View
        style={{
        borderBottomWidth:
          scrollY >= largeHeaderSize.height ? StyleSheet.hairlineWidth : 0
      }}>
        <View>
          <Animated.View style={{ zIndex: 1, opacity: headerOpacity }}>
            <Text>Title</Text>
          </Animated.View>
        </View>
      </Animated.View>
      <Animated.ScrollView
        onScroll={Animated.event(
          [{ nativeEvent: { contentOffset: { y: animatedValueScrollY } } }],
          {
            useNativeDriver: true,
            listener: event => setScrollY(event.nativeEvent.contentOffset.y)
          }
        )}
        scrollEventThrottle={16}
        contentInset={{
          top: 0,
          bottom: 50
        }}
        contentOffset={{
          y: 0
        }}
      />
    </SafeAreaView>
  );
};

How I can I solve that?

• javascript
• ios
• react-native
• animation
• react-hooks

Share Improve this question Follow asked Mar 27, 2019 at 8:54 SteffiSteffi 7,0972626 gold badges8080 silver badges130130 bronze badges 4

• try disabling JS Dev Mode whille testing your animation ... from the developer menu – Hend El-Sahli Commented Mar 27, 2019 at 9:28
• @HendEl-Sahli I have the problem on real device too? Do you think it can solve that? – Steffi Commented Mar 27, 2019 at 12:53
• it's the same for both emulator and physical device ... it's always remened to disable JS Dev Mode when testing animations – Hend El-Sahli Commented Mar 27, 2019 at 12:55
• It's doesn't solve the problem :( – Steffi Commented Mar 28, 2019 at 17:24

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

The solution is to use the useRef hook like so:

const animatedValueScrollY = useRef(new Animated.Value(0))

const headerOpacity = animatedValueScrollY.current.interpolate({
   inputRange: [0, largeHeaderSize.height],
   outputRange: [1, 0],
   extrapolate: 'clamp'
});