https://github.com/matthew3dg/react-native-crypto-statistic
A cross-platform mobile application built with React Native that provides real-time cryptocurrency market data. The app features a clean, modern interface for browsing cryptocurrency markets with pagination support, pull-to-refresh functionality, and customizable display preferences.
https://github.com/matthew3dg/react-native-crypto-statistic
coingecko-api react-native tanstack-react-query typescript zustand
Last synced: 2 months ago
JSON representation
A cross-platform mobile application built with React Native that provides real-time cryptocurrency market data. The app features a clean, modern interface for browsing cryptocurrency markets with pagination support, pull-to-refresh functionality, and customizable display preferences.
- Host: GitHub
- URL: https://github.com/matthew3dg/react-native-crypto-statistic
- Owner: Matthew3dg
- Created: 2025-09-23T12:29:55.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2025-10-05T04:15:52.000Z (9 months ago)
- Last Synced: 2025-10-05T06:09:11.393Z (9 months ago)
- Topics: coingecko-api, react-native, tanstack-react-query, typescript, zustand
- Language: TypeScript
- Homepage:
- Size: 382 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Native Crypto Tracker
A modern React Native application for tracking cryptocurrency market data in real-time. Built with TypeScript and powered by the CoinGecko API.
## Features
- 📊 **Real-time Market Data**: View current cryptocurrency prices and 24h changes
- 🔄 **Pull-to-Refresh**: Update data with a simple pull gesture
- 📱 **Responsive Design**: Clean, modern UI optimized for mobile devices
- âš¡ **Fast Performance**: Efficient data fetching with React Query
- 🎯 **Pagination**: Browse through multiple pages of market data
- 💾 **State Management**: Persistent preferences with Zustand
## Screenshots
The app displays a clean list of cryptocurrencies with:
- Coin icons and names
- Current prices in USD
- 24-hour price change percentages (color-coded)
- Market cap rankings
## Tech Stack
- **React Native 0.73.9** - Cross-platform mobile development
- **TypeScript** - Type-safe development
- **React Query (TanStack Query)** - Server state management and caching
- **Zustand** - Lightweight state management
- **Axios** - HTTP client for API requests
- **CoinGecko API** - Cryptocurrency market data
## Prerequisites
- Node.js >= 18
- React Native development environment
- iOS Simulator (for iOS development)
- Android Studio (for Android development)
## Installation
1. Clone the repository:
```bash
git clone https://github.com/Matthew3dg/react-native-crypto-statistic.git
cd react-native-crypto-statistic
```
2. Install dependencies:
```bash
yarn install
# or
npm install
```
3. For iOS, install CocoaPods dependencies:
```bash
cd ios && pod install && cd ..
```
## Running the App
### iOS
```bash
yarn ios
# or
npm run ios
```
### Android
```bash
yarn android
# or
npm run android
```
### Metro Bundler
```bash
yarn start
# or
npm start
```
## Project Structure
```
src/
├── api/
│ └── coingecko.ts # CoinGecko API client and types
├── components/
│ └── CoinRow.tsx # Individual coin display component
├── hooks/
│ └── useMarketsQuery.ts # React Query hook for market data
├── providers/
│ └── QueryProvider.tsx # React Query provider setup
├── screens/
│ └── MarketsScreen.tsx # Main markets listing screen
└── store/
└── preferences.ts # Zustand store for app preferences
```
## Key Components
### MarketsScreen
The main screen displaying a paginated list of cryptocurrencies with:
- Pull-to-refresh functionality
- Pagination controls
- Loading states
- Error handling
### CoinRow
Individual coin display component showing:
- Coin icon and name
- Current price
- 24h price change (color-coded)
### API Integration
- Uses CoinGecko's public API
- Implements proper error handling
- Configurable pagination and currency preferences
## Available Scripts
- `yarn start` - Start the Metro bundler
- `yarn ios` - Run on iOS simulator
- `yarn android` - Run on Android emulator
- `yarn test` - Run tests
- `yarn lint` - Run ESLint
## Configuration
The app uses the following default settings:
- Currency: USD
- Items per page: 25
- API timeout: 15 seconds
These can be modified in the preferences store.
## Development
The project follows React Native best practices:
- TypeScript for type safety
- Functional components with hooks
- Proper separation of concerns
- Clean component architecture
## Contributing
1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request
## API Usage
This app uses the CoinGecko API which is free for public use. No API key is required for basic market data.
## Performance
- Efficient data caching with React Query
- Optimized FlatList rendering
- Minimal re-renders with proper state management
- Image caching for coin icons