I tried to do a to-do app using react-native but this error came I tried a lot of ways but I don't know how to fix it please help me to solve it. I used firebase as a database.
I tried to do a to-do app using react-native but this error came I tried lot of ways but I don't know how to fix it please help me to solve it. I used firebase as a database.
import { StyleSheet, Text, View, Alert, Button, ScrollView, TextInput } from 'react-native';import * as firebase from 'firebase';import "firebase/database";import CheckBox from 'react-native-check-box';const firebaseConfig = { apiKey: "AIzaSyCsGDNm-4J6P18hIGdlMFIIIIaVHzg9gig", authDomain: "psss-1b4b6.firebaseapp.com", databaseURL: "https://psss-1b4b6.firebaseio.com", projectId: "psss-1b4b6", storageBucket: "psss-1b4b6.appspot.com", messagingSenderId: "614005604871", appId: "1:614005604871:web:3926c52f08ffc37dcc20a2"};// Initialize Firebasefirebase.initializeApp(firebaseConfig);export const db = app.database();const ToDoItem = ({todoItem: {todoItem: name, done}, id}) => { const [doneState, setDone] = useState(done); const onCheck = () => { setDone(!doneState); db.ref('/todos').update({ [id]: { todoItem: name, done: !doneState, }, }); }; return (<View style={styles.todoItem}><CheckBox checkBoxColor="skyblue" onClick={onCheck} isChecked={doneState} disabled={doneState} /><Text style={[styles.todoText, {opacity: doneState ? 0.2 : 1}]}> {name}</Text></View> );};const [doneState, setDone] = useState(false);const onCheck = () => { setDone(!doneState);};class App extends React.Component { constructor() { super(); this.state = { todos: {}, presentToDo: '', }; } componentDidMount() { db.ref('/todos').on('value', querySnapShot => { let data = querySnapShot.val() ? querySnapShot.val() : {}; let todoItems = {...data}; this.setState({ todos: todoItems, }); }); } addNewTodo() { db.ref('/todos').push({ done: false, todoItem: this.state.presentToDo, }); Alert.alert('Action!', 'A new To-do item was created'); this.setState({ presentToDo: '', }); } clearTodos() { db.ref('/todos').remove(); } render() { let todosKeys = Object.keys(this.state.todos); return (<ScrollView style={styles.container} contentContainerStyle={styles.contentContainerStyle}><View> {/*Empty view: will contain to-do items soon*/}</View><TextInput placeholder="Add new Todo" value={this.state.presentToDo} style={styles.textInput} onChangeText={e => { this.setState({ presentToDo: e, }); }} onSubmitEditing = {this.addNewTodo} /><Button title="Add new To do item" onPress={this.addNewTodo} color="lightgreen" /><View style={{marginTop: 20}}><Button title="Clear todos" onPress={this.clearTodos} color="red" /></View><View> {todosKeys.length > 0 ? ( todosKeys.map(key => (<ToDoItem key={key} id={key} todoItem={this.state.todos[key]} /> )) ) : (<Text>No todo item</Text> )}</View></ScrollView> ); }}export default App;const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: 'white', }, contentContainerStyle: { alignItems: 'center', }, textInput: { borderWidth: 1, borderColor: '#afafaf', width: '80%', borderRadius: 5, paddingHorizontal: 10, marginVertical: 20, fontSize: 20, }, todoItem: { flexDirection: 'row', marginVertical: 10, alignItems: 'center', }, todoText: { borderColor: '#afafaf', paddingHorizontal: 5, paddingVertical: 7, borderWidth: 1, borderRadius: 5, marginRight: 10, minWidth: '50%', textAlign: 'center', },});