title: Fill Parent Container with react-native-chart-kit Chart (React Native, Expo)
body: <p>I am using <a href="https://github.com/indiespirit/react-native-chart-kit/" rel="noreferrer"><code>react-native-chart-kit</code></a> in a React Native Expo app to render charts. The example provided in the docs work fine</p>
  
  <p><strong>Problem:</strong> In my app, the chart is needed to fill a parent container, but it appears that the chart must have the <code>height</code> props as a fixed value. </p>
  
  <pre><code>&lt;LineChart
      height={221}
      ...
  /&gt;
  </code></pre>
  
  <p>Attempting to set the <code>height</code> value to <code>100%</code> or removing the definition will result in a NaN-related error</p>
  
  <blockquote>
    <p>Invariant Violation: [.....,"y1":"&lt;>","x2":"375","y2":"&lt;>"}] is not usable as a native method argument</p>
  </blockquote>
  
  <p>Is there a solution to this problem? Thank you!</p>
  
  <p><strong>Working Example based on Docs</strong></p>
  
  <pre><code>export default class Chart extends Component {
  
      render() {
          const data = {
              datasets: [{
                  data: [
                      Math.random() * 100,
                      Math.random() * 100,
                      Math.random() * 100,
                      Math.random() * 100,
                      Math.random() * 100,
                      Math.random() * 100
                  ]
              }]
          }
  
          return (
              &lt;LineChart 
                  data={data}
                  width={Dimensions.get('window').width}
                  height={221}
                  yAxisLabel={'$'}
                  chartConfig={{
                      backgroundColor: '#e26a00',
                      backgroundGradientFrom: '#fb8c00',
                      backgroundGradientTo: '#ffa726',
                      decimalPlaces: 2, // optional, defaults to 2dp
                      color: (opacity = 1) =&gt; `rgba(255, 255, 255, ${opacity})`,
                      style: {
                          borderRadius: 16
                      }
                  }}
                  bezier
                  style={{
                      marginVertical: 8,
                      borderRadius: 16
                  }}
              /&gt;
          )
      }
  
  }                   
  </code></pre>
  
  <hr>
  
  <p><strong>@hong develop</strong></p>
  
  <p>The <code>react-native-chart-kit</code> component <code>&lt;LineChart /&gt;</code> can be a child of another Component whose height is variable. So <code>&lt;LineChart /&gt;</code> does not necessary have the height given by <code>Dimensions.get('window').height;</code>. For example,</p>
  
  <pre><code>render() {
      &lt;View&gt;
          &lt;Header /&gt;
          { this.props.foo ? this.renderFoo() : null }
          &lt;View&gt;
              &lt;LineChart 
                  ...
              /&gt;
          &lt;/View&gt;
      &lt;/View&gt;
  }
  
  </code></pre>