React Redux Form v0.6.0

React Native Support

React Native form components are now fully supported, so you can freely use the following components with <Field> from react-redux-form/lib/native, without any extra configuration.

• DatePickerIOS
• MapView
• Picker
• PickerIOS
• SegmentedControlIOS
• SliderIOS
• Switch
• TextInput

import { Field } from 'react-redux-form/lib/native';

// in your component's render() method:
<Field model="user.name">
  <TextInput />
</Field>

Check out the docs on React Native and custom components for more information!

Note: You might get Warning: Failed propType warnings when using DatePickerIOS. This is innocuous and related to this React issue.

Immutable.js Support

If you want to use Immutable data structures in your app, or you already have existing reducers with Immutable state, you can now create Immutable model reducers or enhance existing Immutable reducers from react-redux-form/lib/immutable:

import { createStore, combineReducers } from 'redux';
import { createModelReducer } from 'react-redux-form/lib/immutable';
import Immutable from 'immutable';

const initialUserState = Immutable.fromJS({ firstName: '', lastName: '' });

export default createStore(combineReducers({
  'user': createModelReducer('user', initialUserState)
}));

import { modeled } from 'react-redux-form/immutable';
import Immutable from 'immutable';

function existingImmutableReducer(state = Immutable.Map(), action) {
  // ...
}

export default modeled(existingImmutableReducer, 'existing');

Note: Make sure to provide an Immutable initial state for every immutable reducer! This is a good practice in general.

Custom and 3rd-Party Component Support

Along with React Native, RRF now supports using createFieldClass to create adapter <Field> components to handle any 3rd-party component, such as react-bootstrap and material-ui:

import { createFieldClass, controls } from 'react-redux-form';

import TextField from 'material-ui/lib/text-field';
import Slider from 'material-ui/lib/slider';
import Checkbox from 'material-ui/lib/checkbox';

const MaterialField = createFieldClass({
  'TextField': controls.text, // treat TextField as if it were <input type="text" />
  'Slider': (props) => ({
    onChange: (e, val) => props.onChange(val),
    value: props.modelValue
  }),
  'Checkbox': (props) => ({
    onCheck: (e, val) => props.onChange(val),
    checked: !!props.modelValue
  })
});

// in your render() method:
<MaterialField model="foo.bar">
  <TextField />
</MaterialField>

Check out the docs on React Native and custom components for more information!