Grid

Block component it is a wrapper over the React-Native View component, using the Flexbox algorithm which is designed to provide a consistent layout on different screen sizes. We will enhance this component to support the grid and layout styling using properties that will speed up our development time.

You will normally use a combination of BlockProps to achieve the right layout.

API

import { Block } from '@flexnative/layout';

Component

This component extends React.PureComponent, which optimizes the component by preventing unnecessary re-renders when the props haven't changed.

Block Type: React.PureComponent<BlockProps>

Properties

info

BlockProps extends ViewProps from React Native, so any property that is available in the View component is also available in the Block component.

Name	Type	Required	Default Value	Description
flex	`ViewStyle["flex"]`	false	1	Optional property to set flex style for block component.
row	`boolean`	false	false	Optional boolean property to determine if the layout should be in a row format. If set to `true`, it likely indicates that the component's children should be displayed horizontally.
justifyContent	`ViewStyle["justifyContent"]`	false	undefined	Alternative optional property name for justify content along the main axis.
justify	`ViewStyle["justifyContent"]`	false	undefined	A short version for `justifyContent` style property. Same as `justifyContent` property.
alignItems	`ViewStyle["alignItems"]`	false	undefined	Optional property to set alignment of items along the cross-axis.
align	`ViewStyle["alignItems"]`	false	undefined	A short version for `alignItems` style property. Same as `alignItems` property.
alignContent	`ViewStyle["alignContent"]`	false	undefined	Defines the distribution of lines along the cross-axis. This only has effect when items are wrapped to multiple lines using `flexWrap`.
content	`ViewStyle["alignContent"]`	false	undefined	A short version for `alignContent` style property. Same as `alignContent` property.
width	`ViewStyle["width"]`	false	undefined	Optional property to set the width of the `Block` component.
height	`ViewStyle["height"]`	false	undefined	Optional property to set the height of the `Block` component.
wrap	`ViewStyle["flexWrap"]`	false	false	It controls whether children can wrap around after they hit the end of a flex container.
gap	`ViewStyle["gap"]`	false	undefined	Optional property to specify the gap between rows or column in grid layout.
rowGap	`ViewStyle["rowGap"]`	false	undefined	Optional property to specify the gap between rows in grid layout.
columnGap	`ViewStyle["columnGap"]`	false	undefined	Optional property to specify the gap between columns in grid layout.
padding	`ViewStyle["padding"]`	false	undefined	Optional property to set padding for the `Block` component.
backgroundColor	`ViewStyle["backgroundColor"]`	false	undefined	Optional property to set the background color of the `Block` component.
children	`ReactNode`	false	undefined	The children of the `Block` component.

Use case Examples

The following example demonstrates the Box component in action.

Flex

flex will define how items are going to “fill” over the available space along your main axis. Space will be divided according to each element's flex property.

Preview
Code

flex: 0.5

flex: 2

flex: 1.5

/**
 * @ Author: Redon Alla
 * @ Create Time: 2025-01-04 19:31:03
 * @ Modified by: Redon Alla
 * @ Modified time: 2025-01-06 20:02:17
 * @ Description: Examples of `Block` component with different `flex´ values.
 */

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

import { Block } from "@flexnative/layout";


export default class extends React.PureComponent {
  public render() {
    return (
      <div className='example-block' style={{ flexDirection: 'row' }}>
        <Block backgroundColor='#16a085' flex={0.5}>
          <Text style={styles.text}>flex: 0.5</Text>
        </Block>
        <Block backgroundColor='#FFC300' flex={2}>
          <Text style={styles.text}>flex: 2</Text>
          </Block>
        <Block backgroundColor='#FF5733' flex={1.5}>
          <Text style={styles.text}>flex: 1.5</Text>
        </Block>
      </div>
    );
  }
}

const styles = StyleSheet.create({
  text: {
    padding: 10,
    color: '#fff'
  }
});

Row

row will define the flexDirection. If row is set to true, flexDirection it is set to row and component's children should be displayed horizontally, otherwise flexDirection it is set to column and component's children should be displayed vertically.

Preview
Code

Block 1. col 1

Block 1. col 2

Block 2. row 1

Block 2. row 2

/**
 * @ Author: Redon Alla
 * @ Create Time: 2025-01-04 19:31:03
 * @ Modified by: Redon Alla
 * @ Modified time: 2025-01-05 20:15:19
 * @ Description: Examples of `Block` component with different `row values.
 */

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

import { Block } from "@flexnative/layout";


