Scribd
Upload
4 views3 pages

code_tugas03

Uploaded by

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

code_tugas03

Uploaded by

erwyen ER
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

import axios from 'axios';

import React, { useEffect, useState } from 'react';


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

const App = () => {


const [cryptoData, setCryptoData] = useState([]);
const [loading, setLoading] = useState(false);

// Fungsi untuk mengambil data


const fetchData = () => {
setLoading(true);
axios
.get('https://api.coinlore.net/api/tickers/')
.then(response => {
setCryptoData(response.data.data);
setLoading(false);
})
.catch(error => {
console.error('Error fetching data:', error);
setLoading(false);
});
};

// Mengambil data saat komponen pertama kali dimuat


useEffect(() => {
fetchData();
}, []);

// Render item dalam daftar


const renderItem = ({ item }) => (
<View style={styles.item}>
<View style={styles.row}>
<View style={styles.column}>
<Text style={styles.label}>Rank</Text>
<Text style={styles.value}>{item.rank}</Text>
</View>
<View style={styles.column}>
<Text style={styles.label}>Name</Text>
<Text style={styles.value}>{item.name}</Text>
</View>
<View style={styles.column}>
<Text style={styles.label}>USD</Text>
<Text style={styles.value}>{parseFloat(item.price_usd).toFixed(2)}</Text>
</View>
</View>
</View>
);

return (
<View style={styles.container}>
{/* Tombol Refresh */}
<TouchableOpacity style={styles.refreshButton} onPress={fetchData}>
<Text style={styles.refreshText}>Refresh</Text>
</TouchableOpacity>

{/* Daftar Cryptocurrency */}


{loading ? (
<Text style={styles.loadingText}>Loading...</Text>
) : (
<FlatList
data={cryptoData}
keyExtractor={item => item.id.toString()}
renderItem={renderItem}
/>
)}
</View>
);
};

/**
* Defines the styles for the cryptocurrency app's user interface.
* This includes styles for the container, refresh button, list items, and various
text elements.
*/

const styles = StyleSheet.create({


container: {
flex: 1,
padding: 10,
backgroundColor: '#f0f0f0',
},
refreshButton: {
alignSelf: 'center',
backgroundColor: 'blue',
paddingVertical: 10,
paddingHorizontal: 20,
borderRadius: 5,
marginBottom: 20,
},
refreshText: {
color: '#fff',
fontWeight: 'bold',
fontSize: 16,
textAlign: 'center',
},
item: {
backgroundColor: '#f8e8b1',
marginVertical: 8,
padding: 10,
borderRadius: 5,
borderWidth: 1,
borderColor: '#d4c18b',
},
row: {
flexDirection: 'row',
justifyContent: 'space-between',
},
column: {
flex: 1,
alignItems: 'center',
},
label: {
fontSize: 16,
fontWeight: 'bold',
color: 'black',
},
value: {
fontSize: 18,
color: 'black',
marginTop: 5,
},
loadingText: {
textAlign: 'center',
fontSize: 18,
color: 'gray',
},
});

export default App;

You might also like