Comment obtenir des données de la base de données Firebase Realtime avec React Native?

J'essaie d'obtenir une base de données DATA FireBase Realtime. Je peux montrer des données avec console.log () mais je ne peux pas montrer dans la liste des plats. J'ai essayé différentes manières de résoudre ce problème. Mais, je ne pouvais trouver aucune solution certaine. Ici, mon arbre Json en Firebase:

p>

ici, mon code : P>

const NotesList = (props) => {

  const { colors } = useTheme();
  const styles = customStyles(colors);

  const user = auth().currentUser
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(false);

  const getData = () => {
    firebase.database().ref(`notes/`).on('value', function (snapshot) {
        console.log(snapshot.val())
    });
  }

  useEffect(() => {
    setTimeout(() => {
      setData(getData);
      setLoading(true);
    }, 1000);
  }, []);
  
  const renderItem = ({ item }) => {
    return (
      <View style={{ marginRight: 10, marginLeft: 10 }}>
        <TouchableOpacity>
          <NoteCard title={item.noteTitle} icerik={item.noteDetails} date={item.timestamp} />
        </TouchableOpacity>
      </View>
    );
  };
  const split = () => {
    let icerik = data.map((item, key) => item.icerik);
    return icerik.slice(0, 1) + '...';
  };
  return (
    <View style={styles.container}>
      <StatusBar barStyle="light-content" />
      
      <NoteSearchBar />
      {!loading ? (
        <View style={{ alignItems: 'center' }}>
          <ActivityIndicator color="#ff5227" />
        </View>
      ) : (
          <FlatList
            data={data}
            numColumns={2}
            renderItem={renderItem}
            keyExtractor={(item, index) => index.toString()}
          />
        )}
      <TouchableOpacity
        style={styles.addButton}
        onPress={() => props.navigation.navigate('AddNote')}>
        <Plus width={40} height={40} fill="white" margin={10} />
      </TouchableOpacity>
    </View>
  );
};