FlexCenter

Flex.Center is a component that places child elements at the exact center both horizontally and vertically based on Flexbox Layout. Both alignItems and justifyContent properties are set to 'center', placing child elements at the center of the parent component. You can easily center-align elements using Flexbox.

Signature

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

Example

Example of placing elements at the exact center

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

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