React Native how change size & color of secureTextEntry inputs

Question

So I have a password input like below :

<TextInput
   name="Password"
   type="password"
   mode="outline"
   secureTextEntry={true}
   style={styles.inputStyle}
   autoCapitalize="none"
   autoFocus={true}       
/>

and have this style applied to it :

inputStyle { 
   fontSize: 30,
   color: '#333',
   fontWeight: '900'
}

But it seems that these styles not actually applied to the input. however once I remove the secureTextEntry={true} props, it will effected. So I guess styling the password ballets is kind of difference, any idea how I can achieve it?

try ``` inputStyle { fontSize: 30, color: '#333', fontWeight: '900', } ``` you forgot a comma between color and fontWeight, i'm sure it is not the issue, this issue existed in previous version of react-native, but it does not exist anymore. can you upgrade the react-native version ? — Rachid Rhafour, Feb 04 '19 at 23:47
That comma was my mistyped here, I have version 0.58.3 installed which is the latest version I guess and still same issue. — Emad Dehnavi, Feb 05 '19 at 10:28
somehow the issue still exist even in latest versions of `react-native` https://github.com/facebook/react-native/issues/22781 — Rachid Rhafour, Feb 05 '19 at 16:19

score 0 · Accepted Answer · answered Feb 07 '19 at 15:40

So for color I used textColor prop which works fine and for some reasons when we pass the fontSize by style in not really overwrite to the default one, so what I did to fix this I define a fontSize prop :

export interface TextInputContainerProps {
    ... // Some other props
    fontSize?: number;
}

and then pass it to TextInput component :

<TextInput {...props} style={[...props.style, { fontSize }]}
    editable={editable} />

React Native how change size & color of secureTextEntry inputs

1 Answers1