Scribd
Upload
4 views2 pages

React Native Crypto List App

The document shows code for a React Native app that fetches cryptocurrency data from an API and displays the name, symbol and price of the top 4 cryptocurrencies. It uses the Coinlore API to get ticker data and displays it in a list.

Uploaded by

Rahma Daniarti
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4 views2 pages

React Native Crypto List App

The document shows code for a React Native app that fetches cryptocurrency data from an API and displays the name, symbol and price of the top 4 cryptocurrencies. It uses the Coinlore API to get ticker data and displays it in a list.

Uploaded by

Rahma Daniarti
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

// CryptoList.

j s
import React, { useState, useEffect } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import axios from 'axios';

const CryptoList = () => {


const [cryptos, setCryptos] = useState([]);

useEffect(() => {
[Link]('[Link]
.then(response => {
setCryptos([Link](0, 4)); // Ambil hanya 4 koin
pertama
})
.catch(error => {
[Link]('Error fetching data: ', error);
});
}, []);

return (
<View style={[Link]}>
{[Link](crypto => (
<View key={[Link]} style={[Link]}>
<Text style={[Link]}>{[Link]}</Text>
<Text style={[Link]}>{[Link]}</Text>
<Text style={[Link]}>{crypto.price_usd}</Text>
</View>
))}
</View>
);
};

const styles = [Link]({


container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
cryptoContainer: {
marginBottom: 10,
},
name: {},
symbol: {
fontSize: 16,
},
price: {
fontSize: 16,
fontWeight: 'bold',}});
// [Link]

import React from 'react';

import { View, StyleSheet } from 'react-native';

import CryptoList from './CryptoList';const App = () => {

return (<View style={[Link]}><CryptoList />

</View>);}const styles = [Link]({container: {

flex: 1,

backgroundColor: '#fff',

alignItems: 'center',

justifyContent: 'center',},});

export default App;

Pastikan emulator atau perangkat fisik terhubung dan jalankan aplikasi dengan perintah `npx
react-native run-android` atau `npx react-native run-ios`.

You might also like