initial commit

docs/react-native/generic-box.md

@@ -0,0 +1,48 @@
+# Generic React Native Box
+
+Often in React Native, you'll want to create a generic box component that can be styled and reused throughout your app. This box in questions allows us to sourrund other components with a box that has a border, padding, and margin that we can apply. In this case they can be applied directly or via a style object.
+
+## Component
+```tsx:line-numbers [Box.tsx]
+import { ReactNode } from "react";
+import { StyleProp, StyleSheet, View, ViewStyle } from "react-native";
+
+type BoxProps = {
+  children?: ReactNode;
+  fullWidth?: boolean;
+  style?: StyleProp<ViewStyle>
+} & ViewStyle;
+
+const Box = ({ children, style, ...restProps }: BoxProps) => {
+  const boxStyle = getBoxStyle(restProps);
+  return <View style={[boxStyle.box, style]}>{children}</View>;
+};
+
+const getBoxStyle = (restProps: Omit<BoxProps, "children">) =>
+  StyleSheet.create({
+    box: {
+      width: restProps.fullWidth ? "100%" : "auto",
+      ...restProps,
+    },
+  });
+
+export default Box;
+```
+
+## Usage
+
+```tsx
+<Box
+  fullWidth
+  style={{
+    backgroundColor: "red",
+    padding: 10,
+    margin: 10,
+    borderRadius: 5,
+  }}
+/>
+
+<Box backgroundColor="red" borderColor="black" borderWidth={1}>
+  <Text>Some text</Text>
+</Box>
+```

docs/react-native/generic-stacks.md

@@ -0,0 +1,70 @@
+# Generic React Native Stacks
+
+The generic stack components are useful tools when creating layouts, as we can re-use these components to apply consistent spacing and alignment to our components. In this case, we'll create a `VStack` and an `HStack` component that allows us to stack components vertically or horizontally depnding on the component used.
+
+## Components
+```tsx:line-numbers
+import { StyleSheet, View, ViewStyle } from "react-native";
+
+type VStackProps = {
+  gap?: number;
+  children?: React.ReactNode;
+} & ViewStyle;
+
+const VStack = ({ gap, children, ...restProps }: VStackProps) => {
+  const style = vStackStyle(gap ?? 5, restProps);
+
+  return <View style={style.vStack}>{children}</View>;
+};
+
+const vStackStyle = (gap: number, restProps: ViewStyle) =>
+  StyleSheet.create({
+    vStack: {
+      flexDirection: "column",
+      gap: gap,
+      ...restProps
+    },
+  });
+export default VStack;
+```
+
+```tsx:line-numbers
+import { StyleSheet, View, ViewStyle } from "react-native";
+
+type HStackProps = {
+  gap?: number;
+  children: React.ReactNode;
+} & ViewStyle;
+
+const HStack = ({ gap, children, ...restProps }: HStackProps) => {
+  const style = hStackStyle(gap ?? 5, restProps);
+
+  return <View style={style.hStack}>{children}</View>;
+};
+
+const hStackStyle = (gap: number, restProps: ViewStyle) =>
+  StyleSheet.create({
+    hStack: {
+      flexDirection: "row",
+      gap: gap,
+      ...restProps
+    },
+  });
+export default HStack;
+```
+
+## Usage
+
+```tsx
+<VStack gap={10}>
+  <Text>First</Text>
+  <Text>Second</Text>
+  <Text>Third</Text>
+</VStack>
+
+<HStack gap={10}>
+  <Text>First</Text>
+  <Text>Second</Text>
+  <Text>Third</Text>
+</HStack>
+```

docs/react-native/generic-text.md

@@ -0,0 +1,98 @@
+# Generic React Native Text
+
+The generic text component is a useful tool so apply consistent styling to text components throughout your app. In this case, we'll create a `Text` component that allows us to apply consistent styling to text components.
+
+## Component
+
+::: code-group
+
+```tsx:line-numbers [Text.tsx]
+import { TextType } from './types';
+import { ReactNode, forwardRef } from 'react';
+import { Text as NativeText, TextStyle, StyleSheet, StyleProp } from 'react-native';
+
+type TextProps = {
+  type?: TextType;
+  children: ReactNode;
+  style?: StyleProp<TextStyle>;
+} & TextStyle;
+
+const Text = forwardRef<NativeText, TextProps>(function Text(
+  { type, children, style, ...restProps }: TextProps,
+  ref
+) {
+  const textStyles = textStyle(type ?? 'standard', restProps);
+  return (
+    <NativeText ref={ref} style={[textStyles.text, style]}>
+      {children}
+    </NativeText>
+  );
+});
+
+const textStyle = (type: TextType, restProps: TextStyle) => {
+  let styles = {};
+
+  switch (type) {
+    case 'title':
+      styles = {
+        fontSize: 32,
+        fontWeight: 'bold',
+        color: 'black',
+      };
+      break;
+    case 'title2':
+      styles = {
+        fontSize: 25,
+        fontWeight: 'bold',
+        color: 'black',
+      };
+      break;
+    case 'subtitle':
+      styles = {
+        fontSize: 12,
+        fontWeight: 'normal',
+        color: 'darkgray',
+      };
+      break;
+    case 'link':
+      styles = {
+        fontSize: 14,
+        fontWeight: 'normal',
+        color: 'blue',
+        textDecorationLine: 'underline',
+      };
+      break;
+    case 'standard':
+    default:
+      styles = {
+        fontSize: 14,
+        fontWeight: 'normal',
+        color: 'black',
+      };
+      break;
+  }
+
+  return StyleSheet.create({
+    text: {
+      ...styles,
+      ...restProps,
+    },
+  });
+};
+
+export default Text;
+```
+
+```tsx:line-numbers [types.ts]
+export type TextType = "standard" | "title" | "title2" | "subtitle" | "link";
+```
+:::
+
+## Usage
+
+```tsx
+<Text type="title">Title</Text>
+<Text type="subtitle">Subtitle</Text>
+<Text type="link">Link</Text>
+<Text>Standard</Text>
+```

docs/react-native/index.md

@@ -0,0 +1,5 @@
+# React Native Snippets and Musings
+
+#### [Generic Box](./generic-box.md)
+#### [Generic Stacks](./generic-stacks.md)
+#### [Generic Text](./generic-text.md)