Why am I getting a crash when using react-native-linear-gradient ONLY on iOS 17+


I’ve been noticing a ton of new crashes over the last few weeks coming into AppStoreConnect relating to LinearGradient which I have imported from react-native-linear-gradient

These crash logs ONLY have iOS 17+ so I am guessing it has something to do with a change that happened in the upgrade, but don’t really care much about that change, I just want to know how to fix it in my app and prevent the crash.

Here’s a simplified reproducible version of my component, a bar which animates from the left to the right, which runs fine on iOS 16 and below but crashes on 17+ with no logs in the terminal

import React, { useState, useEffect } from 'react';
import { View, Animated } from 'react-native';
import LinearGradient from 'react-native-linear-gradient';

const AnimatedGradient = ({ credit = 0 }) => {
  const [barWidth, setBarWidth] = useState(1);
  const position = new Animated.Value(0);

  useEffect(() => {
    Animated.timing(position, {
      toValue: credit,
      duration: 1000,
      useNativeDriver: false,
    }).start();
  }, [credit]);

  const animatedWidth = position.interpolate({
    inputRange: [0, 1],
    outputRange: [0, barWidth],
  });

  return (
    <View onLayout={(event) => setBarWidth(event.nativeEvent.layout.width)}>
      <Animated.View style={{ width: animatedWidth }}>
        <LinearGradient
          colors={['blue', 'darkblue']}
          start={{ x: 0, y: 0 }}
          end={{ x: 1, y: 0 }}
          style={{ height: 10 }}
        />
      </Animated.View>
    </View>
  );
};

export default AnimatedGradient;

Latest articles

spot_imgspot_img

Related articles

Leave a reply

Please enter your comment!
Please enter your name here

spot_imgspot_img