Add Layout Components (47)

example/src/LayoutExample.tsx

@@ -0,0 +1,79 @@
+import * as React from "react";
+import { Text } from "react-native";
+import {
+  AspectRatio,
+  HStack,
+  VStack,
+  ZStack,
+  Center,
+  Circle,
+  Square,
+} from "@draftbit/ui";
+import Section, { Container } from "./Section";
+
+const LayoutExample = () => {
+  return (
+    <Container style={{}}>
+      <Section title="Center" style={{}}>
+        <Center
+          style={{
+            width: 200,
+            height: 50,
+            borderColor: "red",
+            borderWidth: 1,
+          }}
+        >
+          <Text>Centered Text</Text>
+        </Center>
+      </Section>
+      <Section title="Circle" style={{}}>
+        <Circle
+          style={{
+            width: 100,
+            borderColor: "red",
+            borderWidth: 1,
+          }}
+        />
+      </Section>
+      <Section title="Square" style={{}}>
+        <Square
+          style={{
+            width: 100,
+            borderColor: "red",
+            borderWidth: 1,
+          }}
+        />
+      </Section>
+      <Section title="Aspect Ratio" style={{}}>
+        <AspectRatio
+          style={{
+            width: 200,
+            borderColor: "red",
+            borderWidth: 1,
+          }}
+          aspectRatio={16 / 9}
+        />
+      </Section>
+      <Section title="HStack" style={{}}>
+        <HStack>
+          <Text>HStack 1</Text>
+          <Text>HStack 2</Text>
+        </HStack>
+      </Section>
+      <Section title="VStack" style={{}}>
+        <VStack>
+          <Text>VStack 1</Text>
+          <Text>VStack 2</Text>
+        </VStack>
+      </Section>
+      <Section title="ZStack" style={{}}>
+        <ZStack>
+          <Text>ZStack 1</Text>
+          <Text>ZStack 2</Text>
+        </ZStack>
+      </Section>
+    </Container>
+  );
+};
+
+export default LayoutExample;

packages/core/src/components/Layout/AspectRatio.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { View, ViewProps } from "react-native";
+
+interface AspectRatioProps extends ViewProps {
+  aspectRatio?: number;
+}
+
+const AspectRatio: React.FC<AspectRatioProps> = ({
+  aspectRatio = 1,
+  style,
+  ...rest
+}) => {
+  return <View {...rest} style={[{ aspectRatio }, style]} />;
+};
+
+export default AspectRatio;

