Introduction: When it comes to building mobile apps, creating a welcoming and engaging login screen is crucial. React Native, a popular framework for mobile app development, offers tools to enhance the look and feel of your app. One such tool is the react-native-linear-gradient
library, which lets you easily add gradient backgrounds to your app’s components. In this article, we’ll walk through how to spruce up your React Native login screen with gradient backgrounds, making it more visually appealing and user-friendly.
Why Gradient Backgrounds Are Important: Before we get into the technical stuff, let’s talk about why gradient backgrounds matter. Gradient backgrounds add depth and style to your app’s design. They make your login screen look more modern and interesting, which can leave a positive impression on users. Plus, gradients allow you to play around with different colors and create unique visual effects that catch the eye.
How to Add Gradient Backgrounds in React Native: Adding gradient backgrounds to your React Native app is easier than you might think, thanks to the react-native-linear-gradient
library. Here’s how you can do it in a few simple steps:
- Install the Library: Start by installing the
react-native-linear-gradient
library using npm or yarn. - Import the Component: Next, import the
LinearGradient
component from the library into your React Native component file. - Wrap Your Component: Wrap the component or container you want to apply the gradient background to with the
LinearGradient
component. You can specify the colors and other settings for the gradient. - Customize Your Gradient: Feel free to play around with different colors, directions, and styles to achieve the desired gradient effect.
- Experiment and Enhance: Once you’ve added the gradient background, consider adding other design elements like shadows or overlays to further enhance the visual appeal.
Complete code for the above design
Below is the code for the above screen design. If you want the same design then copy the code from below.
import React, { useState } from 'react';
import {
StyleSheet,
Text,
TextInput,
View,
Image,
TouchableOpacity,
Dimensions,
ActivityIndicator
} from 'react-native';
import { Ionicons } from '@expo/vector-icons'; // Assuming you're using Expo for your project
const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;
const Login = () => {
const [showPassword, setShowPassword] = useState(false);
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [emailError, setEmailError] = useState('');
const [passwordError, setPasswordError] = useState('');
const [isLoading, setIsLoading] = useState(false);
const toggleShowPassword = () => {
setShowPassword(!showPassword);
};
const validateEmail = () => {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return emailRegex.test(email);
};
const validatePassword = () => {
return password.length >= 6;
};
const handleLogin = () => {
let isValid = true;
if (!validateEmail()) {
setEmailError('Please enter a valid email address.');
isValid = false;
} else {
setEmailError('');
}
if (!validatePassword()) {
setPasswordError('Password must be at least 6 characters.');
isValid = false;
} else {
setPasswordError('');
}
if (isValid) {
setIsLoading(true); // Show loader
console.log('Email:', email);
console.log('Password:', password);
// Perform login logic here
fetch('YOUR_API_ENDPOINT', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
email: email,
password: password,
}),
})
.then((response) => response.json())
.then((data) => {
// Handle API response
console.log('API Response:', data);
// setIsLoading(false); // Hide loader
})
.catch((error) => {
console.error('Error:', error);
// setIsLoading(false); // Hide loader
});
}
};
return (
<View style={styles.login_container}>
<Image
style={styles.shadow_top}
source={require('/assets/img/shadow_top.png')}
/>
<Image
style={styles.shadow_bottom}
source={require('/assets/img/shadow_bottom.png')}
/>
<View style={styles.center_container}>
<Image
style={styles.glocoach_logo}
source={require('/assets/img/logo_fl.png')}
/>
<View style={styles.form_info}>
<TextInput
style={[styles.email_input, emailError && styles.errorInput]}
placeholder={'Email'}
placeholderTextColor="#BCBCBC80"
onChangeText={(text) => setEmail(text)}
value={email}
autoCapitalize="none"
keyboardType="email-address"
/>
{emailError ? (
<Text style={styles.errorText}>{emailError}</Text>
) : null}
<View style={styles.container}>
<TextInput
style={[
styles.password_input,
passwordError && styles.errorInput,
]}
placeholder={'Password'}
placeholderTextColor="#BCBCBC80"
secureTextEntry={!showPassword}
onChangeText={(text) => setPassword(text)}
value={password}
/>
<TouchableOpacity
style={styles.eyeIcon}
onPress={toggleShowPassword}>
<Ionicons
name={showPassword ? 'eye' : 'eye-off'}
size={24}
color="white"
/>
</TouchableOpacity>
</View>
{passwordError ? (
<Text style={styles.errorText}>{passwordError}</Text>
) : null}
<TouchableOpacity
onPress={handleLogin}
style={styles.loginScreenButton}
disabled={isLoading} // Disable button when loading
underlayColor="#fff">
{isLoading ? (
<ActivityIndicator size="small" color="#0222D8" />
) : (
<Text style={styles.loginText}>Login</Text>
)}
</TouchableOpacity>
</View>
</View>
</View>
);
};
export default Login;
const styles = StyleSheet.create({
login_container: {
height: windowHeight,
width: windowWidth,
backgroundColor: '#f542f2',
flex: 1,
position: 'relative',
},
center_container: {
padding: 20,
width: '100%',
height: 450,
flexDirection: 'column',
flex: 1,
justifyContent: 'center',
alignItems: 'center',
zIndex: 120,
},
shadow_top: {
position: 'absolute',
top: 0,
left: 0,
zIndex: 12,
},
shadow_bottom: {
position: 'absolute',
right: 0,
bottom: 0,
zIndex: 12,
},
glocoach_logo: {
height: 60,
marginBottom: 60,
},
form_info: {
width: '100%',
marginTop: 20,
},
email_input: {
height: 54,
width: '100%',
borderWidth: 1,
padding: 11,
color: '#ffffff',
borderColor: '#FFFFFF80',
borderRadius: 9,
marginBottom: 10,
fontSize: 16,
},
password_input: {
height: 54,
width: '100%',
borderWidth: 1,
padding: 11,
color: '#ffffff',
borderColor: '#FFFFFF80',
borderRadius: 9,
marginBottom: 10,
fontSize: 16,
},
loginScreenButton: {
marginTop: 10,
paddingTop: 15,
paddingBottom: 15,
backgroundColor: '#FFFFFF',
borderRadius: 10,
},
loginText: {
color: '#0222D8',
textAlign: 'center',
paddingLeft: 10,
paddingRight: 10,
fontSize: 16,
},
container: {
flexDirection: 'row',
alignItems: 'center',
width: '100%',
marginBottom: 10,
},
eyeIcon: {
position: 'absolute',
right: 10,
},
errorInput: {
borderColor: 'red',
},
errorText: {
color: 'red',
fontSize: 12,
marginBottom: 5,
},
});
Thank you for reaching out us. Please visit more React Native Tutorials.