ProjectForm.js

import React, { Component } from 'react';
import { View, Text, Button, ScrollView, FlatList, TextInput, StyleSheet } from "react-native";
import ProjectFormRF from './ProjectFormRF';
import { connect } from 'react-redux';
import { SearchText, Close_edit, Open_edit, CreateItem, ViewItem, getAllItems, EditItem, DeleteItem } from '../../src/action/project';
import Modal from 'react-native-modal';
import TabProject from '../TabProject';
import AppButton from './../AppButton';
import ButtonIconText from './../ButtonIconText';
import * as RootNavigation from '../../RootNavigation';


class ProjectForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      text: '',
      data: [],
      isModalVisible: false,
    };
  }

  componentDidMount() {
    this.props.ViewItem(this.props.data.id);
    this.setState({ data: this.props.projectReducer.projects })
  }


  handleSubmit = async ({ id, name, type_id, category_id }) => {
    if (this.props.projectReducer.image_name != undefined && this.props.projectReducer.image_name != null) {
      await wait();
      if (id == undefined) {
        const data = { "name": name, "type_id": type_id, "category_id": category_id, "company_id": this.props.data.id, "sequence": 0, 'is_succeed': 0, 'image_path': this.props.projectReducer.image_name };
        this.props.CreateItem(data);
      }
      else {
        const data = { "id": id, "name": name, "type_id": type_id, "category_id": category_id, "company_id": this.props.data.id, "sequence": 0, 'is_succeed': 0, 'image_path': this.props.projectReducer.image_name };
        this.props.EditItem(data);
      }
      this.props.Close_edit();
    } else {
      alert("กรุณาอัพโหลดรูปก่อน");
    }
  }

  
  render() {

    return (

      <View style={{ width: '100%', height: '100%' }}>
           <ProjectFormRF company_id={this.props.data.id} initialValues={this.props.projectReducer.data} onSubmit={this.handleSubmit} />
      </View>

    );


  }
}
const styles = StyleSheet.create({

  MainContainer: {
    justifyContent: 'center',
    flex: 1,
    margin: 5,

  },

  row: {
    fontSize: 18,
    padding: 12
  },

  textInput: {

    textAlign: 'center',
    height: 42,
    borderWidth: 1,
    borderColor: '#009688',
    borderRadius: 8,
    backgroundColor: "#FFFF"

  }
});
const mapStateToProp = (state) => {
  return {
    projectReducer: state.projectReducer,

  }
}
const mapDispatchToProp = {
  CreateItem, getAllItems, Open_edit, Close_edit, EditItem, ViewItem, SearchText
};
export default connect(mapStateToProp, mapDispatchToProp)(ProjectForm);

index.js

 import { reduxForm } from 'redux-form';
import ProjectFormView from './ProjectFormView';

const FORM = 'project';

const validate = ({id,company_id, name,image_path,type_id, category_id}) => {
  //alert("type_id"+type_id);
  const errors = {};
  if (name === undefined) {
    errors.name= 'Required';
  } else if (name.trim() === '') {
    errors.name = 'Must not be blank';
  }
  if (type_id === undefined) {
    errors.type_id= 'Required';
  } 
  if (category_id === undefined) {
    errors.category_id= 'Required';
  } 
 
  return errors;
};

const ProjectFormRF = reduxForm({
  form: FORM,
  validate,
})(ProjectFormView);

export default ProjectFormRF;

ProjectFormView.js

 import { PropTypes } from 'prop-types';
import React, { Component } from 'react';
import { Button, Text, View } from 'react-native';
import { Field } from 'redux-form';
import RFTextView from '../../../RFTextInput';
import {RFDropdown} from '../../../RFDropDown';
import RFHiddenView from '../../../RFHiddenInput';
import styles from './styles';
import { GetLabel } from '../../../../src/action/api';
import AppButton from './../../../AppButton';
import * as ImagePicker from 'expo-image-picker';
import RFProjectImagePicker from '../../../RFProjectImagePicker';
import ButtonIconText from './../../../ButtonIconText';



class ProjectFormView extends Component {
  constructor(props) {
    super(props);
    this.state = {
      tdata: [],
      cdata: [],
      value: "",
    };
  }
  componentDidMount() {
   
   
    GetLabel("type/getlabel", "")  ///connect to server
      .then(result => {
    
        this.setState({ tdata: result });
      })
      .catch(error => {
       
      });

      GetLabel("category/getlabel", this.props.company_id)  ///connect to server
      .then(result => {
     
        this.setState({ cdata: result });
      })
      .catch(error => {
       
      });  
  }


  render() {
    return (  
      <View style={{width:"100%",height:"100%"}} >
     
       <View style={{ flexDirection: "column", justifyContent: "center", alignItems: "flex-start" }}>


         <View style={{ marginBottom: 20, display: "flex", flexDirection: "row", justifyContent: "center", alignItems: "flex-start" }}>
           <Field
            component={RFHiddenView}

            name="id"
            style={{ width: 0, height: 0 }}
            disabled={this.props.submitting}

          />
          

         </View>

         <View style={{ flexDirection: "row" }}>

           <Text style={{ fontSize: 20 }}> ชื่อ : </Text>
           <Field
            component={RFTextView}
            title="Projec Name:"
            name="name"
            disabled={this.props.submitting}
            placeholder="Your Project Name"
          />

         </View>
         <View style={{ flexDirection: "row",paddingTop:10,paddingBottom:10 }}>
             <Field
              name="image_path"
           
              component={RFProjectImagePicker}
              disabled={this.props.submitting}
            />
          
           </View>


           <Text style={{ fontSize: 20, height:30,width:120}} >ประเภท : </Text>
           <Field
            style={{backgroundColor: "#FFFF00"}}
            component={RFDropdown}
            name="type_id"
            data={this.state.tdata}
            disabled={this.props.submitting}
            
          />

           <Text style={{ fontSize: 20 }} > หมวดหมู่ :  </Text>
           <Field
            component={RFDropdown}
            name="category_id"
            data={this.state.cdata}
            disabled={this.props.submitting}
           
          />
       
       </View>
       <View style={{ flexDirection: "column", justifyContent: "center", alignItems: "center" }}>
        {!this.props.submitting && this.props.submitFailed &&  <Text style={styles.rootFailed}>Submit Failed </Text>}
        {!this.props.submitting && this.props.submitSucceeded &&  <Text style={styles.rootSucceeded}>Submit Succeeded </Text>}
         <AppButton
          disabled={!this.props.valid || this.props.submitting}
          onPress={this.props.handleSubmit}
          title="บันทึก"
        />

       </View>

    </View >
    );
  }
}



ProjectFormView.propTypes = {
  handleSubmit: PropTypes.func.isRequired,
  submitFailed: PropTypes.bool.isRequired,
  submitSucceeded: PropTypes.bool.isRequired,
  submitting: PropTypes.bool,
  valid: PropTypes.bool.isRequired,
};

ProjectFormView.defaultProps = {
  submitting: false,
};

export default ProjectFormView;