feat: ✨ introduce separate package for navigation integration (#152)

* feat: ✨ introduce separate package for navigation integration

* fix: 🐛 centralize tsconfig

* fix: expo example

* fix: 🐛 package.json definitions

Author: okwasniewski

.eslintrc.js

@@ -15,5 +15,10 @@ module.exports = {
       },
     ],
   },
-  ignorePatterns: ['**/lib/**', '**/dist/**', '**/node_modules/**'],
+  ignorePatterns: [
+    '**/lib/**',
+    '**/dist/**',
+    '**/node_modules/**',
+    'expo-env.d.ts',
+  ],
 };

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

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { withLayoutContext } from 'expo-router';
-import createNativeBottomTabNavigator from '../../../../packages/react-native-bottom-tabs/src/react-navigation/navigators/createNativeBottomTabNavigator';
+import { createNativeBottomTabNavigator } from '@bottom-tabs/react-navigation';
 
 const Tabs = withLayoutContext(createNativeBottomTabNavigator().Navigator);
 

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,21 +1,43 @@
 const path = require('path');
-const pak = require('../../packages/react-native-bottom-tabs/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',
-            pak.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;