feat: ✨ introduce separate package for navigation integration

.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,8 +46,8 @@
           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">
           <ThemedText type="link">Learn more</ThemedText>
@@ -57,7 +57,7 @@
         <ThemedText>
           Open <ThemedText type="defaultSemiBold">app/_layout.tsx</ThemedText>{' '}
           to see how to load{' '}
           <ThemedText style={{ fontFamily: 'SpaceMono' }}>
             custom fonts such as this one.
           </ThemedText>
         </ThemedText>

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;

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/package.json

@@ -18,8 +18,8 @@
     "preset": "jest-expo"
   },
   "dependencies": {
+    "@bottom-tabs/react-navigation": "*",
     "@expo/vector-icons": "^14.0.2",
-    "@react-navigation/bottom-tabs": "^6.1.18",
     "@react-navigation/native": "^6.1.18",
     "expo": "~51.0.39",
     "expo-build-properties": "~0.12.5",

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",

apps/example/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: ['module:@react-native/babel-preset'],
-  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: ['module:@react-native/babel-preset'],
+    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/package.json

@@ -14,6 +14,7 @@
     "visionos": "react-native run-visionos"
   },
   "dependencies": {
+    "@bottom-tabs/react-navigation": "*",
     "@callstack/react-native-visionos": "^0.75.0",
     "@react-navigation/bottom-tabs": "^6.6.1",
     "@react-navigation/native": "^6.1.18",

apps/example/src/Examples/JSBottomTabs.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { Article } from '../Screens/Article';
 import { Albums } from '../Screens/Albums';

apps/example/src/Examples/NativeBottomTabs.tsx

@@ -1,10 +1,8 @@
-import * as React from 'react';
 import { Article } from '../Screens/Article';
 import { Albums } from '../Screens/Albums';
 import { Contacts } from '../Screens/Contacts';
 import { Chat } from '../Screens/Chat';
-// This import works properly when library is published
-import createNativeBottomTabNavigator from '../../../../packages/react-native-bottom-tabs/src/react-navigation/navigators/createNativeBottomTabNavigator';
+import { createNativeBottomTabNavigator } from '@bottom-tabs/react-navigation';
 import { Platform } from 'react-native';
 
 const Tab = createNativeBottomTabNavigator();

apps/example/src/Examples/NativeBottomTabsEmbeddedStacks.tsx

@@ -2,7 +2,7 @@ import { Article } from '../Screens/Article';
 import { Albums } from '../Screens/Albums';
 import { Contacts } from '../Screens/Contacts';
 import { Chat } from '../Screens/Chat';
-import createNativeBottomTabNavigator from '../../../../packages/react-native-bottom-tabs/src/react-navigation/navigators/createNativeBottomTabNavigator';
+import { createNativeBottomTabNavigator } from '@bottom-tabs/react-navigation';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 
 const headerOptions = {

apps/example/src/Examples/NativeBottomTabsRemoteIcons.tsx

@@ -1,10 +1,8 @@
-import * as React from 'react';
 import { Article } from '../Screens/Article';
 import { Albums } from '../Screens/Albums';
 import { Contacts } from '../Screens/Contacts';
 import { Chat } from '../Screens/Chat';
-// This import works properly when library is published
-import createNativeBottomTabNavigator from '../../../../packages/react-native-bottom-tabs/src/react-navigation/navigators/createNativeBottomTabNavigator';
+import { createNativeBottomTabNavigator } from '@bottom-tabs/react-navigation';
 
 const Tab = createNativeBottomTabNavigator();
 

apps/example/src/Examples/NativeBottomTabsSVGs.tsx

@@ -1,10 +1,8 @@
-import * as React from 'react';
 import { Article } from '../Screens/Article';
 import { Albums } from '../Screens/Albums';
 import { Contacts } from '../Screens/Contacts';
 import { Chat } from '../Screens/Chat';
-// This import works properly when library is published
-import createNativeBottomTabNavigator from '../../../../packages/react-native-bottom-tabs/src/react-navigation/navigators/createNativeBottomTabNavigator';
+import { createNativeBottomTabNavigator } from '@bottom-tabs/react-navigation';
 
 const Tab = createNativeBottomTabNavigator();
 

apps/example/src/Examples/NativeBottomTabsVectorIcons.tsx

@@ -1,10 +1,8 @@
-import * as React from 'react';
 import { Article } from '../Screens/Article';
 import { Albums } from '../Screens/Albums';
 import { Contacts } from '../Screens/Contacts';
 import { Chat } from '../Screens/Chat';
-// This import works properly when library is published
-import createNativeBottomTabNavigator from '../../../../packages/react-native-bottom-tabs/src/react-navigation/navigators/createNativeBottomTabNavigator';
+import { createNativeBottomTabNavigator } from '@bottom-tabs/react-navigation';
 import { Platform } from 'react-native';
 
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';

apps/example/src/Examples/SFSymbols.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import TabView, { SceneMap } from 'react-native-bottom-tabs';
 import { useState } from 'react';
 import { Article } from '../Screens/Article';

apps/example/src/Examples/ThreeTabs.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import TabView, { SceneMap } from 'react-native-bottom-tabs';
 import { useState } from 'react';
 import { Article } from '../Screens/Article';

apps/example/tsconfig.json

@@ -1,30 +1,10 @@
 {
+  "extends": "../../tsconfig",
+  "references": [
+    { "path": "../../packages/react-native-bottom-tabs" },
+    { "path": "../../packages/react-navigation" },
+  ],
   "compilerOptions": {
-    "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"
-      ]
-    },
-    "allowUnreachableCode": false,
-    "allowUnusedLabels": false,
-    "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true,
-    "jsx": "react-jsx",
-    "lib": ["ESNext"],
-    "module": "ESNext",
-    "moduleResolution": "Bundler",
-    "noFallthroughCasesInSwitch": true,
-    "noImplicitReturns": true,
-    "noImplicitUseStrict": false,
-    "noStrictGenericChecks": false,
-    "noUncheckedIndexedAccess": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "resolveJsonModule": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "target": "ESNext",
-    "verbatimModuleSyntax": true
+    "rootDir": "."
   }
 }