React Native Flexbox

What is Flexbox?

Flexbox, which stands for “Flexible Box Layout,” is a CSS (Cascading Style Sheets) module that allows you to lay out and align items within a container in a variety of ways.

Flexbox was created to overcome the inadequacies of traditional layout approaches, such as the use of floats and positioning, by providing more control and ease in the creation of flexible and dynamic layouts.

You can use flexbox to construct a one-dimensional layout model in a row or a column and manage the alignment, distribution, and ordering of items. The flex container is defined by adding the `display: flex;` attribute to its parent element. Flex items are the child components included within the flex container.

If you want to customise the layout behaviour, Flexbox provides a set of attributes that can be applied to the flex container or the flex components. Some of the most regularly utilised qualities are:

Flexbox Properties

1. flexDirection: Defines the main axis direction of the flex container, specifying whether items should be laid out in a row (row), column (column), row-reverse (row-reverse), or column-reverse (column-reverse).
2. justifyContent: Controls the alignment of flex items along the main axis.
3. alignItems: Determines the alignment of flex items along the cross axis.
4. flexWrap: Specifies whether flex items should wrap to multiple lines if they can’t fit in a single line.
5. flexGrow and flexShrink: Determine how flex items should grow or shrink to fill the available space.
6. alignSelf: Overrides the alignment of individual flex items along the cross axis.
7. order: Specifies the order in which flex items are displayed, allowing for rearranging without changing the HTML structure.

In React Native, Flexbox is also used for layout and positioning of elements, similar to its usage in CSS for the web. React Native utilizes the same concepts and properties of Flexbox to create flexible and responsive layouts for mobile applications.

Here is a React Native code example using flexbox:

import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native'
import LinearGradient from 'react-native-linear-gradient';

class App extends Component {
  render(){
    return(
      <View style={styles.container}>
      <Text style={styles.heading}>React Native Flexbox</Text>
      <View style={styles.flexContainer}>

      <View style={[styles.item,{backgroundColor: '#9E6F21'}]}>
      <Text style={styles.text}>
         1
      </Text>
      </View>

      <View style={[styles.item,{backgroundColor: '#FFEEB3'}]}>
      <Text style={styles.text}>
         2
      </Text>
      </View>

      <View style={[styles.item, {backgroundColor: '#B8E7E1'}]}>
      <Text style={styles.text}>
         3
      </Text>
      </View>

      <View style={[styles.item,{backgroundColor: '#D4FAFC'}]}>
      <Text style={styles.text}>
         4
      </Text>
      </View>

      <View style={[styles.item,{backgroundColor: '#BFCCB5'}]}>
      <Text style={styles.text}>
         5
      </Text>
      </View>

      <View style={[styles.item,{backgroundColor: '#7C96AB'}]}>
      <Text style={styles.text}>
         6
      </Text>
      </View>

      <View style={[styles.item,{backgroundColor: '#B7B7B7'}]}>
      <Text style={styles.text}>
         7
      </Text>
      </View>

      <View style={[styles.item,{backgroundColor: '#EDC6B1'}]}>
      <Text style={styles.text}>
         8
      </Text>
      </View>

      <View style={[styles.item,{backgroundColor: '#F3DEBA'}]}>
      <Text style={styles.text}>
         9
      </Text>
      </View>

      <View style={[styles.item,{backgroundColor: '#A9907E'}]}>
      <Text style={styles.text}>
         10
      </Text>
      </View>

      <View style={[styles.item,{backgroundColor: '#ABC4AA'}]}>
      <Text style={styles.text}>
         11
      </Text>
      </View>

      <View style={[styles.item,{backgroundColor: '#675D50'}]}>
      <Text style={styles.text}>
         12
      </Text>
      </View>

      <View style={[styles.item,{backgroundColor: '#867070'}]}>
      <Text style={styles.text}>
         13
      </Text>
      </View>

      <View style={[styles.item,{backgroundColor: '#D5B4B4'}]}>
      <Text style={styles.text}>
         14
      </Text>
      </View>

      <View style={[styles.item,{backgroundColor: '#AA5656'}]}>
      <Text style={styles.text}>
         15
      </Text>
      </View>

      </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  flexContainer: {
    flex: 1,
    width: '100%',
    flexDirection: 'row',
    justifyContent: 'space-evenly',
    flexWrap: 'wrap',
    marginTop: 18
  },
  item: {
    width: 108,
    height: 108,
    marginBottom: 18,
    alignItems: 'center',
    justifyContent: 'center'
  },
  text: {
    color: 'black',
    fontWeight: 'bold',
    fontSize: 36
  },
  heading: {
    textAlign: 'center',
    marginTop: 18,
    fontSize: 27,
    color: 'black',
    fontWeight: 'bold'
  }
})
export default App;

Here’s the result:

In the example above, we define a container View with the styles.flexContainer style. We set flex: 1 to make the container fill the available space, flexDirection: 'row' to arrange the child elements in a row, justifyContent: 'space-evenly' to have an equal amount of space between the items within the container, and alignItems: 'center' to vertically center them.

Inside the container, we have three child View components with the styles.item style. These items are given a fixed width and height and some margin for spacing. If you’re looking how to add gradient to your React Native project, you can check out this article

Conclusion

You can quickly construct sophisticated and responsive layouts for your mobile applications by utilising Flexbox attributes within React Native.