Fill Parent Container with react-native-chart-kit Chart (React Native, Expo)

Question

I am using react-native-chart-kit in a React Native Expo app to render charts. The example provided in the docs work fine

Problem: In my app, the chart is needed to fill a parent container, but it appears that the chart must have the height props as a fixed value.

<LineChart
    height={221}
    ...
/>

Attempting to set the height value to 100% or removing the definition will result in a NaN-related error

Invariant Violation: [.....,"y1":"<>","x2":"375","y2":"<>"}] is not usable as a native method argument

Is there a solution to this problem? Thank you!

Working Example based on Docs

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 (
            <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) => `rgba(255, 255, 255, ${opacity})`,
                    style: {
                        borderRadius: 16
                    }
                }}
                bezier
                style={{
                    marginVertical: 8,
                    borderRadius: 16
                }}
            />
        )
    }

}                   

---

@hong develop

The react-native-chart-kit component <LineChart /> can be a child of another Component whose height is variable. So <LineChart /> does not necessary have the height given by Dimensions.get('window').height;. For example,

render() {
    <View>
        <Header />
        { this.props.foo ? this.renderFoo() : null }
        <View>
            <LineChart 
                ...
            />
        </View>
    </View>
}

Answer 1

The type of height is the number. Therefore, string values are not allowed. If you want to replace what you're trying to do, you can use this.

const screenheight = Dimensions.get('window').height;
<LineChart
    height={screenheight}
    ...
/>

As you can see by referring to this document, the chart cannot be seen without setting the height. Because the width and height are set by the set value, you must write down the value unconditionally.