Using StyleSheet

When building mobile apps with React Native, it's important to keep your styles organized, consistent, and reusable. React Native provides the StyleSheet API to help you define styles in a structured way. The StyleSheet.create method allows you to bundle style rules together into a single object, which you can then reference easily in your components. This approach not only keeps your code clean, but also helps prevent errors by catching invalid style properties early.

To use StyleSheet, you first import it from react-native. You then define your styles using StyleSheet.create, passing in an object where each key represents a style name and each value is an object of style properties. You can then apply these styles to your components by referencing them from the resulting styles object.

Here's a simple example that demonstrates how to style a component with background color, padding, and font size:

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

export default function GreetingCard() {
  return (
    <View style={styles.card}>
      <Text style={styles.title}>Hello, React Native!</Text>
      <Text style={styles.subtitle}>Welcome to styling with StyleSheet.</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  card: {
    backgroundColor: '#f0f4f8',
    padding: 20,
    borderRadius: 10,
  },
  title: {
    fontSize: 24,
    color: '#333333',
    marginBottom: 8,
  },
  subtitle: {
    fontSize: 16,
    color: '#666666',
  },
});

In this example, the card, title, and subtitle styles are all defined in a single StyleSheet.create call. The card style sets the background color, padding, and border radius for the outer View. The title and subtitle styles control the font size and color of the Text components. By using styles.card, styles.title, and styles.subtitle, you can easily apply these styles to your components, making your code more readable and maintainable.