Example of Creating Pie Chart in React Native Android iOS App

Hello friends, In today’s tutorial we would learn about Pie chart in react native. Pie chart is a type of graph which usages circle and the circle is divided into multiple sectors. Each sectors represents a type of value in percentage. In react native we can use react-native-pie NPM package to create beautiful pie chart for showing data into chart format. So in this tutorial we would learn about Example of Creating Pie Chart in React Native Android iOS App.

Contents in this project Example of Creating Pie Chart in React Native Android iOS App :-

1. The first step is to download and install  the react-native-pie NPM package in our react native project. So open your project directory in Command Prompt in Windows and Terminal in MAC and execute below command to install it.

Screenshot :-

2. Now we have to install react-native-community/art NPM package also. This package is required to use the Pie chart. Execute below command to install the ART package.

3. Now friends our project is ready to use in android but for iOS we have to install the PODS to link the library with iOS react native project. So execute below command in MAC only for iOS. Now you use to use the cd .. command to go back into the main react native project directory.

4. Now our project is ready to use. Next and main step is to open the project’s main App.js file and import SafeAreaView, StyleSheet, View and Text component.

5. Import Pie component from react-native-pie package.

6. In this project it is showing us a Yellow box console warning message. To hide the message we would use disable yellow box code.

7. Creating our main export default App component class.

8. Creating return() block. Now here we would create 6 different type of Pie chart using Pie component.

9. Creating Style.

10. Complete Source Code for App.js file :

Screenshot :

3 Comments

  1. Please do a tutorial on multi selectable cheklist

Leave a Reply

Your email address will not be published. Required fields are marked *