Border Around Text Input When Clicked in React Native on Web

Question

I am using React Native and TextInputs. There is a border around the TextInput when I click on it. When I click off, the border disappears. This does not happen on Android, but it happens on web. Below are some images. How can I get rid of this border?

When not clicked:

When clicked:

Browser: Chrome 84
OS: Windows 10
Expo Version: 3.26.1
React Native Version: 4.12.0
Nodejs Version: v12.18.3
Npm Version: 6.14.6

Minimum Reproducible Example: https://snack.expo.io/@ketzoomer/dfbbdf

import * as React from 'react';
import { View, Text, TextInput } from 'react-native';

class Sign_Up extends React.Component {

    constructor() {
        super();
        
        this.state = {
        };
    }

    render() {
        return (
            <View>
                <Text>
                    First Name:
                    <TextInput
                        style={{ paddingVertical: 0, borderBottomWidth: 1, marginLeft: 5 }}
                        value={this.state.firstName}
                        onChangeText={(firstName) => this.setState({ firstName: firstName })}
                        placeholder="First Name"
                    />
                </Text> 
            </View>
        );
    }
}

export default Sign_Up;

What I tried:

I tried outline: 0 and it did not work.

I tried outlineWidth: 0 and it did not work.

I tried borderWidth: 0, and this did not work either.

use outline: none (only when platform is web) https://stackoverflow.com/a/3397158/11380442 — Zahra Mirali, Sep 03 '20 at 06:14
@SagharMirali I am getting error None is not defined. I will post code. — KetZoomer, Sep 03 '20 at 16:18
I have used this before in react-native for web: outline: "none" — Zahra Mirali, Sep 05 '20 at 04:55

TheEhsanSarshar · Answer 1 · 2023-01-20T10:19:23.870

13

outline: 'none' is no longer working. instead we can use

outlineStyle: 'none'

Note: removing outline is not a good idea for accessibility if you don't have a better alternative for it. https://css-irl.info/accessibly-hiding-focus-outlines/

edited Jan 20 '23 at 10:19

answered Jul 24 '21 at 10:03

TheEhsanSarshar

2,677
22
41

Confirming this still works in 2022 – Alex K Jul 20 '22 at 11:31
It works only in react native web. While building mobile app it says that outline is not a supported style. – Kimi Raikkonen 9790 Feb 01 '23 at 06:19

score 7 · Accepted Answer · answered Sep 05 '20 at 15:42

7

outline: 'none' will do the trick as mentioned by others in the comments. I tried with your snack and it seems to work. Here is the edit: https://snack.expo.io/ro0icIt!6. See below the code:

render() {
        return (
            <View>
                <Text>
                    First Name:
                    <TextInput
                        style={{ paddingVertical: 0, outline: 'none', borderBottomWidth: 1, marginLeft: 5 }}
                        value={this.state.firstName}
                        onChangeText={(firstName) => this.setState({ firstName: firstName })}
                        placeholder="First Name"
                    />
                </Text> 
            </View>
        );
    }

I have also added below the video/gif:

answered Sep 05 '20 at 15:42

manishg

9,520
1
16
19

Thank you this is the answer I was looking for ( btw I can only award bounty in 13 hours so I will do that then ). – KetZoomer Sep 05 '20 at 15:52
I didn't see there was no outline – KetZoomer Sep 05 '20 at 15:53
You saved my day :) – Sid Singh Apr 06 '21 at 17:25

score 1 · Answer 3 · answered Sep 28 '22 at 08:35

1

outline: 'none' is no longer working for React Native.

We can try: outlineStyle: 'none'

But sometimes it could not work completly depending of the device. However in my case its working.

answered Sep 28 '22 at 08:35

Fllopis

79
6

Border Around Text Input When Clicked in React Native on Web

3 Answers3