title: Tried to register two views with the same name
body: <p><a href="https://i.stack.imgur.com/Zk6ib.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Zk6ib.jpg" alt="enter image description here" /></a></p>
  <p>I am not sure why it's returning this error. It might have to do something with one of the dependencies being incompatible with another. I also have installed a react-native-webview dependency along with canvas. I wonder if that's causing the error. My package.json is the following-</p>
  <pre><code>    {
    &quot;name&quot;: &quot;angularapp&quot;,
    &quot;version&quot;: &quot;0.0.1&quot;,
    &quot;private&quot;: true,
    &quot;scripts&quot;: {
      &quot;android&quot;: &quot;react-native run-android&quot;,
      &quot;ios&quot;: &quot;react-native run-ios&quot;,
      &quot;start&quot;: &quot;react-native start&quot;,
      &quot;test&quot;: &quot;jest&quot;,
      &quot;lint&quot;: &quot;eslint .&quot;
    },
    &quot;dependencies&quot;: {
      &quot;@react-native-community/picker&quot;: &quot;^1.8.1&quot;,
      &quot;moment&quot;: &quot;^2.29.1&quot;,
      &quot;react&quot;: &quot;16.13.1&quot;,
      &quot;react-native&quot;: &quot;0.63.3&quot;,
      &quot;react-native-axios&quot;: &quot;^0.17.1&quot;,
      &quot;react-native-canvas&quot;: &quot;^0.1.37&quot;,
      &quot;react-native-chartjs&quot;: &quot;^1.0.3&quot;,
      &quot;react-native-dates&quot;: &quot;^2.0.4&quot;,
      &quot;react-native-material-ui&quot;: &quot;^1.30.1&quot;,
      &quot;react-native-paper&quot;: &quot;^4.3.0&quot;,
      &quot;react-native-picker-select&quot;: &quot;^8.0.2&quot;,
      &quot;react-native-scripts&quot;: &quot;^2.0.1&quot;,
      &quot;react-native-webview&quot;: &quot;^2.0.0&quot;
    },
    &quot;devDependencies&quot;: {
      &quot;@babel/core&quot;: &quot;^7.12.3&quot;,
      &quot;@babel/runtime&quot;: &quot;^7.12.1&quot;,
      &quot;@react-native-community/eslint-config&quot;: &quot;^2.0.0&quot;,
      &quot;babel-jest&quot;: &quot;^26.6.1&quot;,
      &quot;eslint&quot;: &quot;^7.12.1&quot;,
      &quot;jest&quot;: &quot;^26.6.1&quot;,
      &quot;metro-react-native-babel-preset&quot;: &quot;^0.63.0&quot;,
      &quot;react-test-renderer&quot;: &quot;16.13.1&quot;
    },
    &quot;jest&quot;: {
      &quot;preset&quot;: &quot;react-native&quot;
    }
  } 
  </code></pre>
  <p>I am trying to create a line chart compatible with calendar in this code. Following is the main piece of code from App.js</p>
  <pre><code>import React, {Component} from 'react';
  import Dates from 'react-native-dates';
  import moment from 'moment';
  import Chart from 'react-native-chartjs';
  import Canvas from 'react-native-canvas';
  import {
    SafeAreaView,
    StyleSheet,
    ScrollView,
    View,
    Text,
    StatusBar,
  } from 'react-native';
  
  import {
    Header,
    LearnMoreLinks,
    Colors,
    DebugInstructions,
    ReloadInstructions,
  } from 'react-native/Libraries/NewAppScreen';
  
  export default class App extends React.Component {
    constructor(props) {
      super(props);
      this.chart = null;
      this.state = {
        startDate: null,
        endDate: null,
        focusedInput: null,
        dates: []
      };
      this.handleDatesChange = this.handleDatesChange.bind(this);
      this.handleFocusChange = this.handleFocusChange.bind(this);
      this.updateChart = this.updateChart.bind(this);
    }
  
    componentDidMount() {
      this.chart = new Chart(this.node, {
        type: &quot;line&quot;,
        data: {
          labels: [],
          datasets: [
            {
              label: &quot;# of Likes&quot;,
              data: [],
              backgroundColor: [
                &quot;rgba(255, 99, 132, 0.2)&quot;,
                &quot;rgba(54, 162, 235, 0.2)&quot;,
                &quot;rgba(255, 206, 86, 0.2)&quot;
              ]
            }
          ]
        }
      });
    }
  
    handleDatesChange({ startDate, endDate }) {
      let dates = [];
      for (
        let m = moment(startDate);
        m.diff(moment(endDate), &quot;days&quot;) &lt;= 0;
        m.add(1, &quot;days&quot;)
      ) {
        dates.push(m.format(&quot;YYYY-MM-DD&quot;));
      }
      this.setState({ startDate, endDate, dates }, () =&gt; {
        let data = this.randomData(this.state.dates.length);
        this.updateChart(this.state.dates, data);
      });
    }
  
    handleFocusChange(focusedInput) {
      this.setState({ focusedInput });
    }
  
    updateChart(labels, data) {
      this.chart.data.labels = labels;
      this.chart.data.datasets[0].data = data;
      this.chart.update();
    }
  
    randomData(length) {
      let data = [];
      for (let i = 0; i &lt; length; i++) {
        data.push(Math.floor(Math.random() * 100) + 1);
      }
      return data;
    }
  
    render() {
      return (
        &lt;View style={styles.container}&gt;
          &lt;Dates
            startDateId=&quot;startDate&quot;
            endDateId=&quot;endDate&quot;
            startDate={this.state.startDate}
            endDate={this.state.endDate}
            onDatesChange={this.handleDatesChange}
            focusedInput={this.state.focusedInput}
            onFocusChange={this.handleFocusChange}
          /&gt;
          &lt;Canvas ref={node =&gt; (this.node = node)} /&gt;
        &lt;/View&gt;
      );
    }
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'center',
      backgroundColor: '#FFFFFF'
    },
    scrollView: {
      backgroundColor: Colors.lighter,
    },
    engine: {
      position: 'absolute',
      right: 0,
    },
    body: {
      backgroundColor: Colors.white,
    },
    sectionContainer: {
      marginTop: 32,
      paddingHorizontal: 24,
    },
    sectionTitle: {
      fontSize: 24,
      fontWeight: '600',
      color: Colors.black,
    },
    sectionDescription: {
      marginTop: 8,
      fontSize: 18,
      fontWeight: '400',
      color: Colors.dark,
    },
    highlight: {
      fontWeight: '700',
    },
    footer: {
      color: Colors.dark,
      fontSize: 12,
      fontWeight: '600',
      padding: 4,
      paddingRight: 12,
      textAlign: 'right',
    },
  });
   
  </code></pre>