export default class extends React.PureComponent {
  public render() {
    return (
      <div className='example-block'>
        <Block row>
          <Block backgroundColor='#16a085'>
            <Text style={styles.text}>Block 1. col 1</Text>
          </Block>
          
          <Block backgroundColor='#FFC300'>
            <Text style={styles.text}>Block 1. col 2</Text>
          </Block>
        </Block>

        <Block>
          <Block backgroundColor='#FF5733'>
            <Text style={styles.text}>Block 2. row 1</Text>
          </Block>

          <Block backgroundColor='#C70039'>
            <Text style={styles.text}>Block 2. row 2</Text>
          </Block>
        </Block>
      </div>
    );
  }
}

const styles = StyleSheet.create({
  text: {
    padding: 10,
    color: '#fff'
  }
});

Justify Content

justifyContent specifies how to align children within the main axis of their container. For example, you can use this property to center a child horizontally within a container with flexDirection set to row or vertically within a container with flexDirection set to column.

Property justify it is added as a short version for justifyContent style property.

Preview
Code

flex-start

flex-end

center

space-around

space-between

space-evenly

/**
 * @ Author: Redon Alla
 * @ Create Time: 2025-01-04 19:31:03
 * @ Modified by: Redon Alla
 * @ Modified time: 2025-01-05 21:12:29
 * @ Description: Examples of `Block` component with justifyContent.
 */

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

import { Block } from "@flexnative/layout";


export default class extends React.PureComponent {
  public render() {
    return (
      <div className='example-block'>
        <Block>
          <Block justifyContent="flex-start" backgroundColor='#16a085' style={styles.block}>
            <Text style={styles.text}>flex-start</Text>
          </Block>
          
          <Block justifyContent='flex-end' backgroundColor='#FFC300' style={styles.block}>
            <Text style={styles.text}>flex-end</Text>
          </Block>

          <Block justifyContent='center' backgroundColor='#FF5733' style={styles.block}>
            <Text style={styles.text}>center</Text>
          </Block>

          <Block justifyContent='space-around' backgroundColor='#C70039' style={styles.block}>
            <Text style={styles.text}>space-around</Text>
            <Text style={styles.text}>space-around</Text>
          </Block>

          <Block justifyContent='space-between' backgroundColor='#9b59b6' style={styles.block}>
            <Text style={styles.text}>space-between</Text>
            <Text style={styles.text}>space-between</Text>
          </Block>

          <Block justifyContent='space-evenly' backgroundColor='#2980b9' style={styles.block}>
            <Text style={styles.text}>space-evenly</Text>
            <Text style={styles.text}>space-evenly</Text>
          </Block>
        </Block>
      </div>
    );
  }
}

const styles = StyleSheet.create({
  text: {
    color: '#fff'
  },
  block: {
    height: 100,
  }
});

Align Items

alignItems defines how to align children along the cross axis of their container.

Property align it is added as a short version for alignItems style property.

Preview
Code

center

flex-end

flex-start

baseline

stretch

/**
 * @ Author: Redon Alla
 * @ Create Time: 2025-01-04 19:31:03
 * @ Modified by: Redon Alla
 * @ Modified time: 2025-01-05 21:33:18
 * @ Description: Examples of `Block` component with alignItems.
 */

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

import { Block } from "@flexnative/layout";


export default class extends React.PureComponent {
  public render() {
    return (
      <div className='example-block'>
        <Block>
          <Block alignItems='center' backgroundColor='#16a085' style={styles.block}>
            <Text style={styles.text}>center</Text>
          </Block>
          
          <Block alignItems='flex-end' backgroundColor='#FFC300' style={styles.block}>
            <Text style={styles.text}>flex-end</Text>
          </Block>

          <Block alignItems='flex-start' backgroundColor='#FF5733' style={styles.block}>
            <Text style={styles.text}>flex-start</Text>
          </Block>

          <Block alignItems='baseline' backgroundColor='#2980b9' style={styles.block}>
            <Text style={styles.text}>baseline</Text>
          </Block>

          <Block alignItems='stretch' backgroundColor='#C70039' style={styles.block}>
            <Text style={styles.text}>stretch</Text>
          </Block>
        </Block>
      </div>
    );
  }
}

const styles = StyleSheet.create({
  text: {
    padding: 5,
    borderRadius: 3,
    borderWidth: 1,
    borderColor: '#fff',
    color: '#fff'
  },
  block: {
    padding: 5,
    height: 100,
  }
});

Align Content

