Membuat Daftar Image di React Native

install react native

1. Buatlah Directory project11 di drive c
2. Masuk ke Directory project11
3. lakukan instalasi project reacnative didalam project11 dengan menjalankan perintah pada command promp dibawah ini

npx create-expo-app project3

5. setelah instalasi selesai replace isi file pada directory App\[tabs]\index.tsx dengan contoh di bawah ini

Contoh Kode: Menampilkan Banyak Gambar

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

const App = () => {
  // Daftar URL gambar
  interface ImageItem {
    id: string;
    uri: string;
  }
  const images = [
    { id: '1', uri: 'https://www.starstudio.co.id/uploads/products/20230710141254-2023-07-10products141245.jpg' },
    { id: '2', uri: 'https://placekitten.com/250/300' },
    { id: '3', uri: 'https://placekitten.com/300/300' },
    { id: '4', uri: 'https://placekitten.com/350/300' },
    { id: '5', uri: 'https://placekitten.com/400/300' },
    { id: '6', uri: 'https://placekitten.com/450/300' },
  ];

  // Render item untuk FlatList
  const renderItem = ({ item }: { item: ImageItem }) => (
    <View style={styles.imageContainer}>
      <Image source={{ uri: item.uri }} style={styles.image} />
      <Text style={styles.caption}>Image {item.id}</Text>
    </View>
  );

  return (
    <View style={styles.container}>
      <FlatList
        data={images}
        keyExtractor={(item) => item.id}
        renderItem={renderItem}
        numColumns={2} // Tampilkan gambar dalam 2 kolom
        contentContainerStyle={styles.listContainer}
      />
    </View>
  );
};

// Gaya untuk komponen
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f8f8f8',
    padding: 10,
  },
  listContainer: {
    alignItems: 'center',
  },
  imageContainer: {
    margin: 10,
    backgroundColor: '#fff',
    borderRadius: 8,
    overflow: 'hidden',
    elevation: 3, // Bayangan di Android
    shadowColor: '#000', // Bayangan di iOS
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
  },
  image: {
    width: 150,
    height: 150,
    resizeMode: 'cover',
  },
  caption: {
    textAlign: 'center',
    padding: 5,
    fontSize: 14,
    color: '#333',
  },
});

export default App;

Penjelasan:

1. Data Gambar:

   • images adalah array objek yang berisi id dan uri gambar. Anda bisa mengganti URL gambar dengan URL lain atau menggunakan gambar lokal.

2. FlatList:

   • data: Sumber data (array gambar).
   • renderItem: Fungsi yang menentukan bagaimana setiap item (gambar) akan ditampilkan.
   • numColumns: Mengatur jumlah kolom dalam grid.

3. Image:

   • Menggunakan komponen Image untuk menampilkan gambar dari URL melalui prop source={{ uri: item.uri }}.

4. Styling:

   • Gambar ditampilkan dengan margin, radius, dan bayangan untuk tampilan menarik.

Hasil:

Gambar ditampilkan dalam format grid 2 kolom, dengan teks deskripsi di bawah setiap gambar. Anda bisa menambahkan lebih banyak gambar ke array images untuk menguji performa aplikasi.

Jika Anda memiliki banyak gambar, gunakan pagination atau lazy loading untuk meningkatkan performa.