How to change underline color of text input in React Native?

Android adds an underline in input fields. If we are not styling the field and using the native styles only then we will see the underline, tapping on which will activate the keyboard.

To change the color of this underline, we can use underlineColorAndroid prop of TextInput in React native. You can pass any valid color value.

This styling is specific to Android so the prop has no effects on iOS input fields.

Code Example

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

const UnderlineColorTextInput = () => {
  const [text, onChangeText] = React.useState("https://akashmittal.com");

  return (
    <SafeAreaView>
      <View style={styles.container}>
        <Text>{`underlineColorAndroid={'#FF0000'}`}</Text>
        <TextInput
          style={styles.input}
          onChangeText={onChangeText}
          value={text}
          underlineColorAndroid={'#FF0000'}
        />

        <Text>{`underlineColorAndroid={'#00FF00'}`}</Text>
        <TextInput
          style={styles.input}
          onChangeText={onChangeText}
          value={text}
          underlineColorAndroid={'#00FF00'}
        />
      </View>
    </SafeAreaView>
  );
};

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

export default UnderlineColorTextInput;

Output –

From the image you can see that we changed the underline color of both input fields. The first one is set to red and second one to green.

In the code we are setting underlineColorAndroid={'#FF0000'} in line 15 and underlineColorAndroid={'#00FF00'} in line 23.

Live Demo

Conclusion

For Android apps, you can change the underline color of text input by using underlineColorAndroid prop of <TextInput> component. You can set it to any valid color value.