CODEWITHSUNDEEP
javascriptreactjsreact-nativereact-native-elements
Max
Max

Reputation: 442

How to change the text color in TextInput?

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;

Upvotes: 1

Views: 6172

Answers (2)

isa_toltar
isa_toltar

Reputation: 594

this expression is not gonna work because it is not actual css

const styles = StyleSheet.create({
  Input: {
   top: "2%",
  width: "70%",
  left: "15%",
  justifyContent: "center",
  alignItems: "center",
 },});

According to react native elements docs you have to pass style object that contains custom css properties.You can achieve like this.

function LoginScreen() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const styles={ color:'red' };

  return (
   <View style={styles.Input}>
    <Input 
      placeholder="Comment" 
      leftIcon={{ type: 'font-awesome', name: 'comment' }} 
      style={styles} 
      onChangeText={value => this.setState({ comment: value })} 
    />
  </View>
);

}

Upvotes: 0

Devendra
Devendra

Reputation: 127

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" />}
/>

Upvotes: 1

Related Questions