Responsive Inputs in React Native

Photo by Caspar Camille Rubin on Unsplash

Whether it’s a login screen or any form input, if users are required to meet a specific format you want to ensure they are aware. Regex is a great way to ensure the Strings are formatted to your specification. Let’s begin an example with a simple login.

Let’s start by making a simple login screen

const Login = props => {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const onSubmit = () => {
...
login with email and password
...
}
return (
<KeyboardAvoidingView
style={styles.container}
behavior="padding"
enabled
>
<TextInput
style={styles.input}
placeholder="Email"
value={email}
onChangeText={text => setEmail(text)}
/>
<TextInput
style={styles.input}
placeholder="Password"
value={password}
onChangeText={text => setPassword(text)}
secureTextEntry={true}
/>
<Button
title="SUBMIT"
onPress={() => onSubmit()}
/>
</KeyboardAvoidingView>
)
}

Now that we have a login screen we need to add some styling.

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#708090',
padding: 8,
},
input: {
fontSize: 30,
padding: 10,
marginBottom: 30,
color: 'white',
borderBottomWidth: 0.5,
borderBottomColor: 'green',
},
});

Now we will write some regex to test our email and password against. You can utilize websites like Regexr.com to help you out. Community patterns are a great way to begin learning regex or to stick with a community backed pattern.

// RFC2822 Email Validation
const emailRegex = /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/;
// Strong Password
// at least 8 characters
// must contain at least 1 uppercase letter, 1 lowercase
// can contain special characters
const passwordRegex = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z]).{8,}$/;

We are now able to test our user’s input against our regex, so let’s adjust our state to be more responsive.

const [email, setEmail] = useState({value: '', isValid: true});
const [password, setPassword] = useState({value: '', isValid: true});

Let’s add some successInput and failInput styling which we will use to conditionally render our responsive UI.

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#708090',
padding: 8,
},
successInput: {
fontSize: 30,
padding: 10,
marginBottom: 30,
color: 'white',
borderBottomWidth: 0.5,
borderBottomColor: 'green',
},
failInput: {
fontSize: 30,
padding: 10,
marginBottom: 30,
color: 'white',
borderBottomWidth: 0.5,
borderBottomColor: 'red',
},
});

Lastly we need to adjust our onChangeHandlers and style to conditionally render our new UI.

return (
<KeyboardAvoidingView
style={styles.container}
behavior="padding"
enabled
>
<TextInput
style={email.isValid ? styles.successInput : styles.failInput}
placeholder="Email"
value={email.value}
onChangeText={text => setEmail({value: text, isValid: emailRegex.test(text)})}
placeholderTextColor="white"
/>
<TextInput
styles={password.isValid ? styles.successInput : styles.failInput}
placeholder="Password"
value={password.value}
onChangeText={text => setPassword({value: text, isValid: passwordRegex.test(text)})}
placeholderTextColor="white"
secureTextEntry={true}
/>
<Button
title="SUBMIT"
onPress={() => onSubmit()}
/>
</KeyboardAvoidingView>
)

Next steps? Now that users are aware of their input we can choose how we handle invalid inputs. You can create toast notifications, alerts, or clear the state. You could choose to disable the submit button to protect the user, and ease error handling. Conditional rendering and StyleSheets allow us to communicate responsively to our users and create the ultimate experience.

Full stack software engineer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store