fix: expo example

Author: okwasniewski

apps/example-expo/app/(tabs)/explore.tsx

@@ -1,9 +1,9 @@
 import { StyleSheet, Image } from 'react-native';
 
-import { Collapsible } from '@/components/Collapsible';
-import { ExternalLink } from '@/components/ExternalLink';
-import { ThemedText } from '@/components/ThemedText';
-import { ThemedView } from '@/components/ThemedView';
+import { Collapsible } from '../../components/Collapsible';
+import { ExternalLink } from '../../components/ExternalLink';
+import { ThemedText } from '../../components/ThemedText';
+import { ThemedView } from '../../components/ThemedView';
 import { ScrollView } from 'react-native-gesture-handler';
 
 function TabTwoScreen() {
@@ -46,7 +46,7 @@ function TabTwoScreen() {
           provide files for different screen densities
         </ThemedText>
         <Image
-          source={require('@/assets/images/react-logo.png')}
+          source={require('../../assets/images/react-logo.png')}
           style={{ alignSelf: 'center' }}
         />
         <ExternalLink href="https://reactnative.dev/docs/images">

apps/example-expo/app/(tabs)/index.tsx

@@ -1,7 +1,7 @@
 import { ScrollView, StyleSheet, Platform } from 'react-native';
 
-import { ThemedText } from '@/components/ThemedText';
-import { ThemedView } from '@/components/ThemedView';
+import { ThemedText } from '../../components/ThemedText';
+import { ThemedView } from '../../components/ThemedView';
 
 function HomeScreen() {
   return (

apps/example-expo/app/+not-found.tsx

@@ -1,8 +1,8 @@
 import { Link, Stack } from 'expo-router';
 import { StyleSheet } from 'react-native';
 
-import { ThemedText } from '@/components/ThemedText';
-import { ThemedView } from '@/components/ThemedView';
+import { ThemedText } from '../components/ThemedText';
+import { ThemedView } from '../components/ThemedView';
 
 export default function NotFoundScreen() {
   return (

apps/example-expo/app/_layout.tsx

@@ -9,7 +9,7 @@ import * as SplashScreen from 'expo-splash-screen';
 import { StatusBar } from 'expo-status-bar';
 import { useEffect } from 'react';
 
-import { useColorScheme } from '@/hooks/useColorScheme';
+import { useColorScheme } from '../hooks/useColorScheme';
 
 // Prevent the splash screen from auto-hiding before asset loading is complete.
 SplashScreen.preventAutoHideAsync();

apps/example-expo/babel.config.js

@@ -1,27 +1,43 @@
 const path = require('path');
-const tabView = require('../../packages/react-native-bottom-tabs/package.json');
-const reactNavigationIntegration = require('../../packages/react-navigation/package.json');
+const fs = require('fs');
 
-module.exports = {
-  presets: ['babel-preset-expo'],
-  plugins: [
-    [
-      'module-resolver',
+const packages = path.resolve(__dirname, '..', '..', 'packages');
+
+/** @type {import('@babel/core').TransformOptions} */
+module.exports = function (api) {
+  api.cache(true);
+
+  const alias = Object.fromEntries(
+    fs
+      .readdirSync(packages)
+      .filter((name) => !name.startsWith('.'))
+      .map((name) => {
+        const pak = require(`../../packages/${name}/package.json`);
+
+        if (pak.source == null) {
+          return null;
+        }
+
+        return [pak.name, path.resolve(packages, name, pak.source)];
+      })
+      .filter(Boolean)
+  );
+
+  return {
+    presets: ['babel-preset-expo'],
+    overrides: [
       {
-        extensions: ['.tsx', '.ts', '.js', '.json'],
-        alias: {
-          'react-native-bottom-tabs': path.join(
-            __dirname,
-            '../../packages/react-native-bottom-tabs',
-            tabView.source
-          ),
-          '@bottom-tabs/react-navigation': path.join(
-            __dirname,
-            '../../packages/react-navigation',
-            reactNavigationIntegration.source
-          ),
-        },
+        exclude: /\/node_modules\//,
+        plugins: [
+          [
+            'module-resolver',
+            {
+              extensions: ['.tsx', '.ts', '.js', '.json'],
+              alias,
+            },
+          ],
+        ],
       },
     ],
-  ],
+  };
 };

apps/example-expo/components/Collapsible.tsx

@@ -1,8 +1,8 @@
 import { PropsWithChildren, useState } from 'react';
 import { StyleSheet, TouchableOpacity } from 'react-native';
 
-import { ThemedText } from '@/components/ThemedText';
-import { ThemedView } from '@/components/ThemedView';
+import { ThemedText } from './ThemedText';
+import { ThemedView } from './ThemedView';
 
 export function Collapsible({
   children,

apps/example-expo/components/ThemedText.tsx

@@ -1,6 +1,6 @@
 import { Text, type TextProps, StyleSheet } from 'react-native';
 
-import { useThemeColor } from '@/hooks/useThemeColor';
+import { useThemeColor } from '../hooks/useThemeColor';
 
 export type ThemedTextProps = TextProps & {
   lightColor?: string;

apps/example-expo/components/ThemedView.tsx

@@ -1,6 +1,6 @@
 import { View, type ViewProps } from 'react-native';
 
-import { useThemeColor } from '@/hooks/useThemeColor';
+import { useThemeColor } from '../hooks/useThemeColor';
 
 export type ThemedViewProps = ViewProps & {
   lightColor?: string;

apps/example-expo/hooks/useThemeColor.ts

@@ -5,7 +5,7 @@
 
 import { useColorScheme } from 'react-native';
 
-import { Colors } from '@/constants/Colors';
+import { Colors } from '../constants/Colors';
 
 export function useThemeColor(
   props: { light?: string; dark?: string },

apps/example-expo/tsconfig.json

@@ -1,18 +1,15 @@
 {
-  "extends": "expo/tsconfig.base",
-  "compilerOptions": {
-    "strict": true,
-    "paths": {
-      "react-native-bottom-tabs": [
-        "../../packages/react-native-bottom-tabs/src/index"
-      ],
-      "react-native-bottom-tabs/react-navigation": [
-        "../../packages/react-native-bottom-tabs/src/react-navigation/index"
-      ],
-      "@/*": [
-        "./*"
-      ]
+  "extends": "../../tsconfig.json",
+  "references": [
+    {
+      "path": "../../packages/react-native-bottom-tabs"
+    },
+    {
+      "path": "../../packages/react-navigation"
     }
+  ],
+  "compilerOptions": {
+    "rootDir": "."
   },
   "include": [
     "**/*.ts",