updates

App.tsx

@@ -1,5 +1,23 @@
+import { SafeAreaView } from 'react-native';
+import { Button } from 'components/Button';
+import { Flex } from 'components/Flex';
+import { TextInput } from 'components/TextInput';
+
 function App() {
-  return null;
+  return (
+    <SafeAreaView style={{ margin: 16 }}>
+      <Flex>
+        <Button title="Filled" variant="filled" />
+        <Button title="Gray" variant="gray" />
+        <Button title="Plain" variant="plain" />
+        <Button title="Tinted" variant="tinted" />
+      </Flex>
+
+      <Flex>
+        <TextInput value="Search" />
+      </Flex>
+    </SafeAreaView>
+  );
 }
 
 export default App;

babel.config.js

@@ -21,6 +21,7 @@ module.exports = function (api) {
           ],
           alias: {
             components: './src/components',
+            theme: './src/theme'
           },
         },
       ],

package.json

@@ -13,7 +13,7 @@
     "build": "pnpm rm:build && pnpm build:cjs && pnpm build:esm",
     "build:cjs": "tsc --project tsconfig.build-cjs.json && tsc-alias -p tsconfig.build-cjs.json",
     "build:esm": "tsc --project tsconfig.build-esm.json && tsc-alias -p tsconfig.build-esm.json",
-    "dev": "expo start",
+    "dev": "expo start -c",
     "dev:clean": "expo r -c",
     "rm:build": "rimraf lib",
     "storybook": "start-storybook -p 6006",

src/components/Button/Button.tsx

@@ -33,8 +33,8 @@ const buttonStyles = StyleSheet.create({
 
 const textStyles = StyleSheet.create({
   base: {
-    fontSize: 18,
-    lineHeight: 24,
+    fontSize: theme.typography.body.fontSize,
+    lineHeight: theme.typography.body.lineHeight,
     textAlign: 'center',
     fontWeight: 'bold',
   },

src/components/Flex/Flex.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { SafeAreaView, StyleSheet } from 'react-native';
+
+import type { Props } from './Flex.types';
+
+const styles = StyleSheet.create({
+  flex: {
+    display: 'flex',
+    flex: 0,
+  },
+  column: {
+    flexDirection: 'column',
+  },
+  row: {
+    flexDirection: 'row',
+  },
+});
+
+function Flex({ direction = 'row', ...props }: Props) {
+  return (
+    <SafeAreaView
+      {...props}
+      style={{
+        ...styles.flex,
+        ...styles[direction],
+      }}
+    />
+  );
+}
+
+export default Flex;

src/components/Flex/Flex.types.ts

@@ -0,0 +1,6 @@
+import type { ViewProps } from 'react-native';
+
+export interface Props {
+  children?: ViewProps['children'];
+  direction?: 'column' | 'row';
+}

src/components/Flex/index.ts

@@ -0,0 +1 @@
+export { default as Flex } from './Flex';

src/components/TextInput/TextInput.tsx

@@ -5,11 +5,20 @@ import { theme } from 'theme';
 import type { Props } from './TextInput.types';
 
 const textInputStyles = StyleSheet.create({
-  base: {},
+  base: {
+    backgroundColor: theme.palette.neutral[600],
+    borderRadius: 8,
+    color: theme.palette.neutral[100],
+    height: 36,
+    fontSize: theme.typography.input.fontSize,
+    lineHeight: theme.typography.input.lineHeight,
+    padding: 8,
+    width: '100%',
+  },
 });
 
 function TextInput(props: Props) {
-  return <TextInputBase {...props} />;
+  return <TextInputBase {...props} style={textInputStyles.base} />;
 }
 
 export default TextInput;

src/theme/theme.ts

@@ -1,6 +1,32 @@
 import { PlatformColor } from 'react-native';
 
 const theme = {
+  typography: {
+    title1: {
+      fontSize: 34,
+      lineHeight: 40,
+    },
+    title2: {
+      fontSize: 28,
+      lineHeight: 34,
+    },
+    title3: {
+      fontSize: 24,
+      lineHeight: 28,
+    },
+    title4: {
+      fontSize: 20,
+      lineHeight: 24,
+    },
+    body: {
+      fontSize: 18,
+      lineHeight: 24,
+    },
+    input: {
+      fontSize: 18,
+      lineHeight: 20,
+    },
+  },
   palette: {
     background: PlatformColor('systemGray6'),
     error: PlatformColor('systemRed'),

tsconfig.json

@@ -4,5 +4,5 @@
     "baseUrl": "src",
     "strict": true
   },
-  "include": ["src/**/*.ts", "src/**/*.tsx"]
+  "include": ["**/*.ts", "**/*.tsx"]
 }