feat: add gap to row and add stacks component

Author: Naturalclar

src/Utils/Row.tsx

@@ -1,30 +1,31 @@
-import * as React from 'react';
-import {View, StyleSheet, type ViewProps, type FlexStyle} from 'react-native';
+import * as React from "react";
+import { View, StyleSheet, type ViewProps, type FlexStyle } from "react-native";
 
 const styles = StyleSheet.create({
   default: {
-    flexDirection: 'row',
+    flexDirection: "row",
   },
 });
 
 type Props = {
-  alignItems?: FlexStyle['alignItems'];
-  justifyContent?: FlexStyle['justifyContent'];
-  alignContent?: FlexStyle['alignContent'];
-  alignSelf?: FlexStyle['alignSelf'];
+  alignItems?: FlexStyle["alignItems"];
+  justifyContent?: FlexStyle["justifyContent"];
+  alignContent?: FlexStyle["alignContent"];
+  alignSelf?: FlexStyle["alignSelf"];
+  gap?: number;
 } & ViewProps;
 
 /**
  * Row
  * - A View Component whose default flexDiretion is row
  */
 export const Row: React.FC<Props> = React.memo(
-  ({style, alignItems, alignContent, justifyContent, alignSelf, ...rest}) => {
+  ({ style, alignItems, alignContent, justifyContent, alignSelf, ...rest }) => {
     return (
       <View
         style={[
           styles.default,
-          {alignItems, alignContent, justifyContent, alignSelf},
+          { alignItems, alignContent, justifyContent, alignSelf, gap },
           StyleSheet.flatten(style),
         ]}
         {...rest}
@@ -33,4 +34,4 @@ export const Row: React.FC<Props> = React.memo(
   },
 );
 
-Row.displayName = 'Row';
+Row.displayName = "Row";

src/Utils/Stacks.tsx

@@ -0,0 +1,110 @@
+import * as React from "react";
+import { View, StyleSheet, type ViewProps, type FlexStyle } from "react-native";
+
+type StackProps = {
+  gap?: number;
+  padding?: number;
+  paddingHorizontal?: number;
+  flex?: number;
+  paddingVertical?: number;
+  borderBottomWidth?: number;
+  borderTopWidth?: number;
+  borderRightWidth?: number;
+  borderLeftWidth?: number;
+  borderColor?: string;
+  alignItems?: FlexStyle["alignItems"];
+  justifyContent?: FlexStyle["justifyContent"];
+  alignContent?: FlexStyle["alignContent"];
+  alignSelf?: FlexStyle["alignSelf"];
+} & ViewProps;
+export const XStack = React.memo<StackProps>(
+  ({
+    gap,
+    style,
+    padding,
+    paddingHorizontal,
+    paddingVertical,
+    borderBottomWidth,
+    borderTopWidth,
+    borderRightWidth,
+    borderLeftWidth,
+    borderColor,
+    flex,
+    justifyContent,
+    alignItems,
+    alignContent,
+    alignSelf,
+    ...rest
+  }) => (
+    <View
+      style={StyleSheet.flatten([
+        styles.flexRow,
+        {
+          gap,
+          padding,
+          flex,
+          paddingHorizontal,
+          paddingVertical,
+          borderBottomWidth,
+          borderTopWidth,
+          borderRightWidth,
+          borderLeftWidth,
+          borderColor,
+          justifyContent,
+          alignItems,
+        },
+        style,
+      ])}
+      {...rest}
+    />
+  ),
+);
+XStack.displayName = "XStack";
+export const YStack = React.memo<StackProps>(
+  ({
+    gap,
+    padding,
+    style,
+    paddingHorizontal,
+    paddingVertical,
+    flex,
+    borderBottomWidth,
+    borderTopWidth,
+    borderRightWidth,
+    borderLeftWidth,
+    borderColor,
+    justifyContent,
+    alignItems,
+    alignContent,
+    alignSelf,
+    ...rest
+  }) => (
+    <View
+      style={StyleSheet.flatten([
+        {
+          gap,
+          padding,
+          flex,
+          paddingHorizontal,
+          paddingVertical,
+          borderBottomWidth,
+          borderTopWidth,
+          borderRightWidth,
+          borderLeftWidth,
+          borderColor,
+          justifyContent,
+          alignItems,
+        },
+        style,
+      ])}
+      {...rest}
+    />
+  ),
+);
+YStack.displayName = "YStack";
+
+const styles = StyleSheet.create({
+  flexRow: {
+    flexDirection: "row",
+  },
+});

src/Utils/index.ts

@@ -1,8 +1,9 @@
-export {Flex} from './Flex';
-export {Margin} from './Margin';
-export {PressableOpacity} from './PressableOpacity';
-export {Row} from './Row';
-export {Stack} from './Stack';
-export {StaticPage} from './StaticPage';
-export {FullPage} from './FullPage';
-export * from './Platform';
+export { Flex } from "./Flex";
+export { Margin } from "./Margin";
+export { PressableOpacity } from "./PressableOpacity";
+export { Row } from "./Row";
+export { Stack } from "./Stack";
+export * from "./Stacks";
+export { StaticPage } from "./StaticPage";
+export { FullPage } from "./FullPage";
+export * from "./Platform";