Paradise

GuestInfo.js

import React from 'react';
import {
  View,
  Text,
} from 'react-native';

import { ButtonGroup } from 'react-native-elements'
import FloatLabelTextInput from '../../components/react-native-floating-label-text-input';

import { Global } from './Styles';
import Colors from '../../constants/Colors';

const styles = Global;

export default class GuestInfo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      gender: 0
    }
  }

  componentWillMount() {
    this.props.state(this.state);
  }

  updateIndex = (gender) => {
    this.setState({gender})
    this.props.state(this.state);
  }

  changeValue = (type, e) => {
    if (type == "name") {
      this.setState({ name: e })
      this.props.state(this.state);
    } else if (type == "contact") {
      this.setState({ contact: e })
      this.props.state(this.state);
    } else if (type == "email") {
      this.setState({ email: e })
      this.props.state(this.state);
    }
  }

  render() {
    const { gender } = this.state
    const buttons = ['Male', 'Female']
    return (
      <View style={[styles.guestInfoContainer, styles.shadowBox]}>
        <Text style={[styles.text, styles.header]}>Guest Information</Text>
        <View>
          <View style={styles.floatinLabelTextInputContainer}>
            <FloatLabelTextInput
              style={styles.guestInfoTextInput}
              placeholder={"Name"}
              onChangeTextValue={(e)=>this.changeValue('name', e)}
              />
          </View>
          <View style={styles.genderContainer}>
            <Text style={[styles.text, styles.genderText]}>Gender</Text>
            <ButtonGroup
              selectedBackgroundColor={Colors.accentColor}
              selectedTextStyle={{color: 'white'}}
              containerStyle={styles.questionButtonGroup}
              onPress={this.updateIndex}
              selectedIndex={gender}
              buttons={buttons} />
          </View>
          <View style={styles.floatinLabelTextInputContainer}>
            <FloatLabelTextInput
              style={styles.guestInfoTextInput}
              placeholder={"Contact Number"}
              keyboardType={"phone-pad"}
              onChangeTextValue={(e)=>this.changeValue('contact', e)}
              />
          </View>
          <View style={styles.floatinLabelTextInputContainer}>
            <FloatLabelTextInput
              style={styles.guestInfoTextInput}
              autoCapitalize={'none'}
              placeholder={"Email"}
              keyboardType={"email-address"}
              onChangeTextValue={(e)=>this.changeValue('email', e)}
              />
          </View>
        </View>
      </View>
    )
  }
}

index.js

import React from 'react';
import {
  View,
  ScrollView,
  KeyboardAvoidingView,
  StyleSheet,
  Text,
  Slider,
  Platform,
  TouchableOpacity,
  TextInput,
} from 'react-native';

import { ButtonGroup } from 'react-native-elements'
import Parse from 'parse/react-native';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'
import FloatLabelTextInput from '../../components/react-native-floating-label-text-input';
import RadioForm, {RadioButton, RadioButtonInput, RadioButtonLabel} from 'react-native-simple-radio-button';

import Colors from '../../constants/Colors';
import Layout from '../../constants/Layout';

import Debug from '../../components/Debug';
import GuestInfo from './GuestInfo';
import Question from './Question';
import OtherQuestion from './OtherQuestion'
import { Global } from './Styles';

const styles = Global;

export default class CommentScreen extends React.Component {
  static route = {
    navigationBar: {
      title: 'Customer Feedback',
    },
  }

  constructor(props) {
    super(props);
    this.state = {
      value: 0,
    };

    Parse.initialize("ParadiseAlpacaAppID");
    Parse.serverURL = 'https://bold-hope-150511.appspot.com/parse';
  }

  changeState = (data) => {
    this.setState({ data });
  }

  render() {
    return (
      <KeyboardAwareScrollView
        contentContainerStyle={styles.container}
        keyboardDismissMode="on-drag">

        <Debug state={this.state} />

        <GuestInfo state={this.changeState} />

        <View style={[styles.textQuestion, styles.shadowBox, { backgroundColor: Colors.primaryColor }]}>
          <Text style={{ fontWeight: '500', fontSize: 20, color: 'white' }}>Rate 5 for excellence</Text>
        </View>

        <Question />

        <OtherQuestion/>
        
        {/* Checkbox for yes i want to receive promotion */}
        <SubmitButton/>
      </KeyboardAwareScrollView>
    );
  }
}

class SubmitButton extends React.Component {
  render() {
    return(
      <TouchableOpacity style={styles.submitButton}>
          <Text style={styles.submitButtonText}>Submit</Text>
      </TouchableOpacity>
    )
  }
}