Android crash on production

[manav-kasare]

android app crashed on release build when the line graph component is rendered. Works fine on android debug. Also works fine on iOS.

here's my component

import moment from 'moment';
import React, {useState} from 'react';
import {ActivityIndicator} from 'react-native-paper';
import {
  Chart,
  Line,
  Area,
  HorizontalAxis,
  VerticalAxis,
  Tooltip,
} from 'react-native-responsive-linechart';
import {View} from 'react-native';
import {useGlobal} from 'reactn';

export default function LineGraph({data, key}) {
  const [tooltipValue, setTooltipValue] = useState(0);
  const [selectedChannel] = useGlobal('selectedChannel');

  return data ? (
    <Chart
      style={{
        height: constants.height * 0.3,
        width: constants.width,
        marginVertical: constants.height * 0.025,
        marginRight: 15,
      }}
      padding={{
        left: constants.width * 0.2,
        bottom: 20,
        right: 20,
        top: constants.height * 0.05,
      }}
      data={data.data}
      xDomain={
        data.xMin === data.xMax
          ? {min: 0, max: 1}
          : {min: data.xMin, max: data.xMax}
      }
      yDomain={
        data.yMin === data.yMax
          ? {min: data.yMax, max: data.yMax + 1}
          : {min: data.yMin, max: data.yMax}
      }>
      <VerticalAxis
        tickCount={5}
        theme={{
          labels: {
            label: {color: constants.text},
            formatter: v => v.toFixed(4),
          },
          grid: {visible: false},
        }}
        key={key}
      />
      <HorizontalAxis
        tickCount={data.data.length >= 5 ? 5 : data.data.length}
        theme={{
          labels: {
            label: {color: constants.text},
            formatter:
              (selectedChannel !== 'twitter' ||
                selectedChannel !== 'linkedin') &&
              (v => moment(v * 1000).format('MMM Do')),
            visible:
              selectedChannel !== 'twitter' && selectedChannel !== 'linkedin',
          },
          grid: {visible: false},
        }}
        key={key}
      />
      <Area
        theme={{
          gradient: {
            from: {color: constants.accent, opacity: 0.075},
            to: {color: constants.accent, opacity: 0},
          },
        }}
      />
      <Line
        tooltipComponent={
          <Tooltip
            type={
              (selectedChannel === 'twitter' ||
                selectedChannel === 'linkedin') &&
              'onlyY'
            }
            value={`${tooltipValue.y}, ${moment(tooltipValue.x * 1000).format(
              'MMM Do',
            )}`}
          />
        }
        onTooltipSelect={e => setTooltipValue(e)}
        hideTooltipAfter={1}
        smoothing="bezier"
        theme={{stroke: {color: constants.accent, width: 2}}}
      />
    </Chart>
  ) : (
    <View
      style={{
        height: constants.height * 0.3,
        width: constants.width,
        alignItems: 'center',
        justifyContent: 'center',
      }}>
      <ActivityIndicator
        animating={true}
        color={constants.accent}
        size="small"
      />
    </View>
  );
}

Calling like this <LineGraph data={likes} key="likes" />

Setting likes like this setLikes({ data: _likes, yMin: getMin(_likes), yMax: getMax(_likes), xMax, xMin, });

[vivkikkk]

me to how to fix android not work , ios work

[NongKaittong]

@methineeinkan same android crash on release in react native version 0.64.2

[thipmanus]

[Android] How to fix it ? My release app is crashing.

[vivkikkk]

work for me https://github.com/indiespirit/react-native-chart-kit/issues/344

[tlow92]

@methineeinkan @thipmanus @NongKaittong Make sure to only draw the chart, when you have more than 2 data points. Otherwise android crashes with an exception when drawing the svg.