packages/core/src/components/Layout/Center.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { View, ViewProps, StyleSheet } from "react-native";
+
+const Center: React.FC<ViewProps> = ({ style, ...rest }) => {
+  return <View {...rest} style={[styles.center, style]} />;
+};
+
+const styles = StyleSheet.create({
+  center: {
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});
+
+export default Center;

packages/core/src/components/Layout/Circle.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { ViewProps, StyleSheet } from "react-native";
+import Square from "./Square";
+
+interface CircleProps extends ViewProps {
+  size?: number;
+}
+
+const Circle: React.FC<CircleProps> = ({ size, style, ...rest }) => {
+  return <Square {...rest} size={size} style={[style, styles.circle]} />;
+};
+
+const styles = StyleSheet.create({
+  circle: {
+    borderRadius: 1000, // Border radius maxes out as a circle, use an overly large number to ensure circle in all cases
+  },
+});
+
+export default Circle;

packages/core/src/components/Layout/HStack.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { View, ViewProps, StyleSheet } from "react-native";
+
+const HStack: React.FC<ViewProps> = ({ style, ...rest }) => {
+  return <View {...rest} style={[styles.hStack, style]} />;
+};
+
+const styles = StyleSheet.create({
+  hStack: {
+    flexDirection: "row",
+  },
+});
+
+export default HStack;

packages/core/src/components/Layout/Square.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { ViewProps } from "react-native";
+import Center from "./Center";
+
+interface SquareProps extends ViewProps {
+  size?: number;
+}
+
+const Square: React.FC<SquareProps> = ({ size, style, onLayout, ...rest }) => {
+  const [calculatedSize, setCalculatedSize] = React.useState(0);
+
+  return (
+    <Center
+      onLayout={(e) => {
+        const layout = e.nativeEvent.layout;
+        setCalculatedSize(Math.max(layout.width, layout.height));
+        onLayout?.(e);
+      }}
+      {...rest}
+      style={[
+        style,
+        size != undefined ? { width: size, height: size } : {},
+        calculatedSize > 0
+          ? {
+              width: calculatedSize,
+              height: calculatedSize,
+            }
+          : {},
+      ]}
+    />
+  );
+};
+
+export default Square;

packages/core/src/components/Layout/VStack.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { View, ViewProps, StyleSheet } from "react-native";
+
+const VStack: React.FC<ViewProps> = ({ style, ...rest }) => {
+  return <View {...rest} style={[styles.vStack, style]} />;
+};
+
+const styles = StyleSheet.create({
+  vStack: {
+    flexDirection: "column",
+  },
+});
+
+export default VStack;

packages/core/src/components/Layout/ZStack.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { View, ViewProps } from "react-native";
+
+interface ZStackProps extends ViewProps {
+  reversed?: boolean;
+}
+
+const ZStack: React.FC<ZStackProps> = ({ reversed, children, ...rest }) => {
+  const absoluteChildren = React.useMemo(() => {
+    let childrenArray = React.Children.toArray(
+      children
+    ) as React.ReactElement[];
+
+    if (reversed) {
+      childrenArray = childrenArray.reverse();
+    }
+
+    return childrenArray.map((child, index) => {
+      const props = child.props || {};
+      return React.cloneElement(
+        child,
+        {
+          ...props,
+          style: { position: "absolute", zIndex: index + 1, ...props.style },
+        },
+        props.children
+      );
+    });
+  }, [children, reversed]);
+
+  return <View {...rest}>{absoluteChildren}</View>;
+};
+
+export default ZStack;

packages/core/src/components/Layout/index.tsx

@@ -0,0 +1,7 @@
+export { default as AspectRatio } from "./AspectRatio";
+export { default as Circle } from "./Circle";
+export { default as Center } from "./Center";
+export { default as HStack } from "./HStack";
+export { default as VStack } from "./VStack";
+export { default as ZStack } from "./ZStack";
+export { default as Square } from "./Square";

packages/core/src/components/Layout.tsx → packages/core/src/deprecated-components/Layout.tsx

@@ -3,6 +3,9 @@ import { View, StyleProp, ViewStyle } from "react-native";
 // @ts-ignore
 import type { ViewStyleProp } from "react-native/Libraries/StyleSheet/StyleSheet";
 
+/**
+ * @deprecated DEPRECATED
+ */
 export function Center({
   width = 240,
   height = 200,
@@ -36,6 +39,9 @@ export function Center({
   );
 }
 
+/**
+ * @deprecated DEPRECATED
+ */
 export function Circle({
   size = 50,
   bgColor,
@@ -65,6 +71,9 @@ export function Circle({
   );
 }
 
+/**
+ * @deprecated DEPRECATED
+ */
 export function Square({
   size = 50,
   bgColor,
@@ -122,6 +131,9 @@ export function Row({
   );
 }
 
+/**
+ * @deprecated DEPRECATED
+ */
 export function Spacer({
   top = 8,
   right = 8,

packages/core/src/index.tsx

@@ -25,7 +25,6 @@ export {
   ActionSheetCancel,
 } from "./components/ActionSheet";
 export { Swiper, SwiperItem } from "./components/Swiper";
-export { Center, Circle, Square, Spacer } from "./components/Layout";
 export {
   RadioButton,
   RadioButtonGroup,
@@ -64,6 +63,15 @@ export {
   CodeInputCell,
   CodeInputText,
 } from "./components/CodeInput";
+export {
+  AspectRatio,
+  Circle,
+  Center,
+  HStack,
+  VStack,
+  ZStack,
+  Square,
+} from "./components/Layout";
 
 /* Deprecated: Fix or Delete!  */
 export { default as AccordionItem } from "./deprecated-components/AccordionItem";
@@ -77,7 +85,14 @@ export { default as CircleImage } from "./deprecated-components/CircleImage";
 export { default as Container } from "./deprecated-components/Container";
 export { default as FAB } from "./deprecated-components/FAB";
 export { default as FieldSearchBarFull } from "./deprecated-components/FieldSearchBarFull";
-export { Row, Stack } from "./components/Layout";
+export {
+  Center as DeprecatedCenter,
+  Circle as DeprecatedCircle,
+  Square as DeprecatedSquare,
+  Spacer,
+  Row,
+  Stack,
+} from "./deprecated-components/Layout";
 export { default as ToggleButton } from "./deprecated-components/ToggleButton";
 export { default as ProgressBar } from "./deprecated-components/ProgressBar";
 export { default as ProgressCircle } from "./deprecated-components/ProgressCircle";

packages/ui/src/index.tsx

@@ -62,6 +62,10 @@ export {
   CodeInput,
   CodeInputCell,
   CodeInputText,
+  AspectRatio,
+  HStack,
+  VStack,
+  ZStack,
 } from "@draftbit/core";
 
 /**