StackVertical

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

Signature

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

Parameter

• propsobject
  

  The props object passed to the component.

  • props.alignstring · 'stretch'
    

    The value that sets the vertical 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 height when their height is 'auto'.

  • props.justifystring · '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 left.

  • 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 vertically with a spacing of 16

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

function StackVerticalExample() {
  return (
    <Stack.Vertical gutter={16}>
      <Text>Arrange vertically with 16 spacing</Text>
      <Text>1</Text>
      <Text>2</Text>
      <Text>3</Text>
    </Stack.Vertical>
  );
}