Seeking assistance with creating a login screen using React Native, featuring semi-transparent text input. Encountering a peculiar issue where typed text appears highlighted, even though it is not. Please see the screenshot below:
(Unable to upload to imgur, here is the image link: )
Below is my code snippet:
class LoginForm extends Component {
//#region Constructors
constructor(props) {
// Calling the Component constructor
super(props);
// Initializing component properties
this.state = {
isLoading: false,
usernameInput: "",
passwordInput: "",
urlInput: "",
portInput: "443"
};
}
//#endregion
//#region Component Lifecycle
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='*Password*'
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='*url address*'
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 Listeners
_onSubmitLogin = () => {
// Show loader
this.setState({
isLoading: true
});
// Retrieve API KEY
let authController = new OBAuthController();
authController.callPostCreateApiKey().then((apiKey) => {
console.log("apiKey = " + JSON.stringify(apiKey));
// Hide loader
this.setState({
isLoading: false
});
});
}
//#endregion
}
export default LoginForm;
//#region StyleSheet Definition
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'
}
})
//#endregionAny suggestions or solutions to this issue? Thank you!