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

1. StyleSheet API:
   • StyleSheet.create: A method to create a style object.
2. Inline Styles:
   • You can apply styles directly using JavaScript objects.
3. Flexbox:
   • React Native uses Flexbox for layout, making it easier to create responsive designs.
4. Units:
   • All dimensions are unitless and represent density-independent pixels.
5. Platform-Specific Styles:
   • You can define styles that are specific to iOS or Android using the Platform module.

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

1. 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.
2. 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.
3. 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.
4. 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.