React Native Tutorials

Posted on  by admin

Step 2 - Router

Mega Bundle Sale is ON! Get ALL of our React Native codebases at 80% OFF discount 🔥 . In this tutorial, you will learn how to implement React Native Charts in your mobile app projects. In order to add chart visuals to a mobile app, we are going to use the react-native-chart-kit library, which provides us with the ability to add stunning charts to our React native apps. With this charts library, you can create line charts, Bezier line charts, Pie charts, Bar charts, Progress charts, and Contribution graphs. The library provides a Charts API that is easy to use, responsive, easy to plug-in and highly customizable.

Charts are beautiful visual components, that highly boost the look and feel of your mobile app.

Web development, programming languages, Software testing & others

By leveraging charts as a design tool, you make your React Native app more beautiful, while also boosting the user experience.

yarn add react-native-chart-kit

Charts are easy to read and efficiently convey data stories.

npm install react-native-chart-kit

Rather than using tables full of data, your app’s storytelling means are way more powerful with React Native Charts components.

import { LineChart,
BarChart,
PieChart,
ProgressChart,
ContributionGraph,
StackedBarChart
} from 'react-native-chart-kit'

Introduction to React Native Drawer

So what types of app ideas can take full advantage of the React Native Charts library?

Output

Well, it turns out there’s a huge variety of app categories that can skyrocket the user experience by using beautiful charts.

The obvious categories would be business dashboard apps, finance apps, mobile banking apps, analytics apps, e-commerce apps, health apps, and fitness apps.

import * as React from 'react';
import { Text, View, StyleSheet, Dimensions, ScrollView } from 'react- native';
import {
LineChart,
BarChart,
PieChart,
ProgressChart,
ContributionGraph,
StackedBarChart,
} from 'react-native-chart-kit';
export default class App extends React.Component {
render() {
return (



{/*It is an Example of LineChart*/}
style={{
textAlign: 'center', fontSize: 18,
padding: 16,
marginTop: 16,
}}>
Line Chart

labels: [ 'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
],
datasets: [
{
data: [20, 45, 28, 80, 99, 43],
strokeWidth: 2,
},
],
}}
width={Dimensions.get('window').width - 16}
height={220}
chartConfig={{
backgroundColor: '#c92ac7',
backgroundGradientFrom: '#7bede2',
backgroundGradientTo: '#dbb8cd',
decimalPlaces: 2,
color: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
style: {
borderRadius: 16,
},
}}
style={{ marginVertical: 8,
borderRadius: 16,
}}
/>



);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center', padding: 8,
paddingTop: 30,
backgroundColor: '#ecf0f1',
},
});

But even in mobile spaces such as social networks or utilities, charts can be extremely powerful for some features.

Next Steps

Even Instagram contains a few charts, such as the time spent graph.

From business metrics to fitness activity, React Native Charts convey a ton of stories, in a restricted real estate, which makes them perfect for phone apps.

import * as React from 'react';
import { Text, View, StyleSheet, Dimensions, ScrollView } from 'react- native';
import {
LineChart,
BarChart,
PieChart,
ProgressChart,
ContributionGraph,
StackedBarChart,
} from 'react-native-chart-kit';
export default class App extends React.Component {
render() {
return (



{/*It is an Example of Progress Chart*/}
style={{
textAlign: 'center', fontSize: 18,
padding: 16,
marginTop: 16,
}}>
Progress Chart

width={Dimensions.get('window').width - 16} height={220}
chartConfig={{
backgroundColor: '#cc14aa',
backgroundGradientFrom: '#7ff591',
backgroundGradientTo: '#f0f716',
decimalPlaces: 2,
color: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
style: {
borderRadius: 16,
},
}}
style={{ marginVertical: 8,
borderRadius: 16,
}}
/>



);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center', padding: 8,
paddingTop: 30, backgroundColor: '#ecf0f1',
},
});

At Instamobile, we’ve used the React Native Charts package to build our beautiful React Native Dashboard app.

Example

Without further ado, let’s jump right into how we can leverage React Native Charts, to build better mobile apps.

In the first step of adding charts into a mobile app, we need to install the react-native-chart-kit npm package into our existing React Native project.