alignContent defines the distribution of lines along the cross-axis and it has effect only when items are wrapped to multiple lines using flexWrap.

Property content it is added as a short version for alignContent style property.

Preview
Code

center

flex-end

flex-start

space-around

stretch

space-between

space-evenly

/**
 * @ Author: Redon Alla
 * @ Create Time: 2025-01-04 19:31:03
 * @ Modified by: Redon Alla
 * @ Modified time: 2025-01-05 22:18:59
 * @ Description: Examples of `Block` component with alignContent.
 */

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

import { Block } from "@flexnative/layout";


export default class extends React.PureComponent {
  public render() {
    return (
      <div className='example-block'>
        <Block>
          <Block alignContent='center' backgroundColor='#16a085' style={styles.block}>
            <Text style={styles.text}>center</Text>
          </Block>
          
          <Block alignContent='flex-end' backgroundColor='#FFC300' style={styles.block}>
            <Text style={styles.text}>flex-end</Text>
          </Block>

          <Block alignContent='flex-start' backgroundColor='#FF5733' style={styles.block}>
            <Text style={styles.text}>flex-start</Text>
          </Block>

          <Block alignContent='space-around' backgroundColor='#2980b9' style={styles.block}>
            <Text style={styles.text}>space-around</Text>
            <Text style={styles.text}>space-around</Text>
          </Block>

          <Block alignContent='stretch' backgroundColor='#C70039' style={styles.block}>
            <Text style={styles.text}>stretch</Text>
            <Text style={styles.text}>stretch</Text>
          </Block>

          <Block alignContent='space-between' backgroundColor='#9b59b6' style={styles.block}>
            <Text style={styles.text}>space-between</Text>
            <Text style={styles.text}>space-between</Text>
          </Block>

          <Block alignContent='space-evenly' backgroundColor='#2980b9' style={styles.block}>
            <Text style={styles.text}>space-evenly</Text>
            <Text style={styles.text}>space-evenly</Text>
          </Block>
        </Block>
      </div>
    );
  }
}

const styles = StyleSheet.create({
  text: {
    padding: 5,
    borderRadius: 3,
    borderWidth: 1,
    borderColor: '#fff',
    color: '#fff'
  },
  block: {
    padding: 5,
    height: 100,
  }
});

Width

Specify the width of the Block component.

Preview
Code

width: 150

width: 200

width: '50%'

/**
 * @ Author: Redon Alla
 * @ Create Time: 2025-01-04 19:31:03
 * @ Modified by: Redon Alla
 * @ Modified time: 2025-01-05 22:33:28
 * @ Description: Examples of `Block` component with different width.
 */

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

import { Block } from "@flexnative/layout";


export default class extends React.PureComponent {
  public render() {
    return (
      <div className='example-block'>
        <Block>
          <Block backgroundColor='#16a085' width={150}>
            <Text style={styles.text}>width: 150</Text>
          </Block>
          <Block backgroundColor='#FFC300' width={200}>
            <Text style={styles.text}>width: 200</Text>
          </Block>
          <Block backgroundColor='#FF5733' width={'50%'}>
            <Text style={styles.text}>width: '50%'</Text>
          </Block>
        </Block>
      </div>
    );
  }
}

const styles = StyleSheet.create({
  text: {
    padding: 5,
    borderRadius: 3,
    borderWidth: 1,
    borderColor: '#fff',
    color: '#fff'
  },
});

Height

Specify the height of the Block component.

Preview
Code

height: 30

height: 50

height: '50%'

/**
 * @ Author: Redon Alla
 * @ Create Time: 2025-01-04 19:31:03
 * @ Modified by: Redon Alla
 * @ Modified time: 2025-01-05 22:38:23
 * @ Description: Examples of `Block` component with different width.
 */

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

import { Block } from "@flexnative/layout";


export default class extends React.PureComponent {
  public render() {
    return (
      <div className='example-block'>
        <Block>
          <Block backgroundColor='#16a085' height={30}>
            <Text style={styles.text}>height: 30</Text>
          </Block>
          <Block backgroundColor='#FFC300' height={50}>
            <Text style={styles.text}>height: 50</Text>
          </Block>
          <Block backgroundColor='#FF5733' height={'50%'}>
            <Text style={styles.text}>height: '50%'</Text>
          </Block>
        </Block>
      </div>
    );
  }
}

const styles = StyleSheet.create({
  text: {
    padding: 5,
    borderRadius: 3,
    borderWidth: 1,
    borderColor: '#fff',
    color: '#fff'
  },
});

