Stack

1import { cva, type VariantProps } from "class-variance-authority";
2import { View } from "react-native";
3import { cn } from "../lib/utils";
4 
5// Types
6export type StackProps = React.ComponentProps<typeof View> &
7  VariantProps<typeof stackVariants>;
8 
9// Components
10export const Stack = ({
11  children,
12  className,
13  gap,
14  direction,
15  ...props
16}: StackProps) => {
17  return (
18    <View
19      className={cn(stackVariants({ className, direction, gap }))}
20      {...props}
21    >
22      {children}
23    </View>
24  );
25};
26 
27// Styles
28const stackVariants = cva("flex", {
29  variants: {
30    direction: {
31      column: "flex-col",
32      "column-reverse": "flex-col-reverse",
33      row: "flex-row",
34      "row-reverse": "flex-row-reverse",
35    },
36    gap: {
37      "2xl": "gap-6",
38      lg: "gap-4",
39      md: "gap-3",
40      none: "gap-0",
41      sm: "gap-2",
42      xl: "gap-5",
43      xs: "gap-1",
44    },
45  },
46});