FlexCenterHorizontal

Flex.CenterHorizontal is a component for horizontally centering child elements based on Flexbox Layout. The alignItems property is set to 'center', placing child elements at the horizontal center of the parent component.

Signature

FlexCenterHorizontal: import('react').ForwardRefExoticComponent<Props & import('react').RefAttributes<View>>;

Parameter

• propsobject
  

  The props object passed to the component.

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

    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 'center'.

  • 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. Default value is 'column', arranging elements vertically.

  • props.styleViewProps['style']
    

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

Example

Example of horizontally centering elements

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

function FlexCenterHorizontalExample() {
  return (
    <Flex.CenterHorizontal style={{ width: '100%', height: 100, borderWidth: 1 }}>
      <Text>Place at the horizontal center</Text>
    </Flex.CenterHorizontal>
  );
}