CODEWITHSUNDEEP
androidreactjsreact-nativereact-native-paper
Tanish Gupta
Tanish Gupta

Reputation: 492

Styling the react-native-paper component in react native

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

Upvotes: 3

Views: 1979

Answers (2)

Smarty
Smarty

Reputation: 753

add these property of TextInput

activeUnderlineColor="white" underlineColor="transparent"

Upvotes: 2

Ankit Vora
Ankit Vora

Reputation: 584

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

Upvotes: 1

Related Questions