Course:
Styling in React Native
Text and TextInput components are fundamental for displaying information and capturing user input in any mobile app. Proper styling of these components enhances readability and usability.
Consider the login screen of the “JUST-Learning” app. It needs well-styled text elements and input fields for email and password.
import React from 'react';
import { StyleSheet, View, Text, TextInput, TouchableOpacity } from 'react-native';
const LoginScreen = () => {
return (
<View style={styles.container}>
<Text style={styles.title}>JUST-Learning</Text>
<Text style={styles.subtitle}>Login to your account</Text>
<TextInput style={styles.input} placeholder="Email" keyboardType="email-address" />
<TextInput style={styles.input} placeholder="Password" secureTextEntry />
<TouchableOpacity style={styles.button}>
<Text style={styles.buttonText}>Login</Text>
</TouchableOpacity>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
padding: 16,
backgroundColor: '#f0f0f0',
},
title: {
fontSize: 24,
fontWeight: 'bold',
marginBottom: 8,
},
subtitle: {
fontSize: 16,
color: '#666',
marginBottom: 16,
},
input: {
width: '100%',
padding: 12,
marginBottom: 12,
borderRadius: 8,
backgroundColor: '#fff',
shadowColor: '#000',
shadowOpacity: 0.1,
shadowRadius: 4,
shadowOffset: { width: 0, height: 2 },
},
button: {
backgroundColor: '#007bff',
padding: 16,
borderRadius: 8,
alignItems: 'center',
marginTop: 16,
width: '100%',
},
buttonText: {
fontSize: 16,
fontWeight: 'bold',
color: '#fff',
},
});
export default LoginScreen;
In this lesson, you learned how to style Text and TextInput components effectively. These skills are crucial for creating clean and user-friendly forms and displays in your app.