Error while updating property 'd' of a view managed by: RNSVGPath

Question

I am struggling for last few days with the below error in react native.

My intention: Dynamically fetch chart data and plot multiple charts on my page.

Whenever I have a succesful fetch the sData[] gets filled. However my chart keeps thrwoing an error: Error while updating property 'd' of a view managed by: RNSVGPath null Attempt to invoke interface method 'int java.Charsequence.length()' on a null object reference

If the fetch fails and my sData is set to default array [5,4,3,2,1] as below in the code, the chart is able to render.

What am i missing/messing? Please help.

import React, { Component } from 'react';
import {AsyncStorage} from 'react-native';
import { LineChart, Grid } from 'react-native-svg-charts';
import { Container, Header, Content, List, ListItem, Text, Left, Right, Body , Button, Title} from 'native-base';

const data = [1,2,3,4,5,6,7];

export default class SomeDetails extends Component {

  constructor(props)
  {
    super(props);
    this.state = { 'user': '',
                    'email': '',
                    'privLevel': '',
                    'phNum': '',  
                    UserApiUrl: '<SOMEAPI>',              
                    sData: [],
                    someData: ''
     }
  }

  componentDidMount() {
    this._loadInitialState().done();
  }

  _loadInitialState = async () => {
    var uPhVal = await AsyncStorage.getItem('uPh');
    var uEmailVal = await AsyncStorage.getItem('uEmail');
    var uPrivVal = await AsyncStorage.getItem('uPlevel');
    var uName = await AsyncStorage.getItem('username');

    if(uName !== null)
    {
      this.setState({'user': uName});
      this.setState({'phNum': uPhVal});
      this.setState({'email': uEmailVal});
      this.setState({'privLevel':uPrivVal})
    }

    var postString = "SOME STRING FOR MY API" 
    console.log(postString);
    response  = await fetch(this.state.UserApiUrl, {
        method: 'POST',
        body: postString
    })
    res = await response.json();
    console.log(res.success);
    if (res.success == "true") {
        this.setState({ someData: res.someLatestVal });
        var dataItems = this.state.someData.split(';');
        for(let j=0;j<dataItems.length; j++)
        {
            var dataI = dataItems[j].split(':');
            this.setState({sData: this.state.sData.concat([dataI[0]]) } ); 
        }
    }
    else {
        //  console.log("Req: Unable to fetch");
        this.setState({sData: [1,2,3,4,5]});
        this.setState({loading: true});
    }

     console.log(this.state.sData);

  }

  render() {

    const { navigation } = this.props;
    const someName = navigation.getParam('someName', 'no-name');

    return (
      <Container>
        <Content>
          <List>
            <ListItem>
              <Text>Sensorname: { someName } </Text>
            </ListItem>
            <LineChart
                style={{ height: 70, width: 120 }}
                data={ this.state.sData }
                svg={{ stroke: 'rgb(134, 65, 244)' }}
                contentInset={{ top: 20, bottom: 20 }} 
                >
            <Grid/>
            </LineChart>                

          </List>
        </Content>
      </Container>
    );
  }
}

Answer 1

remove - yarn remove react-native-svg add - yarn add react-native-svg@9.13

it worked for me

Answer 2

We fixed this by ensuring VictoryLine always gets at least 2 data points. If passed only one data point it may crash.

Here's the working code with a simple check for whether a data set has at least two items:

      {dataSetsWithGaps.map(coordList =>
        coordList.length < 2 ? null : (
          <VictoryLine
            key={`line_${coordList[0].x.toString()}`}
            interpolation={interpolationMethod}
            data={coordList}
          />
        ),
      )}