Hey there! Since you’ve already got the basic FlatList setup from the tutorial, swapping out the dummy data for your Firebase profiles is totally doable with a few key steps. Let’s walk through this together:

Step 1: Confirm Firebase is Set Up #

First, double-check that you’ve initialized Firebase in your React Native project. If you haven’t, you’ll need to connect your app to your Firebase project (but I’m guessing you’ve already done this since you’re working with user profiles!).

Step 2: Fetch Data from Firebase #

We’ll use Firebase Realtime Database’s onValue listener to get real-time updates of your profiles data, then convert it into an array (since FlatList requires an array of data).

First, import the necessary functions:

import { getDatabase, ref, onValue } from "firebase/database";
import { useState, useEffect } from "react";
import { FlatList, View, Text, Image } from "react-native";

Then, set up state to hold your profiles and fetch the data in your component:

const ProfileList = () => {
  const [profiles, setProfiles] = useState([]);

  useEffect(() => {
    // Get reference to your Firebase database
    const db = getDatabase();
    const profilesRef = ref(db, "profiles");

    // Listen for real-time data changes
    const unsubscribe = onValue(profilesRef, (snapshot) => {
      const rawData = snapshot.val();
      if (rawData) {
        // Convert Firebase's object-based data to an array
        // We'll keep the Firebase key as a unique ID for each profile
        const profilesArray = Object.entries(rawData).map(([key, profile]) => ({
          id: key,
          ...profile,
        }));
        setProfiles(profilesArray);
      } else {
        // If there are no profiles, set to empty array
        setProfiles([]);
      }
    });

    // Clean up the listener when the component unmounts
    return () => unsubscribe();
  }, []);

  // ... rest of your component
};

Step 3: Update FlatList to Use Firebase Data #

Now just tweak your existing FlatList to use the profiles state as its data source, and render each profile’s details:

return (
  <FlatList
    data={profiles}
    // Use the unique Firebase key we added for stable rendering
    keyExtractor={(item) => item.id}
    renderItem={({ item }) => (
      <View style={{ padding: 16, flexDirection: "row", alignItems: "center", borderBottomWidth: 1, borderBottomColor: "#eee" }}>
        <Image
          source={{ uri: item.picture }}
          style={{ width: 50, height: 50, borderRadius: 25 }}
        />
        <View style={{ marginLeft: 12 }}>
          <Text style={{ fontSize: 16, fontWeight: "600" }}>
            {item.first} {item.last}
          </Text>
        </View>
      </View>
    )}
  />
);

Quick Tips to Avoid Issues #

• Firebase Security Rules: Make sure your Realtime Database rules allow read access (for development, you can temporarily set ".read": true, but remember to tighten this for production!).
• Static Data Option: If you don’t need real-time updates, replace onValue with get()—call it once in the useEffect and process the data the same way.
• Error Handling: You can add a .catch() to the listener if you want to handle fetch errors, but the above code should work for basic setups.

That’s it! Your FlatList should now pull and display the profiles from Firebase instead of dummy data. If you hit any snags (like data not loading or styling glitches), feel free to share more details and we’ll troubleshoot together.

内容的提问来源于stack exchange，提问作者aBlank