How to limit number of characters in input field in React Native?

Limiting maximum number of characters in input field is required for applications where business logic demands so. For example, Twitter is famous for its short posts and they limit the number of characters for a tweet. So, they need to set the maximum limit.

In React native, we can set the limit using maxLength prop of <TextInput> component. Provide the maximum count for allowed characters as value.

This prop works for both Android and iOS applications.

You should not use JavaScript logic for it because that may create flickers.

Code Example

import React from "react";
import { SafeAreaView, StyleSheet, TextInput, View } from "react-native";

const MaxLengthTextInput = () => {
  const [text, onChangeText] = React.useState("");
  
  return (
    <SafeAreaView>
    <View style={{paddingTop: 30}}>
      <TextInput
        style={styles.input}
        onChangeText={onChangeText}
        value={text}
        maxLength={10}
      />
      
    </View>
      
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  input: {
    height: 40,
    margin: 12,
    borderWidth: 1,
    padding: 10,
  },
});

export default MaxLengthTextInput;

Output –

From the above image your can see that the input field stopped typing after 1234567891. The last digit is 1 because we were typing 10 but maximum length was set to be 10 and it finished at 1 only. This is working in both iOS (left) and Android (right) phones.

In our code we are setting the maxLength=10 in line 14.

Live Demo

Conclusion

In conclusion we can restrict the maximum length of characters in input field using maxLength prop. It’s a prop of <TextInput> component and works with both iOS and Android.