Question 303374 in React native Question posted in
The official React Native documentation can be found here.

React Native focus underline

How can I remove the white bar on focus of my TextInput ? I have tried to removed it with underlineColor but I still see it

<TextInput
  style={[styles.input, styles.textArea]}
  placeholder="Raison de l'absence"
  value={reason}
  onChangeText={setReason}
  underlineColor="transparent"
  underlineColorAndroid="transparent"
  autoFocus={false}
/>;

I am using MD3DarkTheme from react-native-paper

textArea: {
        borderColor: 'transparent',
    },

input: {
        width: '100%',
        height: 40,
        borderWidth: 1,
        borderRadius: 5,
        marginBottom: 15,
        paddingLeft: 10,
        justifyContent: 'center',
        color: PaperDarkTheme.colors.text,
    },

Solution : According to the documentation I had to change activeUnderlineColor

White Bar

Tags:

2

Answers


  1. 0

    By passing primary color as transparent in the theme prop you can get of underline from TextInput.

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

<TextInput
  style={[styles.input, styles.textArea]}
  placeholder="Raison de l'absence"
  value={reason}
  onChangeText={setReason}
  underlineColor="transparent"
  underlineColorAndroid="transparent"
  outlineColor="transparent"
  autoFocus={false}
  theme={{ colors: { primary: "transparent" } }} // add this
/>;
    Login or Signup to reply.
  2. 0 
    import React from 'react';
import { TextInput, DefaultTheme } from 'react-native-paper';

const MyTextInput = ({ value, onChangeText, placeholder }) => {
  const customTextInputTheme = {
    ...DefaultTheme,
    colors: {
      ...DefaultTheme.colors,
      primary: 'transparent',
      underlineColor: 'transparent',
    },
  };

  return (
    <TextInput
      style={{ marginBottom: 15 }}
      theme={customTextInputTheme}
      label={placeholder}
      value={value}
      onChangeText={onChangeText}
    />
  );
};

export default MyTextInput;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search