Create a Crypto Prediction App using React Native

Last Updated : 24 Jul, 2024

Crypto Prediction App using React Native allows users to fetch real-time cryptocurrency prices and predict future price movements based on historical data. Users can enter the symbol of the cryptocurrency they're interested in, fetch its current price, and make predictions using simple logic.

Output Preview: Let us have a look at how the final output will look like.

Screenshot-2024-02-14-110648

Prerequisites

React Native
Axios (for making HTTP requests)
CoinMarketCap API (for fetching cryptocurrency data)

Approach to create Crypto Prediction App:

Set up development environment and obtain API keys.
Design user interface.
Allow users to input cryptocurrency symbols.
Fetch real-time market data from CoinMarketCap API.
Implement basic prediction logic.
Display data and predictions in UI.

Steps to Create React Native Application:

Step 1: Set up a new React Native project.

npx react-native init cryptopredict
cd cryptopredict

Step 2: Install Axios for making HTTP requests.

npm install Axios

Step 3: Register for a free account on CoinMarketCap API to get an API key.

Project Structure:

Screenshot-2024-02-14-111624

The updated dependencies in package.json file will look like:

"dependencies": {
    "axios": "^1.6.7",
    "react": "18.2.0",
    "react-native": "0.73.4"
}

Example: Below is the code example of the Crypto Prediction App using React-Native

JavaScript

import React from 'react'; import { 	StyleSheet, 	View } from 'react-native'; import CryptoPredictionComponent 	from './CryptoPredictionComponent';  export default function App() { 	return ( 		<View style={styles.container}> 			<CryptoPredictionComponent /> 		</View> 	); }  const styles = StyleSheet.create({ 	container: { 		flex: 1, 		// Main background color 		backgroundColor: '#d5def5', 		alignItems: 'center', 		justifyContent: 'center', 	}, });

JavaScript

import React, { 	useState, 	useEffect } from 'react'; import { 	View, Text, 	StyleSheet, 	TextInput, 	Button } from 'react-native'; import axios from 'axios';  const CryptoPredictionComponent = () => { 	const [selectedCrypto, setSelectedCrypto] = useState(''); 	const [cryptoPrice, setCryptoPrice] = useState(''); 	const [prediction, setPrediction] = useState('');  	const fetchCryptoPrice = async () => { 		try { 			// Replace 'YOUR_API_KEY' with your actual API key 			const apiKey = 'Your-API-KEY'; 			const response = 				await axios.get( `https://pro-api.coinmarketcap.com/v1/cryptocurrency/quotes/latest?symbol=${selectedCrypto.toUpperCase()}`,  				{ 					headers: { 						'X-CMC_PRO_API_KEY': apiKey, 						'Accept': 'application/json' 					} 				}); 			setCryptoPrice( 				response.data 					.data[ 					selectedCrypto.toUpperCase() 				].quote.USD.price 			); 		} catch (error) { 			console.error( 				`Error fetching  				${selectedCrypto} price:`, error 			); 		} 	};  	const handlePredict = async () => { 		try { 			// Replace 'YOUR_API_KEY' with your actual API key 			const apiKey = '3f146e06-8a7b-4ab3-92d6-299b04526dc2'; 			const response = 				await axios.get( `https://pro-api.coinmarketcap.com/v1/cryptocurrency/quotes/latest?symbol=${selectedCrypto.toUpperCase()}`, 					{ 						headers: { 							'X-CMC_PRO_API_KEY': apiKey, 							'Accept': 'application/json' 						} 					});  			const change = 				response.data 					.data[ 					selectedCrypto.toUpperCase() 				].quote.USD.volume_change_24h;  			if (change > 8) { 				setPrediction('Positive: Price is expected to increase'); 			} else if (change < -0.5) { 				setPrediction('Negative: Price is expected to decrease'); 			} else { 				setPrediction('Neutral: Price is expected to stay the same'); 			} 		} catch (error) { 			console.error(`Error predicting ${selectedCrypto} price:`, error); 		} 	};  	return ( 		<View style={styles.container}> 			<Text style={styles.title}> 				Crypto Prediction 			</Text> 			<View style={styles.content}> 				<TextInput 					style={styles.input} 					placeholder="Enter Cryptocurrency Symbol (e.g., BTC)" 					value={selectedCrypto} 					onChangeText={text => setSelectedCrypto(text)} /> 				<Text style={styles.price}> 					Current Price: 					{ 						cryptoPrice ? 							`$${cryptoPrice}` : 'Loading...' 					} 				</Text> 				<Button title="Fetch Price" 					onPress={fetchCryptoPrice} /> 				<View style={styles.buttonSpacing} /> 				<View style={styles.buttonSpacing} /> 				<Button title="Predict" 					onPress={handlePredict} /> 				{ 					prediction && <Text style={styles.prediction}> 						Prediction: 						<View style={styles.buttonSpacing} /> 						{prediction} 					</Text> 				} 			</View> 		</View> 	); };  const styles = StyleSheet.create({ 	container: { 		flex: 1, 		// Main background color 		backgroundColor: '#d5def5', 		alignItems: 'center', 		justifyContent: 'center', 	}, 	title: { 		fontSize: 24, 		fontWeight: 'bold', 		marginBottom: 20, 		// Title text color 		color: '#430f58', 	}, 	content: { 		alignItems: 'center', 	}, 	input: { 		height: 40, 		width: 200, 		// Input border color 		borderColor: '#8594e4', 		borderWidth: 1, 		marginBottom: 20, 		paddingHorizontal: 10, 	}, 	price: { 		marginBottom: 20, 		// Price text color 		color: '#6643b5', 	}, buttonSpacing: { 		// Adjust the height for the desired spacing 		height: 10, 	}, 	prediction: { 		marginTop: 20, 		fontSize: 18, 		fontWeight: 'bold', 		// Prediction text color 		color: '#8594e4', 	}, });  export default CryptoPredictionComponent;

Steps to run the application:

react-native run-android or react-native run-ios.

Output:

Create a Stock Market Prediction App using React-Native

dhruvitriutzm

Improve

Article Tags :

Create a Crypto Prediction App using React Native

Prerequisites

Approach to create Crypto Prediction App:

Steps to Create React Native Application:

Project Structure:

Similar Reads