How to capitalize words in input field in React native? Code Example

In order to capitalize words in input field in React Native, we need to use autoCapitalize prop of <TextInput> component.

There are various possible values of autoCapitalize –

1. characters – To capitalize all characters.
2. words – First character of each word will be capitalized.
3. sentences – Each sentence will start with capital letter.
4. none – No auto capitalization.

Code Example

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

const SimpleTextInput = () => {
  const [text1, onChangeText1] = React.useState("");
  const [text2, onChangeText2] = React.useState("");
  const [text3, onChangeText3] = React.useState("");
  const [text4, onChangeText4] = React.useState("");
  
  return (
    <SafeAreaView>
      <View style={styles.container}>
        <TextInput
          style={styles.input}
          onChangeText={onChangeText1}
          value={text1}
          autoCapitalize={'none'}
        />

        <TextInput
          style={styles.input}
          onChangeText={onChangeText2}
          value={text2}
          autoCapitalize={'sentences'}
        />

        <TextInput
          style={styles.input}
          onChangeText={onChangeText3}
          value={text3}
          autoCapitalize={'words'}
        />

        <TextInput
          style={styles.input}
          onChangeText={onChangeText4}
          value={text4}
          autoCapitalize={'characters'}
        />
        
      </View>
      
    </SafeAreaView>
  );
};

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

export default SimpleTextInput;

Output –

In the above image we are displaying 4 sets of mobile phones and 4 input fields in each phone. The first phone is entering data in first input field, second in second field and so on.

The interesting thing is that the keyboard is showing all small characters in first phone as we clicked on input field. This shows that it won’t auto capitalize any character. This is because we are setting autoCapitalize=none for first TextInput in our code at line 17.

For second phone the keyboard is showing capital letters. But in the input field we have word Sentence. It means S was capital and then everything small but after the period, keyboard started showing capital letters again. It means only the first character of sentence will be capital. This is because of code autoCapitalize=sentences in line 24.

In third frame, the capital keyboard is showing after a word. So it is capitalizing first character of each word. Due to autoCapitalize=words in third input field at line 31.

And the fourth frame is showing capital keyboard for all characters. We are setting autoCapitalize=characters for fourth input field at line 38.

Live Demo

Conclusion

Depending on your use case, you can adopt different strategies to auto capitalize the text entered by users in input field. React native provides autoCapitalize prop for TextInput component to help you design this functionality.