useEffect(() => {
  todoRef.orderBy('createAt', 'desc').onSnapshot((querySnapshot) => {
    const todos = [];
    querySnapshot.forEach((doc) => {
      const { heading } = doc.data();
      todos.push({ id: doc.id, heading });
    });
    setTodos(todos);
  });
}, []);

//dealate a todo from firebase database

const dealateTodo = (todos) => {
  todoRef
    .doc(todos, id)
    .delete()
    .then(() => {
      // Show a successful alert after deleting
      alert('Deleted Successfully');
    })
    .catch((error) => {
      alert(error);
    });
};

// add a todo
const addTodo = (todo) => {
  // checking is there a todo in here
  if (addData && addData.length > 0) {
    // get the timestamp
    const timestamp = firebase.firestore.FieldValue.serverTimestamp();
    const data = {
      heading: addData,
      createdAt: timestamp,
    };
    todoRef
      .add(data)
      .then(() => {
        setAddData('');
        Keyboard.dismiss();
      })
      .catch((error) => {
        alert(error);
      });
  }
};

return (
  <View style={styles.flex_1}>
    <ScrollView
      data={todos}
      renderItem={({ item }) => (
        <View>
          <Pressable
            style={styles.container}
            onPress={() => navigation.navigate('Detail', { item })}
          >
            <FontAwesome
              name='trash'
              color='red'
              onPress={() => dealateTodo(item)}
              style={styles.todoIcon}
            />
            <View style={styles.innerContainer}>
              <Text style={styles.itemHeading}>
                [item.Heading[0].toUpperCase()   item.heading.slice(1)]
              </Text>
            </View>
          </Pressable>
        </View>
      )}
    />
    <View style={styles.formContainer}>
      <TextInput
        style={styles.txt_input}
        placeholder='Enter Task Title'
        placeholderTextColor='#aaaaaa'
        onChangeText={(heading) => setAddData(heading)}
        value={addData}
        underlineColorAndroid='transparent'
        autoCapitalize='none'
      />
      <TouchableOpacity style={styles.button} onPress={addTodo}>
        <Text style={styles.buttonText}> </Text>
      </TouchableOpacity>
    </View>
  </View>
);

I wrote This code to display the Data stored in the firebase but it doesn't display can anyone help? please! (comment if you need the full file)

CodePudding user response：

You are using a ScrollView and try to use it like a FlatList. The ScrollView does not define a renderItem or data prop. Use a FlatList or use the map function to map over todos.

Furthermore, you need to add {} around code that you are calling for objects within a component not [].

Here is a version using FlatList.

<FlatList
      data={todos}
      renderItem={({ item }) => (
        <View>
          <Pressable
            style={styles.container}
          >
          
            <View style={styles.innerContainer}>
              <Text style={styles.itemHeading}>
                {item.Heading[0].toUpperCase()   item.heading.slice(1)}
              </Text>
            </View>
          </Pressable>
        </View>
      )}
    />

Here is a version using ScrollView and map.

<ScrollView>
     {
       todos.map(item => <View>
          <Pressable
            style={styles.container}
          >
          
            <View style={styles.innerContainer}>
              <Text style={styles.itemHeading}>
                {item.Heading[0].toUpperCase()   item.heading.slice(1)}
              </Text>
            </View>
          </Pressable>
        </View>)
     }
    </ScrollView>

CodePudding user response：

pls check if the data is successfully stored on firebase firestore or realtime db etc?