esbenp / react-native-redux-form-example Goto Github PK

return (
  <Form>
    <FieldsContainer>
      <Fieldset label="Contact details">
        <Input name="first_name" label="First name" placeholder="John" />
        <Input name="last_name" label="Last name" placeholder="Doe" />
        <Input name="email" label="Email" placeholder="[email protected]" />
        <Input name="telephone" label="Phone" placeholder="+45 88 88 88 88" />
      </Fieldset>
      <Fieldset label="Shipping details" last>
        <Input name="address" label="Address" placeholder="Hejrevej 33" />
        <Input name="city" label="City" placeholder="Copenhagen" />
        <Input name="zip" label="ZIP Code" placeholder="2400" />
        <Select
          name="country"
          label="Country"
          options={countryOptions}
          placeholder="Denmark"
        />
        <Switch label="Save my details" border={false} name="save_details" />
      </Fieldset>
    </FieldsContainer>
    <ActionsContainer>
      <Button icon="md-checkmark" iconPlacement="right" onPress={handleSubmit(onSubmit)} submitting={submitting}>Save</Button>
    </ActionsContainer>
  </Form>
);

if (!values.first_name) {
  errors.first_name = 'First name is required.';
}

if (!values.last_name) {
  errors.last_name = 'Last name is required.';
}

if (!values.email) {
  errors.email = 'Email is required.';
}

return errors;

import React from 'react'
import { connect } from 'react-redux'
import { Field,reduxForm, formValueSelector, getFormValues, getFormMeta} from 'redux-form'
import { StyleSheet,View,Text,TextInput,TouchableOpacity } from 'react-native'

const  = (props) => {
  const {input} = props
  return (
   <View>
      <TextInput style={styles.input}
            {...props}
            onChangeText={input.onChange}
            onBlur={input.onBlur}
            onFocus={input.onFocus}
             />
    </View>
  )
}

const SigninFormView = props => {
  const { handleSubmit,validate, pristine, reset, submitting } = props
  return (
    <View style={styles.container}>
          <Field name="email" type="email" autoCapitalize="none" autoCorrect={false} keyboardType='email-address' placeholder='Your email' component={} label="Email" />
          <Field name="password" type="password" autoCapitalize="none" autoCorrect={false} secureTextEntry={true} placeholder='Password' component={} label="Password" />
          <TouchableOpacity disabled={pristine || submitting} onPress={handleSubmit}>
            <Text style={styles.button}>Sign In</Text>
          </TouchableOpacity>
    </View>
  )
}

SigninFormView = reduxForm({
  form: 'SignInForm',
})(SigninFormView)

export default SigninFormView

import React from 'react';
import { connect } from 'react-redux'
import { StyleSheet, View, Text, TouchableOpacity } from 'react-native';
import PropTypes from 'prop-types';
import SigninFormView from '../components/SigninFormView'

const showResults = (values) => {
   return new Promise((resolve) => {
    setTimeout(() => {
      console.log('showResults:',values)
      resolve()
    }, 500)
  })
}

const SigninScreen = ({ navigation }) => (
  <View style={styles.container}>
    <SigninFormView onSubmit={showResults}/>
  </View>
);

SigninScreen.propTypes = {
  navigation: PropTypes.object.isRequired,
};