TextInput in react native show text value with a color background

Question

I'm trying to make a login screen in react native, with semi-transparent text input. But there is a strange behavior when I type text in the input: typed text appear like it's highlighted (however it's not). As you can see on this screenshot:

(seems to fail to upload to imgur, so: https://image.ibb.co/hvBDQe/Image_1.jpg)

Here is my code :

class LoginForm extends Component {

    //#region Constructeurs   
    constructor(props) {
        // Appel du constructeur de Component
        super(props);
        // Initialise les propriétés du composant
        this.state = {
            isLoading: false,
            usernameInput: "",
            passwordInput: "",
            urlInput: "",
            portInput: "443"
        };
    }
    //#endregion

    //#region Cycle de vie du Component
    componentDidMount() {
        
    }

    render() {

        return (
            <View style={styles.mainContainer} pointerEvents={this.state.isLoading ? 'none' : 'auto'}>
                <TextInput style = {styles.input} 
                            autoCapitalize="none" 
                            onSubmitEditing={() => this.passwordInput.focus()} 
                            autoCorrect={false} 
                            keyboardType='email-address' 
                            returnKeyType="next" 
                            placeholder='*Email*' 
                            placeholderTextColor={COLOR_GREY_300}
                            value={this.state.usernameInput}
                            onChangeText={text => this.setState({usernameInput: text})}/>
                <TextInput style = {styles.input}   
                            returnKeyType="go" 
                            ref={(input)=> this.passwordInput = input} 
                            onSubmitEditing={() => this.urlInput.focus()}
                            placeholder='*Mot de passe*' 
                            returnKeyType="next" 
                            placeholderTextColor={COLOR_GREY_300} 
                            secureTextEntry
                            value={this.state.passwordInput}
                            onChangeText={text => this.setState({passwordInput: text})}/>
                <TextInput style = {styles.input} 
                            autoCapitalize="none" 
                            onSubmitEditing={() => this.portInput.focus()} 
                            ref={(input)=> this.urlInput = input} 
                            autoCorrect={false}  
                            returnKeyType="next" 
                            placeholder='*adresse url*' 
                            placeholderTextColor={COLOR_GREY_300}
                            value={this.state.urlInput}
                            onChangeText={text => this.setState({urlInput: text})}/>
                <TextInput style = {styles.input} 
                            autoCapitalize="none" 
                            onSubmitEditing={this._onSubmitLogin} 
                            ref={(input)=> this.portInput = input} 
                            autoCorrect={false}  
                            keyboardType='number-pad' 
                            returnKeyType="go" 
                            placeholder='*port*' 
                            placeholderTextColor={COLOR_GREY_300}
                            value={this.state.portInput}
                            onChangeText={text => this.setState({portInput: text})} />
                <TouchableOpacity style={styles.buttonContainer} onPress={this._onSubmitLogin}>
                    <Text style={styles.buttonText}>*LOGIN*</Text>
                </TouchableOpacity> 
                <ActivityIndicator size="large" color={COLOR_SECONDARY} animating={this.state.isLoading} style={styles.activityIndicator} />
            </View>
        );
    }
    //#endregion

    //#region Listener
    _onSubmitLogin = () => {
        // Affichage du loader
        this.setState({
            isLoading: true
        });

        // Récupération de l'API KEY
        let authController = new OBAuthController();
        authController.callPostCreateApiKey().then((apiKey) => {
            
            console.log("apiKey = " + JSON.stringify(apiKey));
            // Masquage du loader
            this.setState({
                isLoading: false
            });
        });
    }
    //#endregion
}

export default LoginForm;

//#region Définition de la StyleSheet   
const styles = StyleSheet.create({
    mainContainer: {
        padding: 50
    },
    input:{
        height: 40,
        backgroundColor: 'rgba(225,225,225,0.3)',
        marginBottom: 16,
        padding: 10,
        color: '#fff'
    },
    buttonContainer:{
        backgroundColor: '#2980b6',
        paddingVertical: 15
    },
    buttonText:{
        color: 'white',
        textAlign: 'center',
        fontWeight: '700'
    },
    activityIndicator: {
        position:'absolute',
        alignSelf:'center'
    }
})
//#endregion

Any idea? Thank you!

Answer 1

Following @Hariks comment, I ended up wrapping each of my TextInput into a View:

<View style={styles.inputView}>
                    <TextInput style = {styles.input} 
                                autoCapitalize="none" 
                                onSubmitEditing={() => this.passwordInput.focus()} 
                                autoCorrect={false} 
                                keyboardType='email-address' 
                                returnKeyType="next" 
                                placeholder='*Email*' 
                                placeholderTextColor={COLOR_GREY_300}
                                value={this.state.usernameInput}
                                onChangeText={text => this.setState({usernameInput: text})}/>
                </View>
                <View style={styles.inputView}>
                    <TextInput style = {styles.input}   
                                returnKeyType="go" 
                                ref={(input)=> this.passwordInput = input} 
                                onSubmitEditing={() => this.urlInput.focus()}
                                placeholder='*Mot de passe*' 
                                returnKeyType="next" 
                                placeholderTextColor={COLOR_GREY_300} 
                                secureTextEntry
                                value={this.state.passwordInput}
                                onChangeText={text => this.setState({passwordInput: text})}/>
                </View>
                <View style={styles.inputView}>
                    <TextInput style = {styles.input} 
                                autoCapitalize="none" 
                                onSubmitEditing={() => this.portInput.focus()} 
                                ref={(input)=> this.urlInput = input} 
                                autoCorrect={false}  
                                returnKeyType="next" 
                                placeholder='*adresse url*' 
                                placeholderTextColor={COLOR_GREY_300}
                                value={this.state.urlInput}
                                onChangeText={text => this.setState({urlInput: text})}/>

                </View>
                <View style={styles.inputView}>
                    <TextInput style = {styles.input} 
                                autoCapitalize="none" 
                                onSubmitEditing={this._onSubmitLogin} 
                                ref={(input)=> this.portInput = input} 
                                autoCorrect={false}  
                                keyboardType='number-pad' 
                                returnKeyType="go" 
                                placeholder='*port*' 
                                placeholderTextColor={COLOR_GREY_300}
                                value={this.state.portInput}
                                onChangeText={text => this.setState({portInput: text})} />
                </View>

And the styles:

inputView: {
        height: 40,
        backgroundColor: 'rgba(225,225,225,0.3)',
        marginBottom: 16,
        padding: 10,
    },
    input:{
        color: '#fff'
    },