Scribd
Upload
4 views

code_tugas03

Uploaded by

erwyen ER
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
4 views

code_tugas03

Uploaded by

erwyen ER
Copyright
© © All Rights Reserved
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