{"id":18614831,"url":"https://github.com/andrewjbateman/react-native-cryptos","last_synced_at":"2025-04-11T00:30:58.137Z","repository":{"id":96860955,"uuid":"389118979","full_name":"AndrewJBateman/react-native-cryptos","owner":"AndrewJBateman","description":":clipboard: Displays crypto-currency API data from CoinGecko. Tutorial code from Fazt Code.","archived":false,"fork":false,"pushed_at":"2022-03-28T17:27:06.000Z","size":614,"stargazers_count":5,"open_issues_count":0,"forks_count":2,"subscribers_count":3,"default_branch":"Main","last_synced_at":"2025-03-25T06:51:15.502Z","etag":null,"topics":["android-studio","androidstudio","api-client","cryptocurrencies","css","expo","expo-cli","fazt","react-native","tutorial-code"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AndrewJBateman.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-07-24T14:31:50.000Z","updated_at":"2022-04-20T07:07:00.000Z","dependencies_parsed_at":"2023-04-06T00:33:31.488Z","dependency_job_id":null,"html_url":"https://github.com/AndrewJBateman/react-native-cryptos","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Freact-native-cryptos","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Freact-native-cryptos/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Freact-native-cryptos/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Freact-native-cryptos/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AndrewJBateman","download_url":"https://codeload.github.com/AndrewJBateman/react-native-cryptos/tar.gz/refs/heads/Main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248322228,"owners_count":21084333,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android-studio","androidstudio","api-client","cryptocurrencies","css","expo","expo-cli","fazt","react-native","tutorial-code"],"created_at":"2024-11-07T03:27:08.992Z","updated_at":"2025-04-11T00:30:58.128Z","avatar_url":"https://github.com/AndrewJBateman.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# :zap: React Native Cryptos\n\n* React-Native app to display cryptocurrency API data\n* Tutorial code from [Fazt Code](https://www.youtube.com/channel/UCMn28O1sQGochG94HdlthbA) - see [:clap: Inspiration](#clap-inspiration) below\n* **Note:** to open web links in a new window use: _ctrl+click on link_\n\n![GitHub repo size](https://img.shields.io/github/repo-size/AndrewJBateman/react-native-cryptos?style=plastic)\n![GitHub pull requests](https://img.shields.io/github/issues-pr/AndrewJBateman/react-native-cryptos?style=plastic)\n![GitHub Repo stars](https://img.shields.io/github/stars/AndrewJBateman/react-native-cryptos?style=plastic)\n![GitHub last commit](https://img.shields.io/github/last-commit/AndrewJBateman/react-native-cryptos?style=plastic)\n\n## :page_facing_up: Table of contents\n\n* [:zap: React Native Cryptos](#zap-react-native-cryptos)\n  * [:page_facing_up: Table of contents](#page_facing_up-table-of-contents)\n  * [:books: General info](#books-general-info)\n  * [:camera: Screenshots](#camera-screenshots)\n  * [:signal_strength: Technologies](#signal_strength-technologies)\n  * [:floppy_disk: Setup](#floppy_disk-setup)\n  * [:computer: Code Example by Fazt Code](#computer-code-example-by-fazt-code)\n  * [:cool: Features](#cool-features)\n  * [:clipboard: Status \u0026 To-do list](#clipboard-status--to-do-list)\n  * [:clap: Inspiration](#clap-inspiration)\n  * [:file_folder: License](#file_folder-license)\n  * [:envelope: Contact](#envelope-contact)\n\n## :books: General info\n\n* Cryptocurrency data from the [CoinGecko API](https://www.coingecko.com/en/api) and does not require an API key\n* React [useEffect hook](https://reactjs.org/docs/hooks-effect.html) used for data fetching\n* React [useState hook](https://reactjs.org/docs/hooks-state.html) used to initialise \u0026 update coins, refeshing and search states\n\n## :camera: Screenshots\n\n![React-Native img](./img/crypto.jpg)\n![React-Native img](./img/react.png)\n\n## :signal_strength: Technologies\n\n* [Expo v44](https://docs.expo.io/) framework \u0026 platform for universal React applications, installed globally\n* [React Native v0.67.4](https://reactnative.dev/) to create native app for Android and iOS\n* [react-native-web v0.17.7](https://www.npmjs.com/package/react-native-web) React Native Components and APIs for the Web.\n* [React v17](https://reactjs.org/) JavaScript library for building user interfaces\n* [Android Studio v4](https://developer.android.com/studio) installed globally, used to simulate Android device\n\n## :floppy_disk: Setup\n\n* Run `npm i` to install dependencies\n* `npm install -g expo-cli --force` to install Expo CLI globally (force option may not be required)\n* Run `npm start` to start expo on a localhost port\n* See `package.json` for the npm commands to create build files etc.\n* Android Studio has to be installed and set up then the AVD Manager is run from the Configure menu\n\n## :computer: Code Example by Fazt Code\n\n* Code by Fazt Code to display Cryptocurrency data. Includes ternery expression to show price change data in green or red\n\n```javascript\nconst CoinItem = ({ coin }) =\u003e (\n  \u003cView style={styles.containerItem}\u003e\n    \u003cView style={styles.coinName}\u003e\n      \u003cImage source={{ uri: coin.image }} style={styles.image} /\u003e\n      \u003cView style={styles.containerNames}\u003e\n        \u003cText style={styles.text}\u003e{coin.name}\u003c/Text\u003e\n        \u003cText style={styles.textSymbol}\u003e{coin.symbol}\u003c/Text\u003e\n      \u003c/View\u003e\n    \u003c/View\u003e\n    \u003cView\u003e\n      \u003cText style={styles.textPrice}\u003e${coin.current_price}\u003c/Text\u003e\n      \u003cText\n        style={[\n          styles.pricePercentage,\n          coin.price_change_percentage_24h \u003e 0\n            ? styles.priceUp\n            : styles.priceDown,\n        ]}\n      \u003e\n        {coin.price_change_percentage_24h.toFixed(2)}%\n      \u003c/Text\u003e\n    \u003c/View\u003e\n  \u003c/View\u003e\n);\n```\n\n## :cool: Features\n\n* Expo bar code used to connect mobile to project. The Expo framework is easy to use.\n* Android Studio simulation on mobile device\n\n## :clipboard: Status \u0026 To-do list\n\n* Status: Working\n* To-do: Nothing.\n\n## :clap: Inspiration\n\n* [Fazt Code: React Native \u0026 CoinGecko | Aplicación de Precios de Criptomonedas](https://www.youtube.com/watch?v=k9ptn9zNHng\u0026t=38s) in Spanish\n\n## :file_folder: License\n\n* N/A\n\n## :envelope: Contact\n\n* Repo created by [ABateman](https://github.com/AndrewJBateman), email: gomezbateman@yahoo.com\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrewjbateman%2Freact-native-cryptos","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandrewjbateman%2Freact-native-cryptos","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrewjbateman%2Freact-native-cryptos/lists"}