Textinput minimum length React native

Question

Is there a way to limit the textinput between a minimum length and maximum length. Suppose I want to limit the textinput length between 5 and 15, how do I do that ?

when will the checking happen? during text change? during submit? or during component mount? for max, there's a `maxLength` prop for TextInput components... (https://facebook.github.io/react-native/docs/textinput#maxlength) — arjayosma, Feb 19 '19 at 08:19
There is a prompt on button click where user can input an alphanumeric serial code , that code should be either 5-15 in length. And in that prompt there is an OK button, on button click I need to validate it whether the entered input is alphanumeric and is in length. — Vinay N, Feb 19 '19 at 08:26
Then what's preventing you from implementing that? You could get the text and check whether the length is within that range. Or you could implement the `maxLength` prop and only check for minimum length — Andreas, Feb 19 '19 at 08:29

score 5 · Accepted Answer · answered Feb 19 '19 at 08:31

Consider adding the following code in your component:

<TextInput onTextChange={this.onTextChange} maxLength={15} ... />
<Button onPress={this.onPress} ... >Submit</Button>

onTextChange = text => {
   this.setState({text : text});
}

onPress = () => {
   const {text} = this.state;

   if(text.length < 5) {
      console.log('Your text is less than what is required.');
   }
}

score 0 · Answer 2 · answered Feb 19 '19 at 08:51

You can do it using redux-form, following below steps

we.js

module.exports = {

    reqMsg: 'Required',

    maxLength: max => value => value && value.length > max ? `Must be ${max} characters or less` : undefined,

    minValue: min => value => value && value.length < min ? `Must be at least ${min} characters` : undefined,
  };

validations.js

import { reqMsg, maxLength, minValue } from './we';
module.exports = {
    //Validation
    required: value => value ? undefined : reqMsg,

    maxLength15: maxLength(15),

    minValue5: minValue(5)
};

UserCreateForm.js

import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form';
import { Item, Input, CheckBox, ListItem, Spinner, Icon } from 'native-base';
import { required, minValue5, maxLength15} from './validations';


const renderField = ({ secureTextEntry, iconType, iconName, keyboardType, placeholder, meta: { touched, error, warning }, input: { onChange, ...restInput } }) => {
    return (
        <View>
            <Item error={touched && !!error} rounded>
                <Icon type={iconType} name={iconName} />
                <Input secureTpickerStyleextEntry={JSON.parse(secureTextEntry)} keyboardType={keyboardType}
                    onChangeText={onChange} {...restInput} placeholder={placeholder} autoCapitalize='none'>
                </Input>
                {touched && !!error && <Icon name='close-circle' />}
            </Item>
                {touched && (!!error && <Text>{error}</Text>)}
        </View>
    );
};

class UserComponent extends Component {

    render() {

        return (

                <Field name="Name" iconType="SimpleLineIcons" iconName="user" secureTextEntry="false" keyboardType="default" placeholder="FirstName LastName NikeName" component={renderField}
                    validate={[required, minValue5, maxLength15]}
                />
        );
    }
}

const UserCreateForm = reduxForm({
    form: USER_CREATE_FORM // a unique identifier for this form
})(UserComponent);

export default UserCreateForm;

score 0 · Answer 3 · answered Feb 19 '19 at 08:56

Previous comment is also Good, but it have more time and space complexity. For this overcome use this code .

<TextInput onTextChange={this.onTextChange} maxLength={15} ... />

onTextChange=()=>{

 if (value ==^[a-zA-Z0-9]{5,15}$) {
        alert( "Input is valid\n");
    } else {
        alert( "Input is invalid\n");
    }
}

this code help me use this code, you can also reset the limit length, change the value here 5 :- minimum 15:- maximum value.

Textinput minimum length React native

3 Answers3