Legend labels showing and hiding randomly

[devWaleed]

Description

1. I created a release build for my QA team to test.
2. Labels were showing correctly and everything was working fine.
3. Then I shared another release build with some added feature, labels stopped working on it. I asked my QA team to recheck on previous build in which old code was showing labels properly, that build started to show the same problem and labels didn't show correctly.
4. Then on the next day we tested both iOS builds, new and old builds and both were working fine.

Legend labels are showing random display behavior.

Expected Behavior

Show labels properly

Actual Behavior

As shown in screenshot, labels hide/show randomly

Screenshots

Screenshot of release version, sometimes labels show, sometimes on the same build they hide with no apparent environment change

Screenshot of debug app in simulator

Data and config

    <CombinedChart
        style={styles.chart}
        xAxis={{
          avoidFirstLastClipping: true,
          drawGridLines: false,
          valueFormatter: xAxisDateMap
            ? Object.keys(xAxisDateMap).map((x) =>
                moment(x).format(xLabelFormat),
              )
            : [],
          granularityEnabled: true,
          granularity: 1,
          position: 'BOTTOM',
          fontFamily: styles.chartFontFamily.fontFamily,
          textSize: styles.chartFontSize,
        }}
        yAxis={{
          left: {
            drawGridLines: true,
            granularityEnabled: true,
            fontFamily: FONT_FAMILY.regular,
            axisMaximum: 5000,
            axisMinimum: 0,
            textSize: styles.chartFontSize,
          },
          right: {
            drawGridLines: false,
            granularityEnabled: true,
            fontFamily: FONT_FAMILY.regular,
            axisMaximum: 100,
            axisMinimum: 0,
            textSize: styles.chartFontSize,
          },
        }}
        data={{
          lineData: {
            dataSets: [

              lineDataObject({
                lineDataArray: historicalGDULine,
                label: LocalizationConstants.HISTORICAL_GDU,
                colorsArray: [processColor('rgba(35, 134, 117, 1)')],
              }),
              showFemaleSilking
                ? lineDataObject({
                    lineDataArray: silking,
                    label: LocalizationConstants.FEMALE_SILKING,
                    colorsArray: [processColor('rgba(250, 129, 250, 1)')],
                    leftAxis: false,
                  })
                : null,
              showMaleActiveShed
                ? lineDataObject({
                    lineDataArray: maleActiveShed,
                    label: LocalizationConstants.MALE_ACTIVE_SHED,
                    colorsArray: [processColor('rgba(19, 194, 194, 1)')],
                    leftAxis: false,
                    showCircle: true,
                  })
                : null,
              // Some code redacted

            ],
          },
        }}
        marker={{
          enabled: showMarkers,
          digits: 0,
          markerColor: processColor('rgba(0,0,0,0.75)'),
          textColor: processColor('white'),
        }}
        legend={{
          custom: {
            colors: [
              processColor('rgba(202, 8, 19, 1)'),
              processColor('#975FE4'),
              processColor('#FAD338'),
              processColor('rgba(218, 186, 61, 1)'),
              processColor('#238675'),
              processColor('#FA81FA'),
              processColor('rgba(19, 194, 194, 1)'),
              processColor('#F3CCCD'),
              processColor('#FD9827'),
              processColor('#609933'),
              processColor('#C91280'),
              processColor('#00C2DD'),
              processColor('#44821A'),
            ],
            labels: [
              LocalizationConstants.GDU_TO_CUT,
              LocalizationConstants.ACTUAL_GDU,
              LocalizationConstants.ESTIMATED_GDU,
              LocalizationConstants.MALE_SPENT,
              LocalizationConstants.HISTORICAL_GDU,
              LocalizationConstants.FEMALE_SILKING,
              LocalizationConstants.MALE_ACTIVE_SHED,
              LocalizationConstants.ESTIMATED_CUT,
              LocalizationConstants.HISTORICAL_CUT,
              LocalizationConstants.ESTIMATED_HARVEST,
              LocalizationConstants.HISTORICAL_HARVEST,
              LocalizationConstants.HARVEST_DATE,
              LocalizationConstants.PLANTING_DATE,
            ],
          },
          enabled: showLegend,
          horizontalAlignment: 'CENTER',
        }}
      />

const lineDataObject = useCallback(
    ({
      lineDataArray = [],
      label = '',
      colorsArray = [],
      leftAxis = true,
      isVisible = true,
      fillGradient = false,
      cubic_bezier = true,
      showCircle = false,
    }) => {
      return {
        values: lineDataArray,
        label: label,
        config: {
          visible: isVisible,
          drawValues: false,
          colors: colorsArray,
          mode: cubic_bezier ? 'CUBIC_BEZIER' : 'LINEAR',

          drawCircles: true,
          drawCircleHole: false,
          circleRadius: 2,
          circleColors: colorsArray,

          lineWidth: 2,
          fillGradient: fillGradient
            ? {
                colors: colorsArray,
                positions: [0, 0.5],
              }
            : undefined,
          drawFilled: fillGradient,
          fillAlpha: 1000,
          axisDependency: leftAxis ? 'LEFT' : 'RIGHT',
        },
      };
    },
    [],
  );

Steps to Reproduce the Problem

Specifications

• Version: "react-native-charts-wrapper": "^0.5.11",
• Platform: iOS only so far