Barchart not showing - reactjs

Question

I am making an app which will show some statistics. I choose to make a Barchart with help of react-native-chart-kit. But its gives error: TypeError: undefined is not an object (evaluating 'data.map'). This error shows when i use barchart and the same code is working properly with linechart.
Here is my Code:
import React, { useState } from "react";
import { StyleSheet, Dimensions, Alert, TouchableHighlight, Text, View, Button, TouchableOpacity } from 'react-native';
import {
LineChart,
BarChart,
PieChart,
ProgressChart,
ContributionGraph
} from 'react-native-chart-kit'
export default function TrendsScreen() {
const [handleClick, sethandleClick] = useState(false);
// const [color,setColor]=useState('red');
//const [textColor,setTextColor]=useState('white');
if (handleClick) {
alert("fgfhfhg");
}
return (
<View style={styles.view}>
<View style={styles.container}>
<TouchableOpacity
style={styles.customBtnBG}
onPress={() => sethandleClick(true)}
>
<Text style={styles.customBtnText}>Current month</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.customBtnBG}
onPress={() => { }}
>
<Text style={styles.customBtnText}>6 Month</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.customBtnBG}
onPress={() => { }}
>
<Text style={styles.customBtnText}>12 Month</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.customBtnBG}
onPress={() => { }}
>
<Text style={styles.customBtnText}>All Time</Text>
</TouchableOpacity>
</View>
<View>
<Text style={styles.Text}>
Trend
</Text>
</View>
<View style={styles.chart}>
<BarChart
data={{
labels: ["January", "February", "March", "April", "May", "June"],
datasets: [{
data: [
Math.random() * 100,
Math.random() * 100,
]
}
]
}}
width={Dimensions.get('window').width} // from react-native
height={220}
chartConfig={{
backgroundColor: 'red',
backgroundGradientFrom: 'white',
backgroundGradientTo: 'white',
color: (opacity = 1) => `rgba(20, 20, 20, ${opacity})`,
style: {
borderRadius: 16
}
}}
bezier
style={{
marginVertical: 8,
borderRadius: 16
}}
/>
</View>
</View>
);
}
const styles = StyleSheet.create({
view: {
marginTop: 20
},
Text: {
padding: 16,
fontSize: 20,
fontStyle: 'italic',
},
container: {
flexDirection: 'row',
justifyContent: 'space-around',
},
customBtnText: {
fontSize: 14,
color: "#D2D5D6",
textShadowColor: '#585858',
},
/* Here style the background of your button */
customBtnBG: {
flexDirection: 'row',
backgroundColor: "white",
borderWidth: 1,
paddingHorizontal: 10,
paddingVertical: 5,
borderRadius: 5,
borderColor: "#29416F",
}
});

Answer 1

I'm having the same issue after updating to the new version.
Change your react-native-chart-kit version to 6.1.1
react-native-chart-kit: "6.1.1"