HomeiOS DevelopmentiOS-only rendering failure in React Native – elements cease rendering over time...

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


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

Signs

  • Sure screens cease rendering fully after a number of navigations

  • react-native-gifted-charts line chart behaviour:

    • Initially renders appropriately

    • Then renders partially

    • Ultimately doesn’t render in any respect

  • Android works constantly with the identical code and information

Traits

  • No JS errors

  • No native crash

  • No crimson display

  • Navigation nonetheless works

  • Structure containers mount, however youngsters don’t paint

  • Happens after repeated display mounts/unmounts

Stack

  • React Native: 0.79.6

  • iOS: 18.7.3

  • react-native-gifted-charts: ^1.4.64

  • Hermes: enabled

  • New structure: enabled

  • React Navigation with NavigationContaineriOS-only rendering failure in React Native – elements cease rendering over time (react-native-gifted-charts)[! The chart is partially rendered]

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

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -
Google search engine

Most Popular

Recent Comments