Wrap

wrap controls whether children can wrap around after they hit the end of a flex container.

Preview
Code

nowrap

wrap

wrap-reverse: 1

wrap-reverse: 2

wrap-reverse: 3

wrap-reverse: 4

wrap-reverse: 5

wrap-reverse: 6

wrap-reverse: 7

wrap-reverse: 8

wrap-reverse: 9

wrap-reverse: 10

wrap-reverse: 11

wrap-reverse: 12

wrap-reverse: 13

wrap-reverse: 14

/**
 * @ Author: Redon Alla
 * @ Create Time: 2025-01-04 19:31:03
 * @ Modified by: Redon Alla
 * @ Modified time: 2025-01-06 20:03:03
 * @ Description: Examples of `Block` component with different width.
 */

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

import { Block } from "@flexnative/layout";


export default class extends React.PureComponent {
  public render() {
    return (
      <div className='example-block'>
        <Block>
          <Block backgroundColor='#16a085' row wrap='nowrap' style={styles.block}>
            <Text style={styles.text}>nowrap</Text>
            <Text style={styles.text}>nowrap</Text>
            <Text style={styles.text}>nowrap</Text>
            <Text style={styles.text}>nowrap</Text>
            <Text style={styles.text}>nowrap</Text>
            <Text style={styles.text}>nowrap</Text>
            <Text style={styles.text}>nowrap</Text>
            <Text style={styles.text}>nowrap</Text>
            <Text style={styles.text}>nowrap</Text>
            <Text style={styles.text}>nowrap</Text>
            </Block>
          <Block backgroundColor='#FFC300' row wrap='wrap' style={styles.block}>
            <Text style={styles.text}>wrap</Text>
            <Text style={styles.text}>wrap</Text>
            <Text style={styles.text}>wrap</Text>
            <Text style={styles.text}>wrap</Text>
            <Text style={styles.text}>wrap</Text>
            <Text style={styles.text}>wrap</Text>
            <Text style={styles.text}>wrap</Text>
            <Text style={styles.text}>wrap</Text>
            <Text style={styles.text}>wrap</Text>
            <Text style={styles.text}>wrap</Text>
            <Text style={styles.text}>wrap</Text>
            <Text style={styles.text}>wrap</Text>
            <Text style={styles.text}>wrap</Text>
            <Text style={styles.text}>wrap</Text>
          </Block>
          <Block backgroundColor='#FF5733' row wrap='wrap-reverse' style={styles.block}>
            <Text style={styles.text}>wrap-reverse: 1</Text>
            <Text style={styles.text}>wrap-reverse: 2</Text>
            <Text style={styles.text}>wrap-reverse: 3</Text>
            <Text style={styles.text}>wrap-reverse: 4</Text>
            <Text style={styles.text}>wrap-reverse: 5</Text>
            <Text style={styles.text}>wrap-reverse: 6</Text>
            <Text style={styles.text}>wrap-reverse: 7</Text>
            <Text style={styles.text}>wrap-reverse: 8</Text>
            <Text style={styles.text}>wrap-reverse: 9</Text>
            <Text style={styles.text}>wrap-reverse: 10</Text>
            <Text style={styles.text}>wrap-reverse: 11</Text>
            <Text style={styles.text}>wrap-reverse: 12</Text>
            <Text style={styles.text}>wrap-reverse: 13</Text>
            <Text style={styles.text}>wrap-reverse: 14</Text>
          </Block>
        </Block>
      </div>
    );
  }
}

const styles = StyleSheet.create({
  block: {
    padding: 12
  },
  text: {
    padding: 5,
    borderRadius: 3,
    borderWidth: 1,
    borderColor: '#fff',
    color: '#fff'
  },
});

Gap

gap defines the size of the gap between the rows and between the columns in flexbox, grid or multi-column layout.

It is a shorthand for the following properties:

rowGap
columnGap

Preview
Code

Row 1 : Clo 1. flex: 1

Row 1 : Clo 2. flex: 2

Row 2 : Clo 1. flex: 1

Row 2 : Clo 2. flex: 2

/**
 * @ Author: Redon Alla
 * @ Create Time: 2025-01-04 19:31:03
 * @ Modified by: Redon Alla
 * @ Modified time: 2025-01-06 20:07:29
 * @ Description: Examples of `Block` component with different width.
 */

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

import { Block } from "@flexnative/layout";

const DEMO_COMPONENT_GAP = 12;

