Create a Crypto Prediction App using React Native

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

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: