Basic Styling

Styling in React Native involves using a combination of inline styles and StyleSheet objects to define how components should look. React Native uses a subset of CSS properties and concepts, adapted to work within the constraints and requirements of mobile platforms. Here's an overview of how styling works in React Native:

Inline Styles

You can apply inline styles directly to components using the style prop, similar to how you would in web development with React.

Example

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

const HelloWorld = () => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text style={{ fontSize: 20, color: 'blue' }}>Hello, World!</Text>
    </View>
  );
};

export default HelloWorld;

            

StyleSheet Object

Using inline styles is straightforward, but for more complex styling or when you want to reuse styles across multiple components, it's recommended to use a StyleSheet object.

                import React from 'react';
                import { View, Text, StyleSheet } from 'react-native';
                
                const HelloWorld = () => {
                  return (
                    <View style={styles.container}>
                      <Text style={styles.text}>Hello, World!</Text>
                    </View>
                  );
                };
                
                const styles = StyleSheet.create({
                  container: {
                    flex: 1,
                    justifyContent: 'center',
                    alignItems: 'center',
                  },
                  text: {
                    fontSize: 20,
                    color: 'blue',
                  },
                });
                
                export default HelloWorld;
                
            

Flexbox

React Native uses Flexbox for layout design, similar to CSS Flexbox in web development. Flexbox allows you to create dynamic layouts that adjust to different screen sizes and orientations.

                const styles = StyleSheet.create({
                    container: {
                      flex: 1, // Takes full available space
                      justifyContent: 'center', // Centers children vertically
                      alignItems: 'center', // Centers children horizontally
                    },
                  });
                  
            

Common Properties

React Native supports a subset of CSS properties that are tailored for mobile development. Some commonly used properties include:

• Dimensions: width, height
• Flexbox: flex, flexDirection, justifyContent, alignItems
• Text Styling: fontSize, fontWeight, color, textAlign
• Background and Borders: backgroundColor, borderWidth, borderColor, borderRadius
• Padding and Margin: padding, paddingVertical, paddingHorizontal, margin, marginTop, marginBottom, marginLeft, marginRight

Platform-Specific Styling

React Native also provides a way to specify styles that are specific to particular platforms (iOS or Android).

                const styles = StyleSheet.create({
                    text: {
                      fontSize: 20,
                      ...Platform.select({
                        ios: {
                          fontWeight: 'bold',
                          color: 'blue',
                        },
                        android: {
                          fontStyle: 'italic',
                          color: 'green',
                        },
                      }),
                    },
                  });
                  
            

External Libraries for Styling

For more advanced styling needs, you can also consider using third-party libraries like styled-components or styled-system which bring CSS-in-JS concepts to React Native, enhancing component styling capabilities.

Conclusion

Styling in React Native leverages a combination of inline styles and StyleSheet objects, focusing on mobile-specific layout techniques like Flexbox. Understanding these basics allows developers to create responsive, visually appealing mobile applications efficiently.