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='[email protected]'
                  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

Lipocaic

Please try to reset the style of the input first. If you google Input reset style you will probably find some css snippets. – Prolongate

Thank you I will and I think I found the answer. I will answer my question soon. – Lipocaic

Answer 1

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

Lipocaic

I want to keep, color of the placeholder different from the border color, but this changes both. Do you have any workaround? – Histaminase

Answer 2

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'
     }
  }
})

Footie

Answer 3

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

Specter

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? – Designation

Answer 4

Use the outlineStyle prop to change the border color of the text input component imported from react-native-paper. Note that this will change both the active and the inactive color for the border.

Usage:

<PaperInput 
  ...
  outlineStyle={{borderColor: 'green'}}
/>

You may also use the outlineColor prop to set just the inactive border color for the input.

<PaperInput 
  ...
  outlineColor={'green'}
/>

Drown