AddContactForm.js

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { reduxForm } from 'redux-form'
import { validate as validateEmail } from 'email-validator'

import QuickAddPersonForm from './QuickAddPersonForm'
import ExpandedAddContactForm from './ExpandedAddContactForm'
import CollapsedAddContactForm from './CollapsedAddContactForm'

class AddContactForm extends Component {
  static propTypes = {
    expanded: PropTypes.bool,
    isAddingPersonQuickly: PropTypes.bool,
    setFormSubmitHandler: PropTypes.func,
    handleSubmit: PropTypes.func.isRequired
  }

  componentDidMount() {
    this.props.setFormSubmitHandler(this.props.handleSubmit)
    
    Promise.all([
      this.props.fetchContactClassOptions,
      this.props.fetchContactSourceOptions,
      this.props.fetchContactSubscriptionOptions
    ])
  }

  render() {
    const { expanded, isAddingPersonQuickly, ...rest } = this.props

    if (isAddingPersonQuickly && !expanded) {
      return <QuickAddPersonForm />
    }

    return expanded
      ? <ExpandedAddContactForm {...rest} />
      : <CollapsedAddContactForm {...rest} />
  }
}

const validate = values => {
  const errors = {}

  errors.firstName = !values.firstName ? 'First name is required' : undefined

  errors.lastName = !values.lastName ? 'Second name is required' : undefined

  errors.email = !values.email
    ? 'Email is required'
    : !validateEmail(values.email) ? 'Email is invalid' : undefined

  return errors
}

export default reduxForm({
  form: 'addContact',
  validate
})(AddContactForm)

AddContactScreen.js

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { Actions } from 'react-native-router-flux'

import {
  Container,
  Content,
  NavBar,
  ButtonSecondary,
  AddContactForm
} from 'components'

import styles from './styles'

export default class AddContactScreen extends Component {
  static propTypes = {
    style: PropTypes.object,
    isAddingPersonQuickly: PropTypes.bool
  }

  static defaultProps = {
    isAddingPersonQuickly: false
  }

  static renderNavigationBar = props => (
    <NavBar
      dark
      title={props.title}
      leftButtonType="cancel"
      onLeftButtonPress={Actions.pop}
      rightButtonType="save"
      onRightButtonPress={AddContactScreen.handleSaveButtonPress}
    />
  )

  static handleSaveButtonPress() {
    Actions.pop()
  }

  state = {
    isFormExpanded: false
  }

  handleExpandButtonPress = () => {
    this.setState(prevState => ({ isFormExpanded: !prevState.isFormExpanded }))
  }

  /* is set in AddContactForm.componentDidMount() */
  handleFormSubmit = null

  render() {
    const { isFormExpanded } = this.state
    return (
      <Container>
        <Content
          contentContainerStyle={styles.contentContainer}
          style={styles.content}
        >
          <AddContactForm
            expanded={isFormExpanded}
            isAddingPersonQuickly={this.props.isAddingPersonQuickly}
            setFormSubmitHandler={handler => {
              this.handleFormSubmit = handler
            }}
          />
          <ButtonSecondary
            onPress={this.handleExpandButtonPress}
            label={isFormExpanded ? 'QUICK ENTRY' : 'ADD MORE'}
            iconName={isFormExpanded ? 'chevron-up' : 'chevron-down'}
            style={styles.expandButton}
          />
        </Content>
      </Container>
    )
  }
}

AddContactScreenContainer.js

import { connect } from 'react-redux'
import { createStructuredSelector } from 'reselect'

import {
  fetchContactClassOptions,
  fetchContactSourceOptions,
  fetchContactSubscriptionOptions
} from 'store/entities/contact/actions'

import {
  getContactClassOptions,
  getContactSourceOptions,
  getContactSubscriptionOptions
} from 'store/entities/contact/selectors'

import { AddContactForm } from 'components'

const mapStateToProps = createStructuredSelector({
  contactClassOptions: getContactClassOptions,
  contactSourceOptions: getContactSourceOptions,
  contactSubscriptionOptions: getContactSubscriptionOptions
})

export default connect(mapStateToProps, {
  fetchContactClassOptions,
  fetchContactSourceOptions,
  fetchContactSubscriptionOptions
})(AddContactForm)