React Native data not updating when firebase updated - reactjs

Question

I am working on a project, I have done it 99%, but there's a problem.
Why the data doesn't change when I updated it?
In firebase the data has changed but my list still displays the previous data.
This is my code:
import React from 'react';
import { StyleSheet, Text, View, ListView,TouchableOpacity,Image,Alert,ActivityIndicator } from 'react-native';
import { Button, List, ListItem } from 'native-base'
import firebase from '../routes/set';
var data = []
export default class Menu extends React.Component {
constructor(props) {
super(props);
this.ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 })
this.state = {
listViewData: data,
loading:false
}
}
componentWillMount() {
var that = this
firebase.database().ref('/user').on('child_added', function (data) {
var newData = [...that.state.listViewData]
newData.push(data)
that.setState({ listViewData: newData })
})
}
async deleteRow(data,secId, rowId, rowMap) {
await firebase.database().ref('user/' + data.key).set(null)
rowMap[`${secId}${rowId}`].props.closeRow();
var newData = [...this.state.listViewData];
newData.splice(rowId, 1)
this.setState({ listViewData: newData });
}
render() {
return (
this.state.listViewData<1?<ActivityIndicator/>:
<View style={styles.container}>
<List
enableEmptySections
dataSource={this.ds.cloneWithRows(this.state.listViewData)}
renderRow={(data,secId,rowId,rowMap)=>
<ListItem>
<TouchableOpacity onLongPress={()=>
Alert.alert(null,'data',
[
{text:'delete',onPress:()=>this.deleteRow( data,secId, rowId, rowMap)},
{text:'edit',onPress:()=>this.props.navigation.navigate('Edit',{data:data,secId:secId,rowId:rowId,rowMap:rowMap})},
{text:'cancel',onPress:()=>null}
])
}>
<View style={{flexDirection:'row', marginLeft:20,marginTop:20}}>
<Image source={data.val().avatarSource} style={{width:50,height:50,borderRadius:30}}/>
<View style={{flexDirection:'column',marginLeft:20}}>
<Text> {data.val().name}</Text>
<Text> {data.val().age}</Text>
<Text> {data.val().gender}</Text>
<Text> {data.val().dob}</Text>
</View>
</View>
</TouchableOpacity>
</ListItem>
}
renderRightHiddenRow={( secId, rowId, rowMap,data) =>
<Button full danger onPress={() => this.deleteRow(secId, rowId, rowMap, data)}>
</Button>
}
/>
<TouchableOpacity onPress={()=>this.props.navigation.navigate('Daftar')}>
<Text>Insert</Text>
</TouchableOpacity>
</View>
);
}m
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
},
});