The StyleSheet API in React Native is used to organize
and manage styles for mobile application components. It allows you
to create reusable style objects for components such as
View, Text, Image,
TextInput and Pressable.
StyleSheet.create().
StyleSheet is a React Native API used to create and
organize component styles.
import {
StyleSheet
} from 'react-native';It helps keep styling separate from the JSX structure and makes styles easier to reuse.
StyleSheet is imported from the react-native package.
import {
View,
Text,
StyleSheet
} from 'react-native';const styles = StyleSheet.create({
container: {
flex: 1
},
title: {
fontSize: 24
}
});
The object contains named styles that can later be used with the
style prop.
const styles = StyleSheet.create({
container: {
backgroundColor: 'lightblue',
padding: 20
}
});
<View style={styles.container}>
</View>
The styles.container object is applied to the View.
const styles = StyleSheet.create({
title: {
fontSize: 28,
fontWeight: 'bold',
color: 'blue'
}
});
<Text style={styles.title}>
Welcome
</Text>Text styles commonly include font size, weight, color and alignment.
The backgroundColor property changes the background
color of a component.
const styles = StyleSheet.create({
box: {
backgroundColor: 'blue',
padding: 20
}
});
The color property changes the color of text.
const styles = StyleSheet.create({
text: {
color: 'white'
}
});
Remember that color is mainly used with text components.
The fontSize property controls the size of text.
const styles = StyleSheet.create({
heading: {
fontSize: 30
},
paragraph: {
fontSize: 16
}
});
The fontWeight property controls the thickness of text.
const styles = StyleSheet.create({
title: {
fontWeight: 'bold'
}
});
Common values include normal and bold.
Platform-specific supported values can vary.
The textAlign property controls the alignment of text.
const styles = StyleSheet.create({
title: {
textAlign: 'center'
}
});
Other common values include left and right.
The width and height properties control
the dimensions of a component.
const styles = StyleSheet.create({
box: {
width: 200,
height: 100
}
});Padding creates space inside a component between its content and its boundary.
const styles = StyleSheet.create({
box: {
padding: 20
}
});You can also control individual sides.
const styles = StyleSheet.create({
box: {
paddingTop: 10,
paddingBottom: 20,
paddingLeft: 15,
paddingRight: 15
}
});Margin creates space outside a component.
const styles = StyleSheet.create({
box: {
margin: 20
}
});Individual margins can also be controlled.
const styles = StyleSheet.create({
box: {
marginTop: 20,
marginBottom: 10
}
});
The borderRadius property creates rounded corners.
const styles = StyleSheet.create({
card: {
backgroundColor: 'white',
borderRadius: 12,
padding: 20
}
});It is commonly used for cards, buttons and input fields.
React Native provides several border-related style properties.
const styles = StyleSheet.create({
box: {
borderWidth: 1,
borderColor: 'gray',
borderRadius: 8
}
});These properties are useful for cards, forms and TextInput fields.
The flex property controls how a component uses
available space.
const styles = StyleSheet.create({
container: {
flex: 1
}
});
A common screen layout starts with a container having
flex: 1.
The flexDirection property controls the direction
of children in a Flexbox container.
const styles = StyleSheet.create({
container: {
flexDirection: 'row'
}
});
Common values are row and column.
The justifyContent property controls how children are
positioned along the main axis.
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center'
}
});
Common values include center,
flex-start, flex-end,
space-between and space-around.
The alignItems property controls how children are
positioned along the cross axis.
const styles = StyleSheet.create({
container: {
alignItems: 'center'
}
});
It is frequently used together with justifyContent.
Multiple style objects can be combined using an array.
const styles = StyleSheet.create({
box: {
padding: 20,
borderRadius: 10
},
blueBox: {
backgroundColor: 'blue'
}
});
<View
style={[
styles.box,
styles.blueBox
]}
>
</View>Styles can be applied conditionally using JavaScript expressions.
const active = true;
<View
style={[
styles.box,
active && styles.activeBox
]}
>
</View>This is useful when the appearance of a component depends on application state.
const styles = StyleSheet.create({
input: {
borderWidth: 1,
borderColor: 'gray',
padding: 12,
borderRadius: 8,
marginBottom: 15
}
});
<TextInput
placeholder="Enter your name"
style={styles.input}
/>StyleSheet makes form fields easier to keep consistent.
const styles = StyleSheet.create({
button: {
backgroundColor: 'blue',
padding: 15,
borderRadius: 8,
alignItems: 'center'
},
buttonText: {
color: 'white',
fontWeight: 'bold'
}
});
<Pressable style={styles.button}>
<Text style={styles.buttonText}>
Submit
</Text>
</Pressable>const styles = StyleSheet.create({
image: {
width: 150,
height: 150,
borderRadius: 75
}
});
<Image
source={require('./assets/profile.png')}
style={styles.image}
/>StyleSheet can control image dimensions, borders and other visual properties.
For small components, styles can be placed at the bottom of the same file.
export default function App() {
return (
<View style={styles.container}>
<Text style={styles.title}>
Hello
</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1
},
title: {
fontSize: 24
}
});For larger projects, shared styles can also be organized into separate files when that improves maintainability.
| StyleSheet | Inline Style |
|---|---|
| Styles are named and organized | Styles are written directly in JSX |
| Easy to reuse | Useful for small or dynamic styles |
| Keeps JSX cleaner | Can make JSX longer |
| Good for larger components | Useful for simple one-off styles |
<View
style={{
padding: 20,
backgroundColor: 'blue'
}}
>
</View>Both approaches are valid. StyleSheet is useful for keeping reusable styles organized.
import React from 'react';
import {
View,
Text,
TextInput,
Pressable,
StyleSheet
} from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<Text style={styles.title}>
Student Login
</Text>
<TextInput
style={styles.input}
placeholder="Enter email"
/>
<TextInput
style={styles.input}
placeholder="Enter password"
secureTextEntry
/>
<Pressable
style={styles.button}
>
<Text style={styles.buttonText}>
Login
</Text>
</Pressable>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
padding: 20,
backgroundColor: '#F5F5F5'
},
title: {
fontSize: 28,
fontWeight: 'bold',
textAlign: 'center',
marginBottom: 25
},
input: {
backgroundColor: 'white',
borderWidth: 1,
borderColor: '#CCCCCC',
borderRadius: 8,
padding: 12,
marginBottom: 15
},
button: {
backgroundColor: 'blue',
padding: 15,
borderRadius: 8,
alignItems: 'center'
},
buttonText: {
color: 'white',
fontSize: 16,
fontWeight: 'bold'
}
});This example demonstrates how several React Native components can share styles created with StyleSheet.
StyleSheet.style prop.px in standard React Native style values.StyleSheet.create().Create Component
↓
Create StyleSheet
↓
Define Named Styles
↓
Apply style Prop
↓
Use Flexbox
↓
Add Spacing
↓
Add Colors
↓
Add Typography
↓
Combine Styles
↓
Test on Device
↓
Improve Responsive LayoutStyleSheet provides a structured way to manage the visual appearance of React Native applications. Understanding StyleSheet together with Flexbox, spacing, typography and component-specific properties will help you create professional mobile interfaces.
StyleSheet is used to organize React Native styles.StyleSheet.create() creates named style objects.style prop.padding, margin,
backgroundColor, fontSize and
borderRadius.Question: Which React Native API is commonly used to create and organize styles?