OnScroll animation was not smooth on Android device

Viewed 143

I want to freeze the customer profile component when user scrolling the page, so I set the scrollY value to translateY property to avoid the component from moving up. However, on android device, when the user scroll slightly faster, the component will become a little bit shaky even I have already added useNativeDriver: true.

Really APPRECIATE if anyone could help, was struggling for quite a number of days.

Below is the code for the entire screen:

  const scrollY = React.useRef(new Animated.Value(0)).current;

  <Animated.ScrollView
    scrollEventThrottle={16}
    automaticallyAdjustContentInsets={false}
    contentContainerStyle={{ flexGrow: 1 }}
    contentInsetAdjustmentBehavior="automatic"
    bounces={false}
    showsVerticalScrollIndicator={false}
    onScroll={Animated.event(
      [{ nativeEvent: { contentOffset: { y: scrollY } } }],
      { useNativeDriver: true }
    )}
  >
    <Animated.View
      style={{
        width: deviceWidth,
        height: 250,
        backgroundColor: 'lightgrey',
        paddingHorizontal: 30,
        justifyContent: 'center',
        alignItems: 'center',
        transform: [
          {
            translateY: scrollY
          }
        ]
      }}
    >
      <View
        style={{
          borderRadius: 100 / 2,
          width: 100,
          height: 100,
          backgroundColor: 'white',
          marginBottom: 20
        }}
      ></View>
      <Text style={{ marginBottom: 5, fontSize: 22 }}>Chris Groves</Text>
      <Text style={{ fontSize: 30, fontWeight: 'bold' }}>$ 190.83</Text>
    </Animated.View>
    <View
      style={{
        backgroundColor: 'white',
        justifyContent: 'center',
        alignItems: 'center'
      }}
    >
      <View
        style={{
          height: 200,
          width: 350,
          backgroundColor: 'red',
          marginVertical: 30
        }}
      />
      <View
        style={{
          height: 200,
          width: 350,
          backgroundColor: 'red',
          marginBottom: 30
        }}
      />
      <View
        style={{
          height: 200,
          width: 350,
          backgroundColor: 'red',
          marginBottom: 30
        }}
      />
      <View style={{ height: 200, width: 350, backgroundColor: 'red' }} />
    </View>
  </Animated.ScrollView>

Demo video for better understanding: Demo Video

0 Answers
Related