Home Template in react native expo

[tempcp001]

import React from 'react';
import { Dimensions, ScrollView } from 'react-native';
import { View, StyleSheet, Text } from 'react-native';
import { LineChart } from 'react-native-chart-kit';
import HomeCard from './card';
const Home = () => {
const data = {
labels: ['January', 'February', 'March', 'April', 'May', 'June'],
datasets: [
{
data: [20, 45, 28, 80, 99, 43],
strokeWidth: 2,
},
],
};
return (
<ScrollView style={styles.container}>
<HomeCard icon="shoppingcart" title="Orders" />
<HomeCard icon="user" title="Users" />
<HomeCard icon="apple-o" title="Products" />
<HomeCard icon="car" title="Categories" />
<Text style={styles.graphTitle}>Sales</Text>
<LineChart
data={data}
width={Dimensions.get('window').width - 20} // from react-native
height={220}
chartConfig={{
backgroundColor: '#ffffff',
backgroundGradientFrom: '#ffffff',
backgroundGradientTo: '#ffffff',
decimalPlaces: 2,
color: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
style: {
borderRadius: 16,
},
}}
style={styles.graph}
/>
<Text style={styles.graphTitle}>Orders</Text>
<LineChart
data={data}
width={Dimensions.get('window').width - 20} // from react-native
height={220}
chartConfig={{
backgroundColor: '#ffffff',
backgroundGradientFrom: '#ffffff',
backgroundGradientTo: '#ffffff',
decimalPlaces: 2,
color: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
style: {
borderRadius: 16,
},
}}
style={styles.graph}
/>
</ScrollView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 10,
},
graph: {
marginVertical: 8,
},
graphTitle: {
marginTop: 20,
fontSize: 18,
fontWeight: 'bold',
},
});
export default Home;

Click to read more...