Styling the react-native-paper component in react native

Question

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.

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

==> You can also approve my answer for no more extended need for support from the StackOverflow community & also for my motivation. — Ankit Vora, Dec 28 '22 at 09:42

score 2 · Accepted Answer · answered Dec 28 '22 at 11:02

2

add these property of TextInput

activeUnderlineColor="white" underlineColor="transparent"

answered Dec 28 '22 at 11:02

ABDULLAH

550
3
13

Ankit Vora · Answer 2 · 2022-12-28T10:38:30.660

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

edited Dec 28 '22 at 10:38

answered Dec 28 '22 at 09:35

Ankit Vora

568
2
12

Even after adding the `borderBottomWidth:0` I am still getting that line – Tanish Gupta Dec 28 '22 at 10:07
Is there anything I need to add – Tanish Gupta Dec 28 '22 at 10:07
@TanishGupta can you please remove the width and let me know if is it visible or not... – Ankit Vora Dec 28 '22 at 10:10
its still the same – Tanish Gupta Dec 28 '22 at 10:15
@TanishGupta i have edited my answer please change it and it's works fine,let me know if not worked. – Ankit Vora Dec 28 '22 at 10:39

Styling the react-native-paper component in react native

2 Answers2