export default class extends React.PureComponent {
  public render() {
    return (
      <div className='example-block' style={{ height: 200 }}>
        <Block gap={DEMO_COMPONENT_GAP}>
          <Block row gap={DEMO_COMPONENT_GAP}>
            <Block backgroundColor='#FFC300'>
              <Text style={styles.text}>Row 1 : Clo 1. flex: 1</Text>
            </Block>
            <Block backgroundColor='#FF5733'>
              <Text style={styles.text}>Row 1 : Clo 2. flex: 2</Text>
            </Block>
          </Block>

          <Block gap={DEMO_COMPONENT_GAP}>
            <Block backgroundColor='#C70039'>
              <Text style={styles.text}>Row 2 : Clo 1. flex: 1</Text>
            </Block>
            <Block backgroundColor='#9b59b6'>
              <Text style={styles.text}>Row 2 : Clo 2. flex: 2</Text>
            </Block>
          </Block>
        </Block>
      </div>
    );
  }
}

const styles = StyleSheet.create({
  text: {
    padding: 5,
    borderRadius: 3,
    borderWidth: 1,
    borderColor: '#fff',
    color: '#fff'
  },
});

Row Gap

The rowGap property specifies the gap between the rows in a flexbox or grid layout.

Preview
Code

Row 1 : Clo 1. flex: 1

Row 1 : Clo 2. flex: 2

Row 2 : Clo 1. flex: 1

Row 2 : Clo 2. flex: 2

/**
 * @ Author: Redon Alla
 * @ Create Time: 2025-01-04 19:31:03
 * @ Modified by: Redon Alla
 * @ Modified time: 2025-01-06 20:09:56
 * @ Description: Examples of `Block` component with rowGap.
 */

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

import { Block } from "@flexnative/layout";

const DEMO_COMPONENT_GAP = 12;

export default class extends React.PureComponent {
  public render() {
    return (
      <div className='example-block' style={{ height: 200 }}>
        <Block rowGap={DEMO_COMPONENT_GAP}>
          <Block row rowGap={DEMO_COMPONENT_GAP}>
            <Block backgroundColor='#FFC300'>
              <Text style={styles.text}>Row 1 : Clo 1. flex: 1</Text>
            </Block>
            <Block backgroundColor='#FF5733'>
              <Text style={styles.text}>Row 1 : Clo 2. flex: 2</Text>
            </Block>
          </Block>

          <Block rowGap={DEMO_COMPONENT_GAP}>
            <Block backgroundColor='#C70039'>
              <Text style={styles.text}>Row 2 : Clo 1. flex: 1</Text>
            </Block>
            <Block backgroundColor='#9b59b6'>
              <Text style={styles.text}>Row 2 : Clo 2. flex: 2</Text>
            </Block>
          </Block>
        </Block>
      </div>
    );
  }
}

const styles = StyleSheet.create({
  text: {
    padding: 5,
    borderRadius: 3,
    borderWidth: 1,
    borderColor: '#fff',
    color: '#fff'
  },
});

Column Gap

The columnGap property specifies the gap between the columns in a flexbox or grid layout.

Preview
Code

Row 1 : Clo 1. flex: 1

Row 1 : Clo 2. flex: 2

Row 2 : Clo 1. flex: 1

Row 2 : Clo 2. flex: 2

/**
 * @ Author: Redon Alla
 * @ Create Time: 2025-01-04 19:31:03
 * @ Modified by: Redon Alla
 * @ Modified time: 2025-01-06 20:16:20
 * @ Description: Examples of `Block` component with columnGap.
 */

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

import { Block } from "@flexnative/layout";

const DEMO_COMPONENT_GAP = 12;

export default class extends React.PureComponent {
  public render() {
    return (
      <div className='example-block' style={{ height: 200 }}>
        <Block columnGap={DEMO_COMPONENT_GAP}>
          <Block row columnGap={DEMO_COMPONENT_GAP}>
            <Block backgroundColor='#FFC300'>
              <Text style={styles.text}>Row 1 : Clo 1. flex: 1</Text>
            </Block>
            <Block backgroundColor='#FF5733'>
              <Text style={styles.text}>Row 1 : Clo 2. flex: 2</Text>
            </Block>
          </Block>

          <Block columnGap={DEMO_COMPONENT_GAP}>
            <Block backgroundColor='#C70039'>
              <Text style={styles.text}>Row 2 : Clo 1. flex: 1</Text>
            </Block>
            <Block backgroundColor='#9b59b6'>
              <Text style={styles.text}>Row 2 : Clo 2. flex: 2</Text>
            </Block>
          </Block>
        </Block>
      </div>
    );
  }
}

