Flex

Flex is a component that arranges child elements based on Flexbox Layout. Using Flexbox, you can easily align elements horizontally and vertically, and set center alignment with ease. Use Flex.Center to place child elements in the center, Flex.CenterVertical for vertical center alignment, and Flex.CenterHorizontal for horizontal center alignment.

Signature

Flex: FlexType;

Parameter

• propsobject
  

  The props object passed to the component.

  • props.align'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline' · 'stretch'
    

    The alignment value for child elements along the main axis (Flex direction). For example, in 'column' direction, 'center' places elements at the horizontal center, and 'stretch' expands elements to match the parent's width when their width is 'auto'. This value is applied to `alignItems`, with a default value of 'stretch'.

  • props.justify'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly' · 'flex-start'
    

    The alignment value for child elements along the cross axis (perpendicular to Flex direction). For example, in 'column' direction, flex-start places elements at the top of the parent, and 'center' places them at the vertical center. This value is applied to `justifyContent`, with a default value of 'flex-start'.

  • props.direction'column' | 'row' · 'column'
    

    The value that sets the direction in which child elements are arranged. This is applied to `flexDirection`, with a default value of 'column'.

  • props.styleViewProps['style']
    

    The style object to be applied to the Flex component. Used to specify styles other than Flexbox layout, such as background color, border, and margin. Default value is undefined.

Property

• CenterFlexCenter
  

  Flex.Center is a component that places child elements at the exact center both horizontally and vertically based on Flex Layout.

• CenterVerticalFlexCenterVertical
  

  Flex.CenterVertical is a component for vertically centering child elements based on Flex Layout.

• CenterHorizontalFlexCenterHorizontal
  

  Flex.CenterHorizontal is a component for horizontally centering child elements based on Flex Layout.

Example

Example of arranging elements horizontally and vertically

import { Flex } from '@granite-js/react-native';
import { Text } from 'react-native';

function FlexExample() {
  return (
    <>
      <Flex direction="column">
        <Text>Arrange vertically</Text>
        <Text>1</Text>
        <Text>2</Text>
        <Text>3</Text>
      </Flex>
      <Flex direction="row">
        <Text>Arrange horizontally</Text>
        <Text>1</Text>
        <Text>2</Text>
        <Text>3</Text>
      </Flex>
    </>
  );
}