add form elements and trigger message alert after submitting successfully

MyNewContainer.js

import React, { Component } from 'react'
import { Alert, ListView, BackHandler } from 'react-native' // add Alert and ListView
import { Container, Text, Header, Content, Form, Item, Input, Label, Button, Icon, Picker } 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,
      }),
      selected2: undefined,
      username: undefined, 
      password: undefined
    };
    this.itemsRef = this.getRef().child('items');
  }
  
  onValueChange2(value: string) {
    this.setState({
      selected2: value
    });
  }

  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 (
      <Container>
        <Header />
        <Content>
          <Form>
            <Item stackedLabel>
              <Label>Username</Label>
              <Input onChangeText={(username) => this.setState({ username })}
                value={this.state.username} />
            </Item>
            <Item stackedLabel last>
              <Label>Password</Label>
              <Input secureTextEntry={true} onChangeText={(password) => this.setState({ password })}
                value={this.state.password}/>
            </Item>
            <Picker
              mode="dropdown"
              iosIcon={<Icon name="ios-arrow-down-outline" />}
              placeholder="Select your SIM"
              placeholderStyle={{ color: "#bfc6ea" }}
              placeholderIconColor="#007aff"
              style={{ width: undefined }}
              selectedValue={this.state.selected2}
              onValueChange={this.onValueChange2.bind(this)}
            >
              <Picker.Item label="Wallet" value="key0" />
              <Picker.Item label="ATM Card" value="key1" />
              <Picker.Item label="Debit Card" value="key2" />
              <Picker.Item label="Credit Card" value="key3" />
              <Picker.Item label="Net Banking" value="key4" />
            </Picker>
            <Button block onPress={this._addItem.bind(this)}>
              <Text>Primary</Text>
            </Button>
          </Form>
        </Content>
      </Container>
    )
  }

  _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: "test" })
            this.itemsRef.push({ 
              username: this.state.username,
              password: this.state.password,
              selected2: this.state.selected2 
            }).then(function () { _renderMessage() })
          }
        },
      ]
    );
  }


  _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 _renderMessage = (text) => {
  Alert.alert(
    'Success',
    null,
    [
      { text: 'OK', onPress: () => console.log('Cancel Pressed'), style: 'cancel' },
    ]
  );
}

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

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

export default connect(mapStateToProps, mapDispatchToProps)(MyNewContainer)