for firebase practice

MyNewContainer.js

import React, { Component } from 'react'
import { Alert, ListView, BackHandler } from 'react-native' // add Alert and ListView
import { Content, Text } from 'native-base'
import { connect } from 'react-redux'
// Add Actions - replace 'Your' with whatever your reducer is called :)
// import YourActions from '../Redux/YourRedux'

// Styles
// import styles from './Styles/MyNewContainerStyle'

import * as firebase from 'firebase';
const StatusBar = require('../Components/StatusBar');
const ActionButton = require('../Components/ActionButton');
const ListItem = require('../Components/ListItem');
const styles = require('../Components/Styles/styles.js');

// Initialize Firebase
const firebaseConfig = {
  apiKey: "AIzaSyBGl9zIUTNLtzRB3WLr32TVY17jrZRrRSk",
  authDomain: "",
  databaseURL: "https://sooource-33fa3.firebaseio.com/",
  storageBucket: "",
};

const firebaseApp = firebase.initializeApp(firebaseConfig);

class MyNewContainer extends Component {
  // constructor (props) {
  //   super(props)
  //   this.state = {}
  // }
  constructor(props) {
    super(props);
    this.state = {
      dataSource: new ListView.DataSource({
        rowHasChanged: (row1, row2) => row1 !== row2,
      })
    };
    this.itemsRef = this.getRef().child('items');
  }

  getRef() {
    return firebaseApp.database().ref();
  }

  listenForItems(itemsRef) {
    itemsRef.on('value', (snap) => {

      // get children as an array
      var items = [];
      snap.forEach((child) => {
        items.push({
          title: child.val().title,
          _key: child.key
        });
      });

      this.setState({
        dataSource: this.state.dataSource.cloneWithRows(items)
      });

    });
  }

  componentDidMount() {
    this.listenForItems(this.itemsRef);
    BackHandler.addEventListener('hardwareBackPress', () => {
      this.props.navigation.goBack();
      return true
    })
  }

  render() {
    return (
      <Content>
        <StatusBar title="Grocery List" />

        <ListView
          dataSource={this.state.dataSource}
          renderRow={this._renderItem.bind(this)}
          enableEmptySections={true}
          style={styles.listview} />

        <ActionButton onPress={this._addItem.bind(this)} title="Add" />

      </Content>
    )
  }

  _addItem(text) {
    Alert.alert(
      'Add New Item',
      null,
      [
        { text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel' },
        {
          text: 'Add',
          onPress: (text) => {
            this.itemsRef.push({ title: "someapp" })
          }
        },
      ]
    );
  }

  _renderItem(item) {

    const onPress = () => {
      Alert.alert(
        'Complete',
        null,
        [
          { text: 'Complete', onPress: (text) => this.itemsRef.child(item._key).remove() },
          { text: 'Cancel', onPress: (text) => console.log('Cancelled') }
        ]
      );
    };

    return (
      <ListItem item={item} onPress={onPress} />
    );
  }
}

const mapStateToProps = (state) => {
  return {
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(MyNewContainer)