React Native – Styling
Styling in React Native is similar to CSS in web development but uses a slightly different approach. React Native provides a StyleSheet
API for defining styles. Here’s a detailed overview of styling in React Native along with a small example.
Key Concepts of Styling in React Native
- StyleSheet API:
StyleSheet.create
: A method to create a style object.
- Inline Styles:
- You can apply styles directly using JavaScript objects.
- Flexbox:
- React Native uses Flexbox for layout, making it easier to create responsive designs.
- Units:
- All dimensions are unitless and represent density-independent pixels.
- Platform-Specific Styles:
- You can define styles that are specific to iOS or Android using the
Platform
module.
- You can define styles that are specific to iOS or Android using the
Example with Explanation
Let’s create a simple app that displays a styled header and a button. The header will have some custom styles applied, and the button will have styles to make it look like a custom button.
App.js
:
import React from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
const App = () => {
return (
<View style={styles.container}>
<Text style={styles.header}>Welcome to React Native!</Text>
<View style={styles.buttonContainer}>
<Button title="Press Me" onPress={() => alert('Button Pressed!')} />
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#f0f0f0',
},
header: {
fontSize: 24,
fontWeight: 'bold',
marginBottom: 20,
color: '#333',
},
buttonContainer: {
width: '80%',
backgroundColor: '#007BFF',
borderRadius: 5,
overflow: 'hidden',
},
button: {
color: '#fff',
paddingVertical: 10,
paddingHorizontal: 20,
},
});
export default App;
Explanation
- Container Style (
container
):flex: 1
: Makes the container take up the full height of the screen.justifyContent: 'center'
: Centers the content vertically.alignItems: 'center'
: Centers the content horizontally.backgroundColor: '#f0f0f0'
: Sets the background color to a light gray.
- Header Style (
header
):fontSize: 24
: Sets the font size to 24 units.fontWeight: 'bold'
: Makes the text bold.marginBottom: 20
: Adds space below the header.color: '#333'
: Sets the text color to dark gray.
- Button Container Style (
buttonContainer
):width: '80%'
: Sets the width of the button container to 80% of its parent.backgroundColor: '#007BFF'
: Sets a blue background color.borderRadius: 5
: Rounds the corners of the button container.overflow: 'hidden'
: Ensures child components respect the border radius.
- Button Style (
button
):color: '#fff'
: Sets the text color to white.paddingVertical: 10
: Adds vertical padding to the button.paddingHorizontal: 20
: Adds horizontal padding to the button.
Using Flexbox
React Native uses Flexbox for layout. Here’s a brief example of how Flexbox can be used to create a responsive layout:
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column', // Column layout by default
justifyContent: 'center', // Center items vertically
alignItems: 'center', // Center items horizontally
},
item: {
width: 100,
height: 100,
backgroundColor: 'skyblue',
margin: 10,
},
});
const App = () => {
return (
<View style={styles.container}>
<View style={styles.item}></View>
<View style={styles.item}></View>
<View style={styles.item}></View>
</View>
);
};
export default App;
In this example:
- The
container
uses Flexbox to align its children (item
components) both vertically and horizontally. - The
item
components have fixed dimensions and a background color.
This basic overview and examples should give you a good starting point for styling in React Native.