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.

Answer 1

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/

Answer 2

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: