Scribd
Upload
16 views2 pages

Ice Fontsize 16 Fontweight: 'Bold'

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
16 views2 pages

Ice Fontsize 16 Fontweight: 'Bold'

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
You are on page 1/ 2

// 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(() => {
axios.get('https://api.coinlore.net/api/tickers')
.then(response => {
setCryptos(response.data.data.slice(0, 4)); // Ambil hanya 4 koin
pertama
})
.catch(error => {
console.error('Error fetching data: ', error);
});
}, []);

return (
<View style={styles.container}>
{cryptos.map(crypto => (
<View key={crypto.id} style={styles.cryptoContainer}>
<Text style={styles.name}>{crypto.name}</Text>
<Text style={styles.symbol}>{crypto.symbol}</Text>
<Text style={styles.price}>{crypto.price_usd}</Text>
</View>
))}
</View>
);
};

const styles = StyleSheet.create({


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

import React from 'react';

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

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

return (<View style={styles.container}><CryptoList />

</View>);}const styles = StyleSheet.create({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