import * as React from 'react';
import { Text, View, StyleSheet, Dimensions, ScrollView } from 'react- native';
import {
LineChart,
BarChart,
PieChart, ProgressChart,
ContributionGraph,
StackedBarChart,
} from 'react-native-chart-kit';
export default class App extends React.Component {
render() {
return (



{/*It is an Example of Bar Chart*/}
style={{
textAlign: 'center',
fontSize: 18,
padding: 16,
marginTop: 16,
}}>
Bar Chart

labels: [ 'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
],
datasets: [
{
data: [20, 45, 28, 80, 99, 43],
},
],
}}
width={Dimensions.get('window').width - 16}
height={220}
yAxisLabel={'$'} chartConfig={{
backgroundColor: '#10c9bd',
backgroundGradientFrom: '#f2b40a',
backgroundGradientTo: '#99f7e3',
decimalPlaces: 2,
color: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
style: {
borderRadius: 16,
},
}}
style={{ marginVertical: 8,
borderRadius: 16,
}}
/>



);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center', padding: 8,
paddingTop: 30, backgroundColor: '#ecf0f1',
},
});

You can do so by using NPM or yarn.

Examples

In order to have all the Charts APIs available in React Native, we need to import the package that we’ve just integrated in the project.

You can do so by using the following piece of code:.

import * as React from 'react';
import { Text, View, StyleSheet, Dimensions, ScrollView } from 'react- native';
import {
LineChart,
BarChart,
PieChart,
ProgressChart,
ContributionGraph,
StackedBarChart,
} from 'react-native-chart-kit';
export default class App extends React.Component {
render() {
return (



{/*It is an Example of StackedBar Chart*/}
style={{
textAlign: 'center'
fontSize: 18,
padding: 16,
marginTop: 16,
}}>
Stacked Bar Chart

labels: ['Test1', 'Test2'],
legend: ['L1', 'L2', 'L3'],
data: [[60, 60, 60], [30, 30, 60]],
barColors: ['#f52105', '#ff9e1f', '#53ff1f'],
}}
width={Dimensions.get('window').width - 16}
height={220}
chartConfig={{
backgroundColor: '#10abc9',
backgroundGradientFrom: '#f7f78b',
backgroundGradientTo: '#fc5858',
decimalPlaces: 2,
color: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`, style: {
borderRadius: 16,
},
}}
style={{ marginVertical: 8,
borderRadius: 16,
}}
/>



);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center', padding: 8,
paddingTop: 30, backgroundColor: '#ecf0f1',
},
});

Now you get access to various chart types, which are accessible from your JavaScript code.

Conclusion

After the importing of our charts plugin successfully, we are going to create a line chart in React Native.

As we have already imported all the chart components in the previous step, we just need to supply the data to the built-in line chart component as follows:.

import * as React from 'react';
import { Text, View, StyleSheet, Dimensions, ScrollView } from 'react- native';
import {
LineChart,
BarChart,
PieChart,
ProgressChart,
ContributionGraph,
StackedBarChart,
} from 'react-native-chart-kit';
export default class App extends React.Component {
render() {
return (



{/*It is an Example of Pie Chart*/}
style={{
textAlign: 'center',
fontSize: 18,
padding: 16,
marginTop: 16,
}}>
Pie Chart

{
name: 'Seoul',
population: 21500000,
color: '#b81ff0',
legendFontColor: '#050505',
legendFontSize: 15,
},
{
name: 'Toronto',
population: 2800000,
color: '#f2f763',
legendFontColor: '#050505',
legendFontSize: 15,
},
{
name: 'New York',
population: 8538000,
color: '#f51818',
legendFontColor: '#050505',
legendFontSize: 15,
},
{
name: 'Moscow',
population: 11920000,
color: '#62f518',
legendFontColor: '#050505',
legendFontSize: 15,
},
]}
width={Dimensions.get('window').width - 16} height={220}
chartConfig={{ backgroundColor: '#194ad1',
backgroundGradientFrom: '#f74871',
backgroundGradientTo: '#ffbc47',
decimalPlaces: 2,
color: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
style: {
borderRadius: 16,
},
}}
style={{ marginVertical: 8,
borderRadius: 16,
}}
accessor="population"
backgroundColor="transparent"
paddingLeft="15"
absolute
/>



);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
padding: 8,
paddingTop: 30,
backgroundColor: '#ecf0f1',
},
});

The code above represents the dataset for our line chart component, that will be displayed in a line chart view, in our project.

Useful Video Courses

As you can notice, for the scope of this tutorial, we are using hardcoded static data. In most projects, this data will be previously fetched from a server or local database. But for learning purposes, we should be good with mock data for now. Now that we have the data we want to show to your users, we are going to use the LineChart component imported from our React Native Charts plugin.

The code snippet to implement the line chart with our chart dataset and other properties is given below. You can customize the properties such as height, width, axis-labels, chart configs, etc to your liking.