iOS-only rendering failure in React Native – components stop rendering over time (react-native-gifted-charts)

6 days ago 6
ARTICLE AD BOX

I’m seeing a progressive rendering failure on iOS in a React Native app that does not reproduce on Android.

Symptoms

Certain screens stop rendering completely after multiple navigations

react-native-gifted-charts line chart behaviour:

Initially renders correctly

Then renders partially

Eventually does not render at all

Android works consistently with the same code and data

Characteristics

No JS errors

No native crash

No red screen

Navigation still works

Layout containers mount, but children don’t paint

Occurs after repeated screen mounts/unmounts

Stack

React Native: 0.79.6

iOS: 18.7.3

react-native-gifted-charts: ^1.4.64

Hermes: enabled

New architecture: enabled

React Navigation with NavigationContainerenter image description here[! The chart is partially rendered]

<LineChart data={data} overflowTop={25} width={320} isAnimated xAxisColor="lightgray" yAxisColor="lightgray" hideRules={false} hideYAxisText={false} yAxisTextStyle={{ color: colors.primary, fontSize: 12 }} xAxisTextStyle={{ color: colors.secondary, fontSize: 12 }} color={colors.primary} thickness={2} areaChart curved startFillColor="rgb(46,217,255)" endFillColor="rgb(203,241,250)" startOpacity={0.4} endOpacity={0.1} dataPointColor={colors.white} dataPointSize={6} xAxisLabelTexts={xAxisLabelTexts} yAxisLabelWidth={50} dataPointsHeight={6} dataPointsWidth={6} dataPointsColor="#07BAD1" dataPointsRadius={3} hideDataPoints={false} textColor1="green" textShiftY={-2} textShiftX={-5} textFontSize={13} showTextOnDataPoints={true} animationDuration={1200} />
Read Entire Article