Update example app project (#30)

example/.gitignore

@@ -1,3 +1,20 @@
-# XDE
-#
+node_modules/
 .expo/
+dist/
+npm-debug.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+
+# macOS
+.DS_Store
+
+# @generated expo-cli sync-2b81b286409207a5da26e14c78851eb30d8ccbdb
+# The following patterns were generated by expo-cli
+
+expo-env.d.ts
+# @end expo-cli

example/README.md

@@ -0,0 +1,50 @@
+# Welcome to your Expo app 👋
+
+This is an [Expo](https://expo.dev) project created with [`create-expo-app`](https://www.npmjs.com/package/create-expo-app).
+
+## Get started
+
+1. Install dependencies
+
+   ```bash
+   npm install
+   ```
+
+2. Start the app
+
+   ```bash
+    npx expo start
+   ```
+
+In the output, you'll find options to open the app in a
+
+- [development build](https://docs.expo.dev/develop/development-builds/introduction/)
+- [Android emulator](https://docs.expo.dev/workflow/android-studio-emulator/)
+- [iOS simulator](https://docs.expo.dev/workflow/ios-simulator/)
+- [Expo Go](https://expo.dev/go), a limited sandbox for trying out app development with Expo
+
+You can start developing by editing the files inside the **app** directory. This project uses [file-based routing](https://docs.expo.dev/router/introduction).
+
+## Get a fresh project
+
+When you're ready, run:
+
+```bash
+npm run reset-project
+```
+
+This command will move the starter code to the **app-example** directory and create a blank **app** directory where you can start developing.
+
+## Learn more
+
+To learn more about developing your project with Expo, look at the following resources:
+
+- [Expo documentation](https://docs.expo.dev/): Learn fundamentals, or go into advanced topics with our [guides](https://docs.expo.dev/guides).
+- [Learn Expo tutorial](https://docs.expo.dev/tutorial/introduction/): Follow a step-by-step tutorial where you'll create a project that runs on Android, iOS, and the web.
+
+## Join the community
+
+Join our community of developers creating universal apps.
+
+- [Expo on GitHub](https://github.com/expo/expo): View our open source platform and contribute.
+- [Discord community](https://chat.expo.dev): Chat with Expo users and ask questions.

example/app.json

@@ -1,18 +1,34 @@
 {
   "expo": {
-    "name": "React Native Ficus UI Example",
-    "description": "Example app for React Native Ficus UI",
-    "slug": "react-native-ficus-ui-example",
-    "privacy": "public",
+    "name": "update-example",
+    "slug": "update-example",
     "version": "1.0.0",
-    "orientation": "default",
-    "icon": "./assets/images/favicon.png",
-    "primaryColor": "#cccccc",
+    "orientation": "portrait",
+    "icon": "./assets/images/icon.png",
+    "scheme": "ficus-ui-example",
     "userInterfaceStyle": "automatic",
-    "notification": {
-      "icon": "https://s3.amazonaws.com/exp-us-standard/placeholder-push-icon-blue-circle.png",
-      "color": "#000000"
+    "splash": {
+      "image": "./assets/images/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
     },
-    "platforms": ["android", "ios", "web"]
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/images/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      }
+    },
+    "web": {
+      "bundler": "metro",
+      "output": "static",
+      "favicon": "./assets/images/favicon.png"
+    },
+    "plugins": ["expo-router"],
+    "experiments": {
+      "typedRoutes": true
+    }
   }
 }

example/app/_layout.tsx

@@ -0,0 +1,12 @@
+import { ThemeProvider } from 'react-native-ficus-ui';
+import { Stack } from 'expo-router';
+
+export default function RootLayout() {
+  return (
+    <ThemeProvider>
+      <Stack screenOptions={{ headerShown: false }}>
+        <Stack.Screen name="index" />
+      </Stack>
+    </ThemeProvider>
+  );
+}

example/src/components/Box.tsx → example/app/components/Box.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { SafeAreaView } from 'react-native';
 import { Box, ScrollBox, Text } from 'react-native-ficus-ui';
-import ExampleSection from '../ExampleSection';
+import ExampleSection from '@/src/ExampleSection';
 
 const BoxComponent = () => {
   return (

example/src/components/Button.tsx → example/app/components/Button.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { SafeAreaView, ScrollView } from 'react-native';
 import { Button, Text, VStack } from 'react-native-ficus-ui';
-import ExampleSection from '../ExampleSection';
+import ExampleSection from '@/src/ExampleSection';
 
 const ButtonComponent = () => {
   return (

example/src/components/Center.tsx → example/app/components/Center.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { SafeAreaView } from 'react-native';
 import { Box, Center, ScrollBox, Text } from 'react-native-ficus-ui';
-import ExampleSection from '../ExampleSection';
+import ExampleSection from '@/src/ExampleSection';
 
 const CenterComponent = () => {
   return (

example/src/components/Checkbox.tsx → example/app/components/Checkbox.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { SafeAreaView } from 'react-native';
 import { Box, Checkbox, CheckboxGroup, Text } from 'react-native-ficus-ui';
-import ExampleSection from '../ExampleSection';
+import ExampleSection from '@/src/ExampleSection';
 
 const CheckboxComponent = () => {
   return (

example/src/components/Divider.tsx → example/app/components/Divider.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { SafeAreaView } from 'react-native';
 import { Divider, Box, Text } from 'react-native-ficus-ui';
-import ExampleSection from '../ExampleSection';
+import ExampleSection from '@/src/ExampleSection';
 
 const DividerComponent = () => {
   return (

example/src/components/Icon.tsx → example/app/components/Icon.tsx

@@ -1,7 +1,7 @@
+import ExampleSection from '@/src/ExampleSection';
 import React from 'react';
 import { SafeAreaView, ScrollView } from 'react-native';
 import { Icon, HStack, Text } from 'react-native-ficus-ui';
-import ExampleSection from '../ExampleSection';
 
 const IconComponent = () => {
   return (

example/src/components/Input.tsx → example/app/components/Input.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { SafeAreaView } from 'react-native';
 import { Icon, Input, Textarea, Text } from 'react-native-ficus-ui';
-import ExampleSection from '../ExampleSection';
+import ExampleSection from '@/src/ExampleSection';
 
 const InputComponent = () => {
   return (

example/src/components/Modal.tsx → example/app/components/Modal.tsx

@@ -7,7 +7,7 @@ import {
   Text,
   useDisclosure,
 } from 'react-native-ficus-ui';
-import ExampleSection from '../ExampleSection';
+import ExampleSection from '@/src/ExampleSection';
 
 const ModalComponent = () => {
   const { isOpen, onOpen, onClose } = useDisclosure();

example/src/components/Radio.tsx → example/app/components/Radio.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { SafeAreaView } from 'react-native';
 import { Box, Radio, RadioGroup, Text } from 'react-native-ficus-ui';
-import ExampleSection from '../ExampleSection';
+import ExampleSection from '@/src/ExampleSection';
 
 const RadioComponent = () => {
   return (

example/src/components/ScrollBox.tsx → example/app/components/ScrollBox.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { SafeAreaView } from 'react-native';
 import { Box, ScrollBox, Text } from 'react-native-ficus-ui';
-import ExampleSection from '../ExampleSection';
+import ExampleSection from '@/src/ExampleSection';
 
 const ScrollBoxComponent = () => {
   return (

example/src/components/Select.tsx → example/app/components/Select.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { SafeAreaView } from 'react-native';
 import { Button, Select, Option, Text } from 'react-native-ficus-ui';
-import ExampleSection from '../ExampleSection';
+import ExampleSection from '@/src/ExampleSection';
 
 const SelectComponent = () => {
   const [selectValue, setSelectedValue] = useState(null);

example/src/components/Stack.tsx → example/app/components/Stack.tsx

@@ -8,7 +8,7 @@ import {
   ScrollBox,
   Text,
 } from 'react-native-ficus-ui';
-import ExampleSection from '../ExampleSection';
+import ExampleSection from '@/src/ExampleSection';
 
 const StackComponent = () => {
   return (

example/src/components/Switch.tsx → example/app/components/Switch.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { SafeAreaView } from 'react-native';
 import { Switch, ScrollBox, Text } from 'react-native-ficus-ui';
-import ExampleSection from '../ExampleSection';
+import ExampleSection from '@/src/ExampleSection';
 
 const SwitchComponent = () => {
   const [on, toggle] = useState(false);

example/src/components/Text.tsx → example/app/components/Text.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { SafeAreaView, ScrollView } from 'react-native';
 import { Text } from 'react-native-ficus-ui';
-import ExampleSection from '../ExampleSection';
+import ExampleSection from '@/src/ExampleSection';
 
 const TextComponent = () => {
   return (

example/src/components/Toast.tsx → example/app/components/Toast.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { SafeAreaView } from 'react-native';
 import { Button, Text, VStack, useToast } from 'react-native-ficus-ui';
-import ExampleSection from '../ExampleSection';
+import ExampleSection from '@/src/ExampleSection';
 
 const ToastHook = () => {
   const { show, hide } = useToast();

example/app/index.tsx

@@ -0,0 +1,7 @@
+import HomeScreen from '@/src/HomeScreen';
+
+const App = () => {
+  return <HomeScreen />;
+};
+
+export default App;

example/babel.config.js

@@ -1,22 +1,16 @@
-const path = require('path');
-const pak = require('../package.json');
-
 module.exports = function (api) {
   api.cache(true);
-
   return {
     presets: ['babel-preset-expo'],
     plugins: [
       [
         'module-resolver',
         {
           alias: {
-            // For development, we want to alias the library to the source
-            [pak.name]: path.join(__dirname, '..', pak.source),
+            'react-native-ficus-ui': '../src',
           },
         },
       ],
-      'react-native-reanimated/plugin',
     ],
   };
 };