GuestInfo.js

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

import { ButtonGroup, CheckBox } 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,
      mailing: false,
      address: this.props.address,
    }
  }

  componentWillReceiveProps() {
    this.setState({address: this.props.address})
  }

  componentWillMount() {
    this.props.setData('guestInfo', this.state);
  }

  updateIndex = (gender) => {
    this.setState({ gender }, ()=>this.props.setData('guestInfo', this.state));
  }

  changeValue = (type, e) => {
    this.setState({ [type]: e }, ()=>this.props.setData('guestInfo', 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 style={styles.genderContainer}>
            <Text style={[styles.text, styles.genderText]}>Address</Text>
            <TouchableOpacity 
              style={{alignSelf: 'stretch', borderWidth: 1, padding: 12, marginTop: 10, borderRadius: 5, borderColor: 'gray', backgroundColor: '#f5f5f5'}}
              onPress={() => this.props.openDialog()}>
              <Text>{this.state.address}</Text>
            </TouchableOpacity>
          </View>
        </View>
        <CheckBox
          containerStyle={{ backgroundColor: 'white', borderWidth: 0 }}
          title='Yes, i want to be on the mailing list of Paradise Group promotion and events'
          onPress={() => {
            this.setState({ mailing: !this.state.mailing }, () => this.props.setData('guestInfo', this.state));
          } }
          checked={this.state.mailing}
          />
      </View>
    )
  }
}

index.js

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

import {
  NavigationStyles
} from '@exponent/ex-navigation';

import Parse from 'parse/react-native';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'
import PopupDialog, { DialogTitle, ScaleAnimation } from 'react-native-popup-dialog';

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;

const address = [
  {
    'area': 'KL',
    location: [
      'Bukit Bintang',
      'Titiwangsa',
      'Setiawangsa',
      'Wangsa Maju',
      'Kepong',
      'Cheras',
      'Ampang',
      'Sentul',
      'Brickfields',
    ]
  },
  {
    'area': 'Selangor',
    location: [
      'SS2',
      'Kelana Jaya',
      'Seapark',
      'Taman Tun',
      'Ara Damansara',
      'Kota Damansara',
      'Bandar Sunway',
      'Puchong',
      'Sri Petaling',
      'Gombak',
      'Sungai Buloh',
      'Kajang',
      'Serdang',
      'Shah Alam',
      'Klang',
    ]
  }
]

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

  constructor(props) {
    super(props);
    this.state = {
      scroll: true,
      address: 'Click here to select your address'
    };

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

  _setData = (key, data) => {
    this.setState({ [key]: data })
  }

  _openDialog = () => {
    this.popupDialog.openDialog();
  }

  _closeDialog = () => {
    this.popupDialog.closeDialog();
  }

  _setAddress = (value) => {
    this.setState({address: value});
  }

  render() {
    return (
      <KeyboardAwareScrollView
        scrollEnabled={this.state.scroll}
        contentContainerStyle={styles.container}
        keyboardDismissMode="on-drag">
        <GuestInfo setData={this._setData} openDialog={this._openDialog} address={this.state.address}/>
        <InfoBar/>        
        <Question setData={this._setData}/>
        <OtherQuestion setData={this._setData}/>
        <SubmitButton />
        <PopupDialog
          width={Layout.window.width-100}
          height={500}
          dialogTitle={<DialogTitle title={'Your address'} />}
          ref={(popupDialog) => { this.popupDialog = popupDialog; } }
          dialogAnimation={new ScaleAnimation()}
          >
          <View style={{flex: 1, margin: 10, flexDirection: 'row', justifyContent: 'center'}}>
            {address.map((s, i) => {
              return (
                <Address key={i} addressData={address[i]} closeDialog={this._closeDialog} setAddress={this._setAddress}/>
              )
            })}
          </View>
        </PopupDialog>
      </KeyboardAwareScrollView>
    );
  }
}

class Address extends Component {
  render() {
    let { addressData } = this.props;
    return (
      <View style={{margin: 5}}>
        <Text style={{backgroundColor: 'silver', color: 'white', padding: 10}}>Area: {addressData.area}</Text>
        {addressData.location.map((s, i) => {
          return (
            <TouchableOpacity 
              key={i} 
              style={{padding: 2}} 
              onPress={()=> {
                this.props.setAddress(addressData.location[i]);
                this.props.closeDialog();
              } }>
              <Text>{addressData.location[i]}</Text>
            </TouchableOpacity>
          )
        })}
      </View>
    )
  }
}

class InfoBar extends Component {
  render() {
    return (
      <View style={[styles.textQuestion, styles.shadowBox, { backgroundColor: Colors.primaryColor }]}>
        <Text style={{ fontWeight: '500', fontSize: 20, color: 'white' }}>Rate 5 for excellence</Text>
      </View>
    )
  }
}

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