⚡ React Native Cryptos

• React-Native app to display cryptocurrency API data
• Tutorial code from Fazt Code - see 👏 Inspiration below
• Note: to open web links in a new window use: ctrl+click on link

📄 Table of contents

• ⚡ React Native Cryptos
  • 📄 Table of contents
  • 📚 General info
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup
  • 💻 Code Example by Fazt Code
  • 🆒 Features
  • 📋 Status & To-do list
  • 👏 Inspiration
  • 📁 License
  • ✉️ Contact

📚 General info

• Cryptocurrency data from the CoinGecko API and does not require an API key
• React useEffect hook used for data fetching
• React useState hook used to initialise & update coins, refeshing and search states

📷 Screenshots

📶 Technologies

• Expo v44 framework & platform for universal React applications, installed globally
• React Native v0.67.4 to create native app for Android and iOS
• react-native-web v0.17.7 React Native Components and APIs for the Web.
• React v17 JavaScript library for building user interfaces
• Android Studio v4 installed globally, used to simulate Android device

💾 Setup

• Run npm i to install dependencies
• npm install -g expo-cli --force to install Expo CLI globally (force option may not be required)
• Run npm start to start expo on a localhost port
• See package.json for the npm commands to create build files etc.
• Android Studio has to be installed and set up then the AVD Manager is run from the Configure menu

💻 Code Example by Fazt Code

• Code by Fazt Code to display Cryptocurrency data. Includes ternery expression to show price change data in green or red

const CoinItem = ({ coin }) => (
  <View style={styles.containerItem}>
    <View style={styles.coinName}>
      <Image source={{ uri: coin.image }} style={styles.image} />
      <View style={styles.containerNames}>
        <Text style={styles.text}>{coin.name}</Text>
        <Text style={styles.textSymbol}>{coin.symbol}</Text>
      </View>
    </View>
    <View>
      <Text style={styles.textPrice}>${coin.current_price}</Text>
      <Text
        style={[
          styles.pricePercentage,
          coin.price_change_percentage_24h > 0
            ? styles.priceUp
            : styles.priceDown,
        ]}
      >
        {coin.price_change_percentage_24h.toFixed(2)}%
      </Text>
    </View>
  </View>
);

🆒 Features

• Expo bar code used to connect mobile to project. The Expo framework is easy to use.
• Android Studio simulation on mobile device

📋 Status & To-do list

• Status: Working
• To-do: Nothing.

👏 Inspiration

• Fazt Code: React Native & CoinGecko | Aplicación de Precios de Criptomonedas in Spanish

📁 License

• N/A

✉️ Contact

• Repo created by ABateman, email: [email protected]