Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Redux-form example with normalize and format
import React from 'react';
import { reduxForm, Field } from 'redux-form';
import { ScrollView, Text, TouchableOpacity } from 'react-native';
import moment from 'moment';
import MyTextInput from './MyTextInput';
/**
* Automatically adds the dashes required by the specified phone format and limits the input to ten characters
*/
const phoneFormatter = (number) => {
if (!number) return '';
// NNN-NNN-NNNN
const splitter = /.{1,3}/g;
number = number.substring(0, 10);
return number.substring(0, 7).match(splitter).join('-') + number.substring(7);
};
/**
* Remove dashes added by the formatter. We want to store phones as plain numbers
*/
const phoneParser = (number) => number ? number.replace(/-/g, '') : '';
/**
* Force after min date
*/
const maxDateNormalize = (value, previousValue, values) => {
const momentMinDate = moment(values.minDate, 'MM-DD-YYYY', true);
const momentMaxDate = moment(value, 'MM-DD-YYYY', true);
if (!momentMinDate.isValid() || !momentMaxDate.isValid()) {
return value;
}
if (!momentMaxDate.isAfter(momentMinDate)) {
return momentMinDate.add(1, 'd').format('MM-DD-YYYY');
}
return value;
};
/**
* Force before max date
*/
const minDateNormalize = (value, previousValue, values) => {
const momentMaxDate = moment(values.maxDate, 'MM-DD-YYYY', true);
const momentMinDate = moment(value, 'MM-DD-YYYY', true);
if (!momentMinDate.isValid() || !momentMaxDate.isValid()) {
return value;
}
if (!momentMinDate.isBefore(momentMaxDate)) {
return momentMaxDate.subtract(1, 'd').format('MM-DD-YYYY');
}
return value;
};
function MyForm(props) {
return (
<ScrollView keyboardShouldPersistTaps={'handled'}>
<Text>Phone number</Text>
<Field
name={'phoneNumber'}
component={MyTextInput}
placeholder={'NNN-NNN-NNNN'}
format={phoneFormatter}
parse={phoneParser}
/>
<Text>Min date</Text>
<Field
name={'minDate'}
component={MyTextInput}
placeholder={'MM-DD-YYYY'}
normalize={minDateNormalize}
/>
<Text>Max date</Text>
<Field
name={'maxDate'}
component={MyTextInput}
placeholder={'MM-DD-YYYY'}
normalize={maxDateNormalize}
/>
<TouchableOpacity onPress={props.handleSubmit}>
<Text>Submit!</Text>
</TouchableOpacity>
</ScrollView>
);
}
export default reduxForm({
form: 'signIn'
})(MyForm);
@puzant

This comment has been minimized.

Copy link

@puzant puzant commented Sep 29, 2020

Hello, what if I want to pass a parameter to the normalize function like this

normalize={inputValue(fieldName}

it keeps throwing error normalize is undefined

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.