What You’ll Learn
- How to apply styles using
StyleSheet.create() - What each core style property does and when to use it.
Style Properties Covered
heightandwidth– Set the dimensions of a component.borderRadius– Rounds the corners of a component. Use higher values for more curve.borderWidthandborderColor– Control border thickness and color.backgroundColor– Sets background color of a view.fontWeight– Controls the weight (boldness) of text.justifyContentandalignItems– Center content inside a View.
Code Example: Centered Header with Styles
HeaderExample.tsx
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
export default function HeaderExample() {
return (
<View style={styles.container}>
<Text style={styles.headerText}>Create User</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
height: 120,
width: 200,
borderRadius: 10,
borderWidth: 2,
borderColor: 'black',
backgroundColor: '#f9f9f9',
justifyContent: 'center',
alignItems: 'center',
},
headerText: {
fontWeight: 'bold',
fontSize: 20,
}
});- Here’s how to create a simple centered header with a border and styled text:
Additional Resources
- Browse all supported React Native style properties in the official docs: React Native Style Reference
- Need help mastering flexbox? Try learning it visually with Flexbox Froggy — it’s a fun game that teaches you how justifyContent and alignItems actually work.
Key Takeaways
- Use
Viewas your layout container andTextto display readable content. - Use
StyleSheet.create()to organize and reuse your styles. - Understanding layout styles like
justifyContent,alignItems, and borders is foundational to any app UI.