How to Change the Border Color in TextInput in Expo

When developing React Native applications with Expo, changing the border color of the TextInput component can be achieved in several different ways, depending on the desired styling and effects. Here are some common methods:

Method 1: Directly set the borderColor in the style property of the TextInput component

This is the simplest and most direct approach. For example:

jsx
import React from 'react';
import { TextInput, View } from 'react-native';

const App = () => {
  return (
    <View>
      <TextInput
        style={{
          height: 40,
          margin: 12,
          borderWidth: 1,
          padding: 10,
          borderColor: 'blue' // Set border color to blue
        }}
      />
    </View>
  );
}

export default App;

Method 2: Use state to dynamically change the border color

If you want to change the border color based on user interactions (e.g., when the user begins typing), you can use state to dynamically update the style.

jsx
import React, { useState } from 'react';
import { TextInput, View } from 'react-native';

const App = () => {
  const [borderColor, setBorderColor] = useState('gray');

  return (
    <View>
      <TextInput
        style={{
          height: 40,
          margin: 12,
          borderWidth: 1,
          padding: 10,
          borderColor: borderColor // Use state to control border color
        }}
        onFocus={() => setBorderColor('blue')} // Change color on focus
        onBlur={() => setBorderColor('gray')}  // Restore color on blur
      />
    </View>
  );
}

export default App;

Method 3: Use StyleSheet.create

For cleaner and more reusable code, define styles using StyleSheet.create. This not only improves code readability but also enhances performance.

jsx
import React from 'react';
import { TextInput, View, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  input: {
    height: 40,
    margin: 12,
    borderWidth: 1,
    padding: 10,
    borderColor: 'blue' // Define border color
  }
});

const App = () => {
  return (
    <View>
      <TextInput style={styles.input} />
    </View>
  );
}

export default App;

Summary

With these methods, you can easily set and change the border color of the TextInput component in Expo. Choose the method that best suits your project requirements. In actual projects, you may need to select the appropriate method based on specific design guidelines or user interaction logic to implement this feature.