How to Change the Border Color in TextInput

Question

I want to change the color or the border in this code before the focus I want the color red and on the focus I want the color yellow.

This my work https://prnt.sc/o8evi5

This is the code I have and I am using React Native Paper https://callstack.github.io/react-native-paper/text-input.html

                <TextInput
                  label='Email or username'
                  mode='outlined'
                  theme={{ colors: { underlineColor:'red',}}}
                  style={(this.state.isFocused) ? {borderColor: 'black', borderColor: 'black',} : {fontStyle: 'italic', color: 'white'}} 
                  selectionColor='red'
                  underlineColor='red'
                  placeholder='name@example.com'
                  keyboardType='email-address'
                  underlineColorAndroid='transparent'
                  autoCorrect='false'
                  autoCapitalize='none'
                  onChangeText={formikProps.handleChange('email')}
                  onBlur={formikProps.handleBlur('email')}
                  //autoFocus
                />

I tried this but it didn't gave me what I want https://github.com/callstack/react-native-paper/issues/656

Please try to reset the style of the input first. If you google Input reset style you will probably find some css snippets. — arnonuem, Jun 29 '19 at 20:20
Thank you I will and I think I found the answer. I will answer my question soon. — Maher Aldous, Jun 29 '19 at 20:23

Maher Aldous · Accepted Answer · 2019-06-29T22:30:56.937

28

This code worked inside the TextInput Tag.

theme={{ colors: { primary: 'green',underlineColor:'transparent',}}}

With primary, you can change the border color on focused. Reference: https://github.com/callstack/react-native-paper/issues/656

edited Jun 29 '19 at 22:30

answered Jun 29 '19 at 20:24

Maher Aldous

894
1
10
14

I want to keep, color of the placeholder different from the border color, but this changes both. Do you have any workaround? – yanky_cranky Aug 12 '21 at 10:52

Sourabh Gera · Answer 2 · 2022-03-24T17:29:24.193

import { TextInput } from 'react-native-paper';


<TextInput
    style={{ marginHorizontal: 20 }}
    label='Mobile Otp  '
    mode='outlined'
    secureTextEntry={false}
    underlineColorAndroid={'rgba(0,0,0,0)'}
    text='white'
    direction='rtl'
    maxLength={6}        
    editable={true}
    onChangeText={(text) => { setMobileOtp(text) }}
    value={mobileOtp}
    defaultValue={mobileOtp}
    theme={styles.textInputOutlineStyle}
/>

const styles = StyleSheet.create({
     textInputOutlineStyle:{ 
       colors: { 
          placeholder: 'white', 
          text: 'white', primary: 'white',
          underlineColor:'transparent',    
          background : '#0f1a2b'
     }
  }
})

score 1 · Answer 3 · answered May 14 '23 at 12:53

1

<TextInput
        mode="outlined"
        placeholder={placeholder}
        // label={labelName}
        style={styles.input}
        // numberOfLines={1}
        {...rest}
        left={leftIcon ? left : null}
        right={rightIcon ? right : null}
        outlineColor={outlineColor || 'grey'}
        secureTextEntry={secureTextEntry} //It is used to give * to the field
        theme={{colors: {primary: 'orange'}}} //It is used to change the onFocus border color
      />

answered May 14 '23 at 12:53

vineet dixit

11
1

Thank you for contributing to the Stack Overflow community. This may be a correct answer, but it’d be really useful to provide additional explanation of your code so developers can understand your reasoning. This is especially useful for new developers who aren’t as familiar with the syntax or struggling to understand the concepts. **Would you kindly [edit] your answer to include additional details for the benefit of the community?** – Jeremy Caney May 14 '23 at 19:07

How to Change the Border Color in TextInput

3 Answers3