import React, { Component } from 'react';
import NavigationBar from 'react-native-navbar'
import { Button } from 'native-base';
import {
  AppRegistry,
  StyleSheet,
  Text,
  TextInput,
  View,
  ScrollView,
  ReactNative,
  findNodeHandle,
  SegmentedControlIOS,
  Image,
  Switch,
  DatePickerIOS,
  Navigator,
  TouchableHighlight,
  AlertIOS,
  AsyncStorage,
} from 'react-native'

class Registration extends Component {
  constructor(props) {
    super(props);
    this.state = {first_name: '', last_name: '', photo_url: '', payment_url: ''};
  }

  navigate(routeName) {
    this.props.navigator.push({
      name: routeName
    });
  }

  inputFocused(refName) {
    setTimeout(() => {
      let scrollResponder = this.refs.scrollView.getScrollResponder();
      scrollResponder.scrollResponderScrollNativeHandleToKeyboard(
        findNodeHandle(this.refs[refName]),
        110, //additionalOffset
        true
      );
    }, 50);
  }

  render() {
    return (
      <View>
        <NavigationBar
            title={{ title:  'TipTap!' , tintColor:  'black' , }}
            leftButton={{ title: 'Back', tintColor: 'black', handler: this.navigate.bind(this, "main")} }
            style={{ backgroundColor:  "#D3D3D3" , }}
            statusBar={{ tintColor:  "white" , }}
        />

        <ScrollView style={{padding: 50}} ref='scrollView'>
        <TextInput
         ref='FirstName'
         style={{fontSize: 20, height: 50, borderColor: 'gray', borderWidth: 2, padding: 3, marginTop: 1}}
         placeholder=" First Name"
         onChangeText={(text) => this.setState({first_name: text})}
         onSubmitEditing={(event) => {
           this.refs.LastName.focus();
         }}
       />
       <TextInput
         ref='LastName'
         style={{fontSize: 20, height: 50, borderColor: 'gray', borderWidth: 2, padding: 3, marginTop: 1}}
         placeholder=" Last Name"
         onChangeText={(text) => this.setState({last_name: text})}
         onSubmitEditing={(event) => {
           this.refs.PhotoUrl.focus();
         }}
         onFocus={this.inputFocused.bind(this, 'LastName')}
        />
       <TextInput
         ref='PhotoUrl'
         style={{fontSize: 20, height: 50, borderColor: 'gray', borderWidth: 2, padding: 3, marginTop: 1}}
         placeholder=" Photo URL"
         onChangeText={(text) => this.setState({photo_url: text})}
         onSubmitEditing={(event) => {
           this.refs.PaymentUrl.focus();
         }}
         onFocus={this.inputFocused.bind(this, 'PhotoUrl')}
         />
       <TextInput
         ref='PaymentUrl'
         style={{fontSize: 20, height: 50, borderColor: 'gray', borderWidth: 2, padding: 3, marginTop: 1, marginBottom: 1}}
         placeholder=" Payment URL"
         onChangeText={(text) => this.setState({payment_url: text})}
         onFocus={this.inputFocused.bind(this, 'PaymentUrl')}
       />

          <Button large success block
            onPress={this.registerTippee.bind(this)}>
            Submit Registration
          </Button>

        </ScrollView>
      </View>
    );
  }

  registerTippee() {
    var that = this
    fetch("https://tiptap-api.herokuapp.com/tippees", {
      method: "POST",
      headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    }, body: JSON.stringify({tippee: that.state})})
    .then((response) => response.json())
    .then((responseJson) => {
      AsyncStorage.setItem(
        'beacons',
        JSON.stringify(responseJson.beacons),
        () => that.navigate("active")
      )
    })
    .done();
  }
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

export default Registration

@@ -3085,24 +3085,115 @@
 rTippee() %7B%0A
+    if (this.state.first_name && this.state.last_name && this.state.payment_url)%0A      %7B%0A  
     var that
@@ -3200,16 +3200,18 @@
  = this%0A
+  
     fetc
@@ -3264,16 +3264,18 @@
 %7B%0A      
+ 
+ 
 method: 
@@ -3288,16 +3288,18 @@
 ,%0A      
+  
 headers:
@@ -3307,16 +3307,18 @@
 %7B%0A      
+ 
+ 
 'Accept'
@@ -3339,16 +3339,18 @@
 /json',%0A
+  
       'C
@@ -3386,16 +3386,18 @@
 on'%0A    
+  
 %7D, body:
@@ -3436,16 +3436,18 @@
 ate%7D)%7D)%0A
+  
     .the
@@ -3479,24 +3479,26 @@
 json())%0A    
+  
 .then((respo
@@ -3517,16 +3517,18 @@
 %7B%0A      
+ 
+ 
 AsyncSto
@@ -3549,16 +3549,18 @@
         
+  
 'beacons
@@ -3570,16 +3570,18 @@
         
+ 
+ 
 JSON.str
@@ -3610,16 +3610,18 @@
 acons),%0A
+  
         
@@ -3645,17 +3645,17 @@
 te(%22
-active
+main
 %22)%0A
+  
     
@@ -3662,19 +3662,23 @@
   )%0A    
+  
 %7D)%0A
+  
     .don
@@ -3682,16 +3682,118 @@
 done();%0A
+    %7D else %7B%0A      AlertIOS.alert(%0A        %22Missing required fields!%22,%0A        %22- Team TipTap%22)%0A    %7D%0A
   %7D%0A%7D%0A%0A%0A

Update registration functionality to allow for validation