const styles = StyleSheet.create({
  text: {
    padding: 5,
    borderRadius: 3,
    borderWidth: 1,
    borderColor: '#fff',
    color: '#fff'
  },
});

Padding

The padding property for padding top, bottom, left, right.

Preview
Code

padding: 5

padding: 20

padding: 45

/**
 * @ Author: Redon Alla
 * @ Create Time: 2025-01-04 19:31:03
 * @ Modified by: Redon Alla
 * @ Modified time: 2025-01-06 20:22:29
 * @ Description: Examples of `Block` component with padding.
 */

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

import { Block } from "@flexnative/layout";


export default class extends React.PureComponent {
  public render() {
    return (
      <div className='example-block'>
        <Block>
          <Block backgroundColor='#16a085' padding={5}>
            <Text style={styles.text}>padding: 5</Text>
          </Block>
          <Block backgroundColor='#FFC300' padding={20}>
            <Text style={styles.text}>padding: 20</Text>
          </Block>
          <Block backgroundColor='#FF5733' padding={45}>
            <Text style={styles.text}>padding: 45</Text>
          </Block>
        </Block>
      </div>
    );
  }
}

const styles = StyleSheet.create({
  text: {
    padding: 5,
    borderRadius: 3,
    borderWidth: 1,
    borderColor: '#fff',
    color: '#fff'
  },
});

Background Color

Preview
Code

crimson

hex: #229954

RGB: 255, 195, 0

HSL: 283, 39%, 53%

/**
 * @ Author: Redon Alla
 * @ Create Time: 2025-01-04 19:31:03
 * @ Modified by: Redon Alla
 * @ Modified time: 2025-01-06 21:04:12
 * @ Description: Examples of `Block` component with backgroundColor.
 */

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

import { Block } from "@flexnative/layout";

const DEMO_PADDING = 12;

export default class extends React.PureComponent {
  public render() {
    return (
      <div className='example-block'>
        <Block>
          <Block row>
            <Block backgroundColor='crimson' padding={DEMO_PADDING}>
              <Text style={styles.text}>crimson</Text>
            </Block>
            
            <Block backgroundColor='#229954' padding={DEMO_PADDING}>
              <Text style={styles.text}>hex: #229954</Text>
            </Block>
          </Block>

          <Block>
            <Block backgroundColor='rgb(255, 195, 0)' padding={DEMO_PADDING}>
              <Text style={styles.text}>RGB: 255, 195, 0</Text>
            </Block>

            <Block backgroundColor='hsl(283, 39%, 53%)' padding={DEMO_PADDING}>
              <Text style={styles.text}>HSL: 283, 39%, 53%</Text>
            </Block>
          </Block>
        </Block>
      </div>
    );
  }
}

const styles = StyleSheet.create({
  text: {
    padding: 5,
    borderRadius: 3,
    borderWidth: 1,
    borderColor: '#fff',
    color: '#fff'
  },
});

Playground

Live Editor

const DEMO_PADDING = 15;

const styles = {
  text: {
    padding: 5,
    borderRadius: 3,
    borderWidth: 1,
    borderColor: '#fff',
    color: '#fff'
  },
};

render(
  <Block>
    <Block row>
      <Block backgroundColor='crimson' padding={DEMO_PADDING}>
        <p style={styles.text}>crimson</p>
      </Block>
      
      <Block backgroundColor='#229954' padding={DEMO_PADDING}>
        <p style={styles.text}>hex: #229954</p>
      </Block>
    </Block>

    <Block>
      <Block backgroundColor='rgb(255, 195, 0)' padding={DEMO_PADDING}>
        <p style={styles.text}>RGB: 255, 195, 0</p>
      </Block>

      <Block backgroundColor='hsl(283, 39%, 53%)' padding={DEMO_PADDING}>
        <p style={styles.text}>HSL: 283, 39%, 53%</p>
      </Block>
    </Block>
  </Block>
);

Result

API​

Component​

Properties​

Use case Examples​

Flex​

Row​

Justify Content​

Align Items​

Align Content​

Width​

Height​

Wrap​

Gap​

Row Gap​

Column Gap​

Padding​

Background Color​

Playground​

API

Component

Properties

Use case Examples

Flex

Row

Justify Content

Align Items

Align Content

Width

Height

Wrap

Gap

Row Gap

Column Gap

Padding

Background Color

Playground