CODEWITHSUNDEEP
react-nativeanimationlag
me1k
me1k

Reputation: 39

Heavy lagging animation with Animated.event() in React Native

i develop an App in React-Native and have an animated Element under the Header of my StackNavigator. And under this animated element i have a FlatList with some Json-Data in it.

So my problem is, that the animation is smooth in Xcodes's iPhone Simulator but not on my actual Device OnePlus 6T.

Setup is ejected Expo Project and here is my code: 

export const window = Dimensions.get("window");
export const MAX_HEADER_HEIGHT = window.width / 5;
export const MIN_HEADER_HEIGHT = window.width / 1000;
export const MAX_BORDER_RADIUS = 450;
export const MIN_BORDER_RADIUS = -450;

HomeScreen.js

this.state = {
  scrollY: new Animated.Value(0)
};    


render() {
const { scrollY } = this.state;
const headerHeight = scrollY.interpolate({
  inputRange: [0, MAX_HEADER_HEIGHT],
  outputRange: [MAX_HEADER_HEIGHT, MIN_HEADER_HEIGHT],
  extrapolate: "clamp"
});

const borderRadius = scrollY.interpolate({
  inputRange: [0, MAX_BORDER_RADIUS],
  outputRange: [MAX_BORDER_RADIUS, MIN_BORDER_RADIUS],
  extrapolate: "clamp"
});

return (
  <View style={{ flex: 1 }}>
    <Animated.View
      style={{
        height: headerHeight,
        justifyContent: "center",
        alignItems: "center",
        overflow: "hidden"
      }}
    >
      <StatusBar barStyle="light-content" />
      <Animated.View
        style={{
          borderRadius: borderRadius,
          width: window.width * 2,
          height: window.width * 2,
          position: "absolute",
          bottom: 0,
          overflow: "hidden"
        }}
      >
        <View
          style={{
            height: window.width / 1.7,
            width: window.width,
            position: "absolute",
            bottom: 0,
            marginLeft: window.width / 2,
            backgroundColor: "#ee6e73"
          }}
        />
      </Animated.View>
    </Animated.View>
    <FlatList
      data={items}
      renderItem={({ item }) => (
        <JobItem
          title={item.title}
          type={item.type}
          description={item.description}
          style={styles.item}
          openOffer={() => this._openOffer()}
        />
      )}
      keyExtractor={item => item.id}
      scrollEventThrottle={10000000}
      onScroll={Animated.event([
        { nativeEvent: { contentOffset: { y: this.state.scrollY } } }
      ])}
    ></FlatList>

I already tried useNativeDriver: true within the Animated.event() but it doesn't help. I also tried to play around with the value of scrollEventThrottle={} but it doesn't have any effect neither.

Please help

Upvotes: 0

Views: 2702

Answers (1)

Stefan28
Stefan28

Reputation: 51

Let me tell you something that you wouldn't believe, you can't find it everywhere else on the Internet.

Try to find a way to style your views without using overflow: 'hidden'. I was using Reanimated instead of the native Animated API, and I got stuck on undeterministic lagging when running a declarative spring animations. I thought that it is because I was doing nested animations as well as animating the height and width, which could cause frame drops, but I was wrong. When I removed the overflow: hidden prop, everything became butter smooth. I suggest you try to use Reanimated instead because by default the animations are ran on the native thread which increases performance significantly

Upvotes: 5

Related Questions