React Native Chart

Abstract

1. Introduction

[NOT MAINTAINED] :bar_chart: Add line, area, pie, and bar charts to your React Native app

2. Objective

[NOT MAINTAINED] :bar_chart: Add line, area, pie, and bar charts to your React Native app

This project demonstrates how JavaScript, React Native can be applied to a real-world Mobile App Development problem.

4. Technology Stack

5. System Requirements

General requirements for this technology stack — check the README for exact versions.

• Node.js (LTS) and npm
• A modern web browser
• VS Code or any code editor
• Git (to clone the repository)

6. Installation & Setup

git clone https://github.com/tomauty/react-native-chart.git
cd react-native-chart

1. npm i react-native-chart --save
2. Right click Libraries and click 'Add Files to {YourProject}'
3. Navigate to your project's node_modules/react-native/Libraries/ART and select 'ART.xcodeproj'
4. Go to Build Phases -> Link Binary With Libraries

import React, { StyleSheet, View, Component } from 'react-native';
import Chart from 'react-native-chart';

const styles = StyleSheet.create({
	container: {
		flex: 1,
		justifyContent: 'center',
		alignItems: 'center',
		backgroundColor: 'white',
	},
	chart: {
		width: 200,
		height: 200,
	},
});

const data = [[
	[0, 1],
	[1, 3],
	[3, 7],
	[4, 9],
]];

class SimpleChart extends Component {
	render() {
		return (
			<View style={styles.container}>
				<Chart
					style={styles.chart}
					data={data}
					verticalGridStep={5}
					type="line"
					showDataPoint={true}
					color={['#e1cd00']}
				 />
			</View>
		);
	}
}

Full setup instructions are in the project README.

7. Future Enhancements

Suggested extensions you can add to make this your own project.

• Add push notifications with Firebase Cloud Messaging
• Add offline support with local caching
• Publish an internal test build on the Play Store

8. Viva / Review Questions

Common questions examiners ask for projects in this domain.

1. Which framework is used and why (native vs cross-platform)?
2. How is app state managed across screens?
3. Where is the data stored — locally, Firebase or a REST backend?
4. How are permissions (camera, location, storage) handled?
5. How would you publish this app to the Play Store / App Store?

9. Source Code & License

This project is developed by tomauty and published on GitHub under the MIT License. Please follow the license terms and credit the original author when you use or modify this code.