redux-form: [V6] I can't access to form props in react-native

I don’t understand how can I access to form props. I used formValueSelector as suggested the documentation, but doesn’t work. Where is my mistake?

LoginForm.js

'use strict';

import React from 'react';
import { Field, reduxForm, formValueSelector } from 'redux-form';
import { TextInput, View, TouchableHighlight, Text } from 'react-native';
import { connect } from 'react-redux';

class LoginForm extends React.Component {

    handeSubmit(email, password){ alert(`email: ${email} and password: ${password}`)};

    render() {

        return (
            <View>
                <Field
                    name="email"
                    component={TextInput}
                    placeholder="Email"
                />
                <Field
                    name="password"
                    component={TextInput}
                    placeholder="Password"
                    secureTextEntry={true}

                />
                <TouchableHighlight onPress={() => this.handeSubmit(this.props.email, this.props.password)}>
                    <Text>Submit</Text>
                </TouchableHighlight>
            </View>
        );
    }
}


LoginForm = reduxForm({
    form: 'loginForm'
})(LoginForm);

const selector = formValueSelector('loginForm');

function mapStateToProps(state){
    return {
        email: selector(state, 'email'),
        password: selector(state, 'password'),
    }
}

LoginForm = connect(mapStateToProps)(LoginForm);

export default LoginForm;

LoginPage.js

'use strict';

import React from 'react';
import {View} from 'react-native';
import Container from '../../components/Container';
import LoginForm from '../../components/forms/LoginForm';

class LoginPage extends React.Component {
  render() {
    return (
        <Container>
            <LoginForm/>
          </Container>
    );
  }
}



export default LoginPage;

screenshot_20160831-161930

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 23 (3 by maintainers)

Most upvoted comments

I found the solution. TextInput doesn’t work with redux-form as it is. It need a component than pass the redux-form props like this:

class TextField extends React.Component {
      render(){
        const { input: { value, onChange } } = this.props; <----add this!!!
        return (
                <TextInput
                    style={[styles.textInput]}
                    onChangeText={(value) => onChange(value)} <----add this!!!
    add this!!!---> value={value} underlineColorAndroid="transparent" selectTextOnFocus={true} {...this.props}
                />
        );
    }
}

Instead of import TextInput inside the forms, import the custom TextField.

screenshot_20160831-190650

AlessandroCorradini on Aug 31, 2016

I see most of are posting their solution regarding react native and redux form. I am posting either, thinking that my code might help other

Here is my working code with output

import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form';
import { View, Text, TextInput } from 'react-native';
import { Button } from 'react-native-elements';


const renderTextField = ({ input, label, meta: { touched, error }, ...custom }) => (
        <TextInput
            placeholder={label}
            onChangeText={(value) => input.onChange(value)}
            {...input}
        />
);

class DeviceIO extends Component {
    onSubmit = (props) => {
        console.log('props', props);
    }
    render() {
        const { previousPage, handleSubmit } = this.props;
        return (
            <View>
                    <Field
                        name="deviceName"
                        label="Device Name"
                        component={renderTextField}
                    />
                    <Field
                          name="deviceTimeout"
                          component={renderTextField}
                          label="Device Timeout"
                    />
                    <View style={{ marginTop: 12}}>
                        <Button
                            raised
                            icon={{ name: 'ios-arrow-round-back-outline', type: 'ionicon' }}
                            iconLeft
                            title='Back'
                            backgroundColor='#ff4c4c'
                            onPress={() => previousPage()}
                        />
                        <Button
                            raised
                            icon={{ name: 'ios-arrow-round-forward-outline', type: 'ionicon' }}
                            iconRight
                            title='Next'
                            backgroundColor='#ff4c4c'
                            onPress={handleSubmit(props => this.onSubmit(props))}
                        />
                    </View>
            </View>
        );
    }
}

export default reduxForm({
  form: 'createDevice',
  destroyOnUnmount: false,
})(DeviceIO);

Sorry the design is terrible right now 😃

Output of Form

Thanks, Happy Coding

Tushant on Nov 7, 2016

Wow, I was stuck on trying to use react-native with redux-form, and finally found this thread. Would be great to have a React Native example with this tip, thx!

AdrienLemaire on Sep 9, 2016