How to change the text color in TextInput?

Question

How do I change the text input color inside the TextInput element in react native elements I tried passing the color="red" to the component but for some reason it doesn't work.

Here is the code I used:

import React, { useState } from "react";
import { StyleSheet, View } from "react-native";
import { Text, Button, Input } from "react-native-elements";
import Icon from "react-native-vector-icons/MaterialIcons";
import colors from "../config/colors";

function LoginScreen() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  return (
    <View style={styles.Input}>
      <Input
        style={styles.TextInput}
        placeholder="Your email"
        value={email}
        onChangeText={setEmail}
        autoCapitalize="none"
        autoCorrect={false}
        leftIcon={<Icon name="email" size={20} color="#B3C1B3" />}
      />
      <Input

        secureTextEntry
        placeholder="Your password"
        value={password}
        onChangeText={setPassword}
        autoCapitalize="none"
        autoCorrect={false}
        leftIcon={<Icon name="lock" size={20} color="#B3C1B3" />}
      />
    </View>
  );
}
const styles = StyleSheet.create({
  Input: {
    top: "2%",
    width: "70%",
    left: "15%",
    justifyContent: "center",
    alignItems: "center",
  },
});
export default LoginScreen;

Answer 1

You need to add inputStyle to change the style of the input.

<Input
    style={styles.TextInput}
    inputStyle={{color: 'red'}}    // Add this to your code
    placeholder="Your email"
    value={email}
    onChangeText={setEmail}
    autoCapitalize="none"
    autoCorrect={false}
    leftIcon={<Icon name="email" size={20} color="#B3C1B3" />}
/>