StackHorizontal

Stack.Horizontal is a component that arranges child elements in a horizontal stack. Using this component, you can easily control the spacing between child elements with the gutter property, maintaining a consistent layout in the horizontal direction.

Signature

StackHorizontal: import('react').ForwardRefExoticComponent<
  StackWithoutDirectionProps & import('react').RefAttributes<View>
>;

Parameter

• propsobject
  

  The props object passed to the component.

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

    The value that sets the horizontal alignment of child elements. Works the same as Flexbox's align-items property, with a default value of 'stretch' that expands child elements to match the parent's width when their width is 'auto'.

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

    The value that sets the horizontal alignment of child elements. Works the same as Flexbox's justify-content property, with a default value of 'flex-start' that aligns child elements to the top.

  • props.gutternumber | ReactElement
    

    The value that sets the spacing between child elements. When a number is provided, it sets the margin in pixels, and when a ReactElement is passed, that component is used as the spacing. Using a number allows for precise control of spacing, while using a ReactElement enables more complex custom spacing implementations.

Example

Example of arranging elements horizontally with a spacing of 16

import { Stack } from '@granite-js/react-native';
import { View, Text } from 'react-native';

function StackHorizontalExample() {
  return (
    <Stack.Horizontal gutter={16}>
      <Text>Arrange horizontally with 16 spacing</Text>
      <Text>1</Text>
      <Text>2</Text>
      <Text>3</Text>
    </Stack.Horizontal>
  );
}