Summary - Style
- React Native course
- Beginner
- Lesson 35/116
- 5 min
Combine StyleSheet, color and spacing to write a business card.
Summary - Style
In this group you learned four things. The style prop gives a component an inline object or a StyleSheet.create reference. color, fontSize, fontWeight shape text. padding sets inner space, margin outer space. borderWidth, borderColor, borderRadius draw a border.
Now you will combine them into a real business card component: the name big and bold, the phone number under it, the box bordered with inner space. Two short tasks lead you there.
Practice Business card skeleton
Write a BusinessCard component. Define card and name styles with StyleSheet.create. card: padding: 16, borderWidth: 1, borderColor: 'gray', borderRadius: 8. name: fontSize: 20, fontWeight: 'bold'. The component returns a <View style={styles.card}> containing <Text style={styles.name}>Alex</Text>.
Starter code
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
export default function BusinessCard() {
// Write the card skeleton with View and Text
return null;
}
// Add card and name styles hereSample solution
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
export default function BusinessCard() {
return (
<View style={styles.card}>
<Text style={styles.name}>Alex</Text>
</View>
);
}
const styles = StyleSheet.create({
card: { padding: 16, borderWidth: 1, borderColor: 'gray', borderRadius: 8 },
name: { fontSize: 20, fontWeight: 'bold' }
});Practice Add a phone to the card
Add a phone style to the previous skeleton: color: 'gray', marginTop: 4. Inside <View style={styles.card}>, below the name, also include <Text style={styles.phone}>555 123 45 67</Text>.
Starter code
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
export default function BusinessCard() {
return (
<View style={styles.card}>
<Text style={styles.name}>Alex</Text>
{/* Add the phone line here */}
</View>
);
}
const styles = StyleSheet.create({
card: { padding: 16, borderWidth: 1, borderColor: 'gray', borderRadius: 8 },
name: { fontSize: 20, fontWeight: 'bold' }
// Add the phone style here
});Sample solution
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
export default function BusinessCard() {
return (
<View style={styles.card}>
<Text style={styles.name}>Alex</Text>
<Text style={styles.phone}>555 123 45 67</Text>
</View>
);
}
const styles = StyleSheet.create({
card: { padding: 16, borderWidth: 1, borderColor: 'gray', borderRadius: 8 },
name: { fontSize: 20, fontWeight: 'bold' },
phone: { color: 'gray', marginTop: 4 }
});Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Best way to reuse a style in many places?
// Same card style repeated in 50 components- Write an inline object in each component
- Define it once with StyleSheet.create Correct answer
- Recreate the object on every render
- Give up on styling
Explanation: StyleSheet.create defines once; the reference is reused.
2 Match each style property to its job
| Term | Meaning |
|---|---|
StyleSheet.create |
Defines styles once |
padding |
Inner space |
borderRadius |
Corner rounding |
fontWeight: 'bold' |
Bold text |