Nama : Aldi Sandri
UPBJJ : Padang
Tugas 2 pemograman
1. Komponen CryptoItem (File ini adalah komponen untuk menampilkan setiap item dalam daftar,
yaitu name, symbol, dan price_usd )
2. Tampilan Utama (yaitu tampilan / bentuk hasil program setelah di jalankan)
3. Menghubungkan Komponen ke Aplikasi (File ini adalah entry point utama aplikasi. Di sini, data
diambil dari API menggunakan axios, kemudian ditampilkan menggunakan komponen FlatList.)
4. Tambahkan Konfigurasi (berfungsi untuk menjalankan program yang di hubungkan dengan
browser)
Sourcode :
1. src/components/CryptoItem.js
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
const CryptoItem = ({ name, symbol, price }) => {
return (
<View style={styles.container}>
<Text style={styles.name}>{name}</Text>
<Text style={styles.symbol}>{symbol}</Text>
<Text style={styles.price}>${price}</Text>
</View>
);
};
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
justifyContent: 'space-between',
padding: 10,
borderBottomWidth: 1,
borderBottomColor: '#ccc',
},
name: {
fontSize: 16,
fontWeight: 'bold',
},
symbol: {
fontSize: 14,
color: '#555',
},
price: {
fontSize: 14,
color: '#28a745',
},
});
export default CryptoItem;
2. src/screens/HomeScreen.js
import React, { useEffect, useState } from 'react';
import { View, FlatList, StyleSheet, ActivityIndicator } from 'react-native';
import axios from 'axios';
import CryptoItem from '../components/CryptoItem';
const HomeScreen = () => {
const [cryptoData, setCryptoData] = useState([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
axios.get('https://api.coinlore.net/api/tickers/')
.then(response => {
setCryptoData(response.data.data);
setLoading(false);
})
.catch(error => {
console.error(error);
setLoading(false);
});
}, []);
if (loading) {
return (
<View style={styles.loadingContainer}>
<ActivityIndicator size="large" color="#0000ff" />
</View>
);
}
return (
<FlatList
data={cryptoData}
keyExtractor={(item) => item.id.toString()}
renderItem={({ item }) => (
<CryptoItem
name={item.name}
symbol={item.symbol}
price={item.price_usd}
/>
)}
contentContainerStyle={styles.list}
/>
);
};
const styles = StyleSheet.create({
list: {
padding: 10,
},
loadingContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
});
export default HomeScreen;
3. App.js
import React from 'react';
import { SafeAreaView, StyleSheet } from 'react-native';
import HomeScreen from './src/screens/HomeScreen';
const App = () => {
return (
<SafeAreaView style={styles.container}>
<HomeScreen />
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#f8f9fa',
},
});
export default App;
4. launch.json
{
"version": "0.2.0",
"configurations": [
{
"name": "Debug Android",
"type": "reactnative",
"request": "launch",
"platform": "android",
"sourceMaps": true,
"cwd": "${workspaceFolder}",
"enableLiveReload": true
},
{
"name": "Debug iOS",
"type": "reactnative",
"request": "launch",
"platform": "ios",
"sourceMaps": true,
"cwd": "${workspaceFolder}",
"enableLiveReload": true
},
{
"name": "Attach to packager",
"type": "reactnative",
"request": "attach",
"cwd": "${workspaceFolder}",
"port": 8081
},
{
"name": "Run Jest Tests",
"type": "node",
"request": "launch",
"program": "${workspaceFolder}/node_modules/jest/bin/jest.js",
"args": ["--watchAll"],
"cwd": "${workspaceFolder}",
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen"
}
]
}
