skip to Main Content

I am using the TextInput component of React Native Paper. But I am getting the outline in the UI even though I am putting borderwidth:0.

enter image description here

This doesn’t appears when we are giving the input (when the num-pad is on)

Can someone please tell how to remove this.

render={({field: {onChange, onBlur, value}}) => (
          <TextInput
            keyboardType="decimal-pad"
            autoFocus
            //type= "outlined"
            maxLength={10}
            left={element}
            placeholder="Phone Number"
            style={{
              width: s(250),
              height: s(35),
              borderRadius: s(20),
              backgroundColor: theme.colors.white,
              //borderWidth: 0,
            }}
            onBlur={onBlur}
            theme={{
              roundness: s(20),
            }}
            onChangeText={onChange}
            value={value}
          />
        )}

2

Answers


  1. ==> you need to add this also.

    <TextInput
                mode="outlined"
                outlineColor=theme.colors.white
                keyboardType="decimal-pad"
                autoFocus
                //type= "outlined"
                maxLength={10}
                left={element}
                placeholder="Phone Number"
                style={{
                  width: s(250),
                  height: s(35),
                  borderRadius: s(20),
                  backgroundColor: theme.colors.white,
                  //borderWidth: 0,
                }}
                onBlur={onBlur}
                theme={{
                  roundness: s(20),
                }}
                onChangeText={onChange}
                value={value}
              />
    
    Login or Signup to reply.
  2. add these property of TextInput

    activeUnderlineColor="white"
    underlineColor="transparent"

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search