What are some examples of using Flexbox in React Native?

What are some examples of using Flexbox in React Native?

Flexbox is a powerful layout tool in React Native. Here are a few examples:

1. Centering a View: You can center a view both vertically and horizontally using justifyContent and alignItems.

2. Creating a Row Layout: Use flexDirection: 'row' to arrange items in a row.

3. Responsive Design: Adjust item sizes with flex property to create responsive layouts.

Can you show me a code snippet for centering a view?

Sure! Here's a simple example:

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

const CenteredView = () => {
  return (
    <View style={styles.container}>
      <View style={styles.centeredBox} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  centeredBox: {
    width: 100,
    height: 100,
    backgroundColor: 'blue',
  },
});

export default CenteredView;

What if I want to create a column layout?

You can create a column layout by setting flexDirection: 'column'. Here's an example:

const ColumnLayout = () => {
  return (
    <View style={styles.columnContainer}>
      <View style={styles.box} />
      <View style={styles.box} />
    </View>
  );
};

const styles = StyleSheet.create({
  columnContainer: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'space-between',
  },
  box: {
    width: 100,
    height: 100,
    backgroundColor: 'red',
  },
});