Colors and fonts are important parts of mobile application design. React Native provides several style properties that allow you to control text color, background color, font size, font weight, text alignment and other typography features.
The color and backgroundColor properties
are commonly used to apply colors.
const styles = StyleSheet.create({
text: {
color: 'blue'
},
box: {
backgroundColor: 'lightgray'
}
});React Native supports many standard color names.
const styles = StyleSheet.create({
title: {
color: 'red'
},
box: {
backgroundColor: 'yellow'
}
});Color names are easy to understand and useful for simple examples.
Hexadecimal color values provide more control over colors.
const styles = StyleSheet.create({
title: {
color: '#2563EB'
},
container: {
backgroundColor: '#F1F5F9'
}
});
A hexadecimal color normally starts with # followed
by six hexadecimal characters.
Colors can also be represented using RGB values.
const styles = StyleSheet.create({
title: {
color: 'rgb(37, 99, 235)'
}
});RGB represents the red, green and blue components of a color.
RGBA adds an alpha value to RGB, allowing transparency.
const styles = StyleSheet.create({
overlay: {
backgroundColor:
'rgba(0, 0, 0, 0.5)'
}
});
Here, 0.5 represents the alpha value used for
partial transparency.
The color property changes the color of text.
const styles = StyleSheet.create({
title: {
color: '#111827'
},
subtitle: {
color: '#6B7280'
}
});
The backgroundColor property changes the background
of a component.
const styles = StyleSheet.create({
container: {
backgroundColor: '#FFFFFF'
},
header: {
backgroundColor: '#2563EB'
}
});
The fontSize property controls the size of text.
const styles = StyleSheet.create({
heading: {
fontSize: 30
},
paragraph: {
fontSize: 16
}
});React Native style values such as font size are normally numbers, not strings with CSS units.
The fontWeight property controls the thickness of text.
const styles = StyleSheet.create({
title: {
fontWeight: 'bold'
},
normalText: {
fontWeight: 'normal'
}
});Supported font weight values can vary by platform and font.
The textAlign property controls horizontal text
alignment.
const styles = StyleSheet.create({
title: {
textAlign: 'center'
}
});
Common values include left, center
and right.
The fontStyle property can be used to create italic
text.
const styles = StyleSheet.create({
note: {
fontStyle: 'italic'
}
});
The commonly used values are normal and
italic.
The textDecorationLine property can add decoration
to text.
const styles = StyleSheet.create({
link: {
textDecorationLine: 'underline'
}
});It is commonly used for links or emphasized text.
The letterSpacing property controls the spacing
between characters.
const styles = StyleSheet.create({
heading: {
letterSpacing: 1
}
});Small values can be useful for headings and labels.
The lineHeight property controls the height of
text lines.
const styles = StyleSheet.create({
paragraph: {
fontSize: 16,
lineHeight: 24
}
});Line height can improve readability of longer text.
The textTransform property can change the appearance
of text capitalization.
const styles = StyleSheet.create({
title: {
textTransform: 'uppercase'
}
});
Other values include lowercase and
capitalize.
Several typography properties can be combined in one style.
const styles = StyleSheet.create({
title: {
fontSize: 28,
fontWeight: 'bold',
color: '#111827',
textAlign: 'center',
letterSpacing: 1
}
});React Native can use custom fonts when they are properly added and configured in the project.
const styles = StyleSheet.create({
title: {
fontFamily: 'MyCustomFont',
fontSize: 26
}
});The exact font setup depends on the project workflow and platform.
The fontFamily property specifies the font family
used by text.
const styles = StyleSheet.create({
title: {
fontFamily: 'System',
fontSize: 24
}
});Available font family names depend on the fonts available in the application and platform.
A project can define reusable typography styles for headings, subheadings and normal text.
const styles = StyleSheet.create({
heading: {
fontSize: 28,
fontWeight: 'bold',
color: '#111827'
},
subheading: {
fontSize: 20,
fontWeight: '600',
color: '#374151'
},
body: {
fontSize: 16,
color: '#4B5563',
lineHeight: 24
}
});A color palette helps maintain consistent colors throughout an application.
const colors = {
primary: '#2563EB',
secondary: '#64748B',
success: '#16A34A',
danger: '#DC2626',
warning: '#F59E0B',
dark: '#111827',
light: '#F8FAFC',
white: '#FFFFFF'
};These values can then be reused in component styles.
const colors = {
primary: '#2563EB',
text: '#111827',
background: '#F8FAFC'
};
const styles = StyleSheet.create({
container: {
backgroundColor:
colors.background
},
title: {
color: colors.text
},
button: {
backgroundColor:
colors.primary
}
});Keeping colors in one place makes it easier to maintain a consistent design.
const styles = StyleSheet.create({
card: {
backgroundColor: '#FFFFFF',
padding: 20,
borderRadius: 12
},
title: {
fontSize: 20,
fontWeight: 'bold',
color: '#111827'
},
description: {
fontSize: 15,
color: '#6B7280',
lineHeight: 22
}
});Combining colors and typography helps create clear card-based interfaces.
const styles = StyleSheet.create({
button: {
backgroundColor: '#2563EB',
padding: 15,
borderRadius: 8,
alignItems: 'center'
},
buttonText: {
color: '#FFFFFF',
fontSize: 16,
fontWeight: 'bold'
}
});A contrasting text color helps make button labels easier to read.
const styles = StyleSheet.create({
input: {
borderWidth: 1,
borderColor: '#CBD5E1',
borderRadius: 8,
padding: 12,
fontSize: 16,
color: '#111827',
backgroundColor: '#FFFFFF'
}
});Consistent typography and colors make forms easier to read and use.
Applications can define different color values for light and dark themes.
const lightColors = {
background: '#FFFFFF',
text: '#111827'
};
const darkColors = {
background: '#111827',
text: '#FFFFFF'
};The selected theme can then determine which colors are used by components.
Colors can change according to application state.
const active = true;
<Text
style={{
color: active
? 'green'
: 'gray'
}}
>
Account Status
</Text>This is useful for status messages, selected items and validation feedback.
import React from 'react';
import {
View,
Text,
Pressable,
StyleSheet
} from 'react-native';
const colors = {
primary: '#2563EB',
background: '#F8FAFC',
title: '#111827',
text: '#64748B',
white: '#FFFFFF'
};
export default function App() {
return (
<View style={styles.container}>
<Text style={styles.title}>
Welcome to My App
</Text>
<Text style={styles.description}>
Learn React Native and build
mobile applications.
</Text>
<Pressable style={styles.button}>
<Text style={styles.buttonText}>
Get Started
</Text>
</Pressable>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
padding: 20,
backgroundColor: colors.background
},
title: {
fontSize: 28,
fontWeight: 'bold',
color: colors.title,
textAlign: 'center',
marginBottom: 12
},
description: {
fontSize: 16,
lineHeight: 24,
color: colors.text,
textAlign: 'center',
marginBottom: 25
},
button: {
backgroundColor: colors.primary,
padding: 15,
borderRadius: 8,
alignItems: 'center'
},
buttonText: {
color: colors.white,
fontSize: 16,
fontWeight: 'bold'
}
});px in standard numeric style values.Choose Color Palette
↓
Choose Typography
↓
Create Color Constants
↓
Create Text Styles
↓
Create Component Styles
↓
Apply Background Colors
↓
Apply Text Colors
↓
Set Font Sizes
↓
Set Font Weights
↓
Set Text Alignment
↓
Test Readability
↓
Create Consistent UIColors and fonts work together to create visual hierarchy and readability. A consistent color palette and typography system makes React Native applications easier to understand and gives the interface a professional appearance.
color controls text color.backgroundColor controls component background color.fontSize controls text size.fontWeight controls text thickness.fontStyle can create italic text.textAlign controls text alignment.lineHeight improves readability.letterSpacing controls spacing between characters.fontFamily can specify an available font family.Question: Which React Native style property is used to change the color of text?