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.
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:
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
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' ,
},
}); |
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: