delete from firebase real time database

Question

it makes a flat list of rooms and inside those rooms are messages. So I want to long press on a specific room in the list, and when i do this, I want to delete a room.

onLongPress={() =>  this.roomsRef.remove({item})}

I thought the above would work, but it fails. I put it in the render row part. It comes up saying Reference.remove failed. first argument must be a valid function. Like inside these rooms it has messages and I think thats where im going wrong but im not sure how to go about it. thank you

 'use strict'
    import React, { Component, useEffect } from 'react';
    import { Text, Image, TextInput, TouchableHighlight, StatusBar, FlatList, View, TouchableOpacity, Dimensions, LogBox, Alert } from 'react-native';
// import firebaseApp from './firebaseConfig.js';
import firebaseApp from '../config/firebasekeys';
import {SafeAreaView} from 'react-native-safe-area-context'
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'

import {Avatar} from 'react-native-elements'
import { color } from 'react-native-reanimated';

const DeviceHeight = Dimensions.get('screen').height
const DeviceWidth = Dimensions.get('screen').width


class Rooms extends Component {
    
    static navigationOptions = {
        title: 'Rooms',
      
    };

    constructor(props) {
        super(props);
            var firebaseDB = firebaseApp.database();
            this.roomsRef = firebaseDB.ref('rooms'); // rooms collection
            this.state = {
            rooms: [],
            newRoom: ''
        }
    }


    // maybe its this.roomsRef.remove(item.name) or maybe its name idk hmmm

    componentDidMount() {
        LogBox.ignoreLogs(['VirtualizedLists should never be nested']); // doing this to ignore the log box error for scroll view
        this.listenForRooms(this.roomsRef);
    }

    listenForRooms(roomsRef) {
        roomsRef.on('value', (dataSnapshot) => {
        var roomsFB = [];
        dataSnapshot.forEach((child) => {
            roomsFB.push({
            name: child.val().name,
            key: child.key
            });
        });
        this.setState({ rooms: roomsFB });
        });
    }

    addRoom() {
        if (this.state.newRoom === '') {
            return
        }
        this.roomsRef.push({ name: this.state.newRoom });
        this.setState({ newRoom: '' });
    }

    openMessages(room) {
        this.props.navigation.navigate("Messages", {roomKey: room.key, roomName: room.name});
    }

    renderRow(item) {
        return (
        <TouchableOpacity 
        
            onPress={() => this.openMessages(item)}
            onLongPress={() =>  this.roomsRef.remove({name:item})}
            
            > 
            

            <Text style={{   
                color: 'orange',
                fontSize: 22,
                }}>{item.name}</Text>
        </TouchableOpacity>

      



        



        )


        
    }

  render() {
        return (
        <SafeAreaView style={styles.container}>
        <StatusBar style="auto"/>
        <KeyboardAwareScrollView>
        
        
            
            
            <View>       
               
                <View >

                    <TextInput>
                        
                        }}
                        placeholder={"enter chat name"}
                        onChangeText={(text) => this.setState({newRoom: text})}
                        value={this.state.newRoom}
                    />
                    <TouchableHighlight
                        style={{
                            marginRight: 20
                        }}
                        onPress={() => this.addRoom()}
                        
                        >
                       >
                    </TouchableHighlight>

                </View>

                <View>
                <FlatList
                    data={this.state.rooms}
                    renderItem={({item}) => (this.renderRow(item)
                    )}


                />

                 
                </View>

                    {/* <View>
                    <FlatList
                        data={this.state.rooms}
                        renderItem={({item}) => (this.renderRow(item)
                        )}
                    />

                    </View> */}
            
            </View>

        

        </KeyboardAwareScrollView>
        </SafeAreaView>

        );
    }
}

export default Rooms;

Answer 1

I recommend keeping the reference docs for the API handy as you're developing, as there are quite a few problems you can catch that way. For example, the Reference.remove() method doesn't take an item as its argument (in fact: it typically is called without arguments).

To delete a specific node, you should build a reference to that node, and then call remove() on the reference:

roomsRef.child("keyOfRoomToRemove").remove()