FlexCenterVertical

Flex.CenterVertical is a component for vertically centering child elements based on Flexbox Layout. The justifyContent property is set to 'center', placing child elements at the vertical center of the parent component.

Signature

FlexCenterVertical: 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 'stretch'.

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

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

  • 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.CenterVertical component. Used to specify styles other than Flexbox layout, such as background color, border, and margin. Default value is undefined.

Example

Example of vertically centering elements

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

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