Skip to content

Commit c6f9a8f

Browse files
okwasniewskiokwasniewski
authored
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
1 parent f35cf37 commit c6f9a8f

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+377
-425
lines changed

‎.eslintrc.js

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,5 +15,10 @@ module.exports = {
1515
},
1616
],
1717
},
18-
ignorePatterns: ['**/lib/**', '**/dist/**', '**/node_modules/**'],
18+
ignorePatterns: [
19+
'**/lib/**',
20+
'**/dist/**',
21+
'**/node_modules/**',
22+
'expo-env.d.ts',
23+
],
1924
};

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22

33
import { withLayoutContext } from 'expo-router';
4-
import createNativeBottomTabNavigator from '../../../../packages/react-native-bottom-tabs/src/react-navigation/navigators/createNativeBottomTabNavigator';
4+
import { createNativeBottomTabNavigator } from '@bottom-tabs/react-navigation';
55

66
const Tabs = withLayoutContext(createNativeBottomTabNavigator().Navigator);
77

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { StyleSheet, Image } from 'react-native';
22

3-
import { Collapsible } from '@/components/Collapsible';
4-
import { ExternalLink } from '@/components/ExternalLink';
5-
import { ThemedText } from '@/components/ThemedText';
6-
import { ThemedView } from '@/components/ThemedView';
3+
import { Collapsible } from '../../components/Collapsible';
4+
import { ExternalLink } from '../../components/ExternalLink';
5+
import { ThemedText } from '../../components/ThemedText';
6+
import { ThemedView } from '../../components/ThemedView';
77
import { ScrollView } from 'react-native-gesture-handler';
88

99
function TabTwoScreen() {
@@ -46,7 +46,7 @@ function TabTwoScreen() {
4646
provide files for different screen densities
4747
</ThemedText>
4848
<Image
49-
source={require('@/assets/images/react-logo.png')}
49+
source={require('../../assets/images/react-logo.png')}
5050
style={{ alignSelf: 'center' }}
5151
/>
5252
<ExternalLink href="https://reactnative.dev/docs/images">

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { ScrollView, StyleSheet, Platform } from 'react-native';
22

3-
import { ThemedText } from '@/components/ThemedText';
4-
import { ThemedView } from '@/components/ThemedView';
3+
import { ThemedText } from '../../components/ThemedText';
4+
import { ThemedView } from '../../components/ThemedView';
55

66
function HomeScreen() {
77
return (

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { Link, Stack } from 'expo-router';
22
import { StyleSheet } from 'react-native';
33

4-
import { ThemedText } from '@/components/ThemedText';
5-
import { ThemedView } from '@/components/ThemedView';
4+
import { ThemedText } from '../components/ThemedText';
5+
import { ThemedView } from '../components/ThemedView';
66

77
export default function NotFoundScreen() {
88
return (

‎apps/example-expo/app/_layout.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import * as SplashScreen from 'expo-splash-screen';
99
import { StatusBar } from 'expo-status-bar';
1010
import { useEffect } from 'react';
1111

12-
import { useColorScheme } from '@/hooks/useColorScheme';
12+
import { useColorScheme } from '../hooks/useColorScheme';
1313

1414
// Prevent the splash screen from auto-hiding before asset loading is complete.
1515
SplashScreen.preventAutoHideAsync();

‎apps/example-expo/babel.config.js

Lines changed: 37 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,43 @@
11
const path = require('path');
2-
const pak = require('../../packages/react-native-bottom-tabs/package.json');
2+
const fs = require('fs');
33

4-
module.exports = {
5-
presets: ['babel-preset-expo'],
6-
plugins: [
7-
[
8-
'module-resolver',
4+
const packages = path.resolve(__dirname, '..', '..', 'packages');
5+
6+
/** @type {import('@babel/core').TransformOptions} */
7+
module.exports = function (api) {
8+
api.cache(true);
9+
10+
const alias = Object.fromEntries(
11+
fs
12+
.readdirSync(packages)
13+
.filter((name) => !name.startsWith('.'))
14+
.map((name) => {
15+
const pak = require(`../../packages/${name}/package.json`);
16+
17+
if (pak.source == null) {
18+
return null;
19+
}
20+
21+
return [pak.name, path.resolve(packages, name, pak.source)];
22+
})
23+
.filter(Boolean)
24+
);
25+
26+
return {
27+
presets: ['babel-preset-expo'],
28+
overrides: [
929
{
10-
extensions: ['.tsx', '.ts', '.js', '.json'],
11-
alias: {
12-
'react-native-bottom-tabs': path.join(
13-
__dirname,
14-
'../../packages/react-native-bottom-tabs',
15-
pak.source
16-
),
17-
},
30+
exclude: /\/node_modules\//,
31+
plugins: [
32+
[
33+
'module-resolver',
34+
{
35+
extensions: ['.tsx', '.ts', '.js', '.json'],
36+
alias,
37+
},
38+
],
39+
],
1840
},
1941
],
20-
],
42+
};
2143
};

‎apps/example-expo/components/Collapsible.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { PropsWithChildren, useState } from 'react';
22
import { StyleSheet, TouchableOpacity } from 'react-native';
33

4-
import { ThemedText } from '@/components/ThemedText';
5-
import { ThemedView } from '@/components/ThemedView';
4+
import { ThemedText } from './ThemedText';
5+
import { ThemedView } from './ThemedView';
66

77
export function Collapsible({
88
children,

‎apps/example-expo/components/ThemedText.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Text, type TextProps, StyleSheet } from 'react-native';
22

3-
import { useThemeColor } from '@/hooks/useThemeColor';
3+
import { useThemeColor } from '../hooks/useThemeColor';
44

55
export type ThemedTextProps = TextProps & {
66
lightColor?: string;

‎apps/example-expo/components/ThemedView.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { View, type ViewProps } from 'react-native';
22

3-
import { useThemeColor } from '@/hooks/useThemeColor';
3+
import { useThemeColor } from '../hooks/useThemeColor';
44

55
export type ThemedViewProps = ViewProps & {
66
lightColor?: string;

‎apps/example-expo/hooks/useThemeColor.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55

66
import { useColorScheme } from 'react-native';
77

8-
import { Colors } from '@/constants/Colors';
8+
import { Colors } from '../constants/Colors';
99

1010
export function useThemeColor(
1111
props: { light?: string; dark?: string },

‎apps/example-expo/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@
1818
"preset": "jest-expo"
1919
},
2020
"dependencies": {
21+
"@bottom-tabs/react-navigation": "*",
2122
"@expo/vector-icons": "^14.0.2",
22-
"@react-navigation/bottom-tabs": "^6.1.18",
2323
"@react-navigation/native": "^6.1.18",
2424
"expo": "~51.0.39",
2525
"expo-build-properties": "~0.12.5",

‎apps/example-expo/tsconfig.json

Lines changed: 10 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,15 @@
11
{
2-
"extends": "expo/tsconfig.base",
3-
"compilerOptions": {
4-
"strict": true,
5-
"paths": {
6-
"react-native-bottom-tabs": [
7-
"../../packages/react-native-bottom-tabs/src/index"
8-
],
9-
"react-native-bottom-tabs/react-navigation": [
10-
"../../packages/react-native-bottom-tabs/src/react-navigation/index"
11-
],
12-
"@/*": [
13-
"./*"
14-
]
2+
"extends": "../../tsconfig.json",
3+
"references": [
4+
{
5+
"path": "../../packages/react-native-bottom-tabs"
6+
},
7+
{
8+
"path": "../../packages/react-navigation"
159
}
10+
],
11+
"compilerOptions": {
12+
"rootDir": "."
1613
},
1714
"include": [
1815
"**/*.ts",

‎apps/example/babel.config.js

Lines changed: 37 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,43 @@
11
const path = require('path');
2-
const pak = require('../../packages/react-native-bottom-tabs/package.json');
2+
const fs = require('fs');
33

4-
module.exports = {
5-
presets: ['module:@react-native/babel-preset'],
6-
plugins: [
7-
[
8-
'module-resolver',
4+
const packages = path.resolve(__dirname, '..', '..', 'packages');
5+
6+
/** @type {import('@babel/core').TransformOptions} */
7+
module.exports = function (api) {
8+
api.cache(true);
9+
10+
const alias = Object.fromEntries(
11+
fs
12+
.readdirSync(packages)
13+
.filter((name) => !name.startsWith('.'))
14+
.map((name) => {
15+
const pak = require(`../../packages/${name}/package.json`);
16+
17+
if (pak.source == null) {
18+
return null;
19+
}
20+
21+
return [pak.name, path.resolve(packages, name, pak.source)];
22+
})
23+
.filter(Boolean)
24+
);
25+
26+
return {
27+
presets: ['module:@react-native/babel-preset'],
28+
overrides: [
929
{
10-
extensions: ['.tsx', '.ts', '.js', '.json'],
11-
alias: {
12-
'react-native-bottom-tabs': path.join(
13-
__dirname,
14-
'../../packages/react-native-bottom-tabs',
15-
pak.source
16-
),
17-
},
30+
exclude: /\/node_modules\//,
31+
plugins: [
32+
[
33+
'module-resolver',
34+
{
35+
extensions: ['.tsx', '.ts', '.js', '.json'],
36+
alias,
37+
},
38+
],
39+
],
1840
},
1941
],
20-
],
42+
};
2143
};

‎apps/example/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
"visionos": "react-native run-visionos"
1515
},
1616
"dependencies": {
17+
"@bottom-tabs/react-navigation": "*",
1718
"@callstack/react-native-visionos": "^0.75.0",
1819
"@react-navigation/bottom-tabs": "^6.6.1",
1920
"@react-navigation/native": "^6.1.18",

‎apps/example/src/Examples/JSBottomTabs.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import * as React from 'react';
21
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
32
import { Article } from '../Screens/Article';
43
import { Albums } from '../Screens/Albums';

‎apps/example/src/Examples/NativeBottomTabs.tsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
1-
import * as React from 'react';
21
import { Article } from '../Screens/Article';
32
import { Albums } from '../Screens/Albums';
43
import { Contacts } from '../Screens/Contacts';
54
import { Chat } from '../Screens/Chat';
6-
// This import works properly when library is published
7-
import createNativeBottomTabNavigator from '../../../../packages/react-native-bottom-tabs/src/react-navigation/navigators/createNativeBottomTabNavigator';
5+
import { createNativeBottomTabNavigator } from '@bottom-tabs/react-navigation';
86
import { Platform } from 'react-native';
97

108
const Tab = createNativeBottomTabNavigator();

‎apps/example/src/Examples/NativeBottomTabsEmbeddedStacks.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { Article } from '../Screens/Article';
22
import { Albums } from '../Screens/Albums';
33
import { Contacts } from '../Screens/Contacts';
44
import { Chat } from '../Screens/Chat';
5-
import createNativeBottomTabNavigator from '../../../../packages/react-native-bottom-tabs/src/react-navigation/navigators/createNativeBottomTabNavigator';
5+
import { createNativeBottomTabNavigator } from '@bottom-tabs/react-navigation';
66
import { createNativeStackNavigator } from '@react-navigation/native-stack';
77

88
const headerOptions = {

‎apps/example/src/Examples/NativeBottomTabsRemoteIcons.tsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
1-
import * as React from 'react';
21
import { Article } from '../Screens/Article';
32
import { Albums } from '../Screens/Albums';
43
import { Contacts } from '../Screens/Contacts';
54
import { Chat } from '../Screens/Chat';
6-
// This import works properly when library is published
7-
import createNativeBottomTabNavigator from '../../../../packages/react-native-bottom-tabs/src/react-navigation/navigators/createNativeBottomTabNavigator';
5+
import { createNativeBottomTabNavigator } from '@bottom-tabs/react-navigation';
86

97
const Tab = createNativeBottomTabNavigator();
108

‎apps/example/src/Examples/NativeBottomTabsSVGs.tsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
1-
import * as React from 'react';
21
import { Article } from '../Screens/Article';
32
import { Albums } from '../Screens/Albums';
43
import { Contacts } from '../Screens/Contacts';
54
import { Chat } from '../Screens/Chat';
6-
// This import works properly when library is published
7-
import createNativeBottomTabNavigator from '../../../../packages/react-native-bottom-tabs/src/react-navigation/navigators/createNativeBottomTabNavigator';
5+
import { createNativeBottomTabNavigator } from '@bottom-tabs/react-navigation';
86

97
const Tab = createNativeBottomTabNavigator();
108

‎apps/example/src/Examples/NativeBottomTabsVectorIcons.tsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
1-
import * as React from 'react';
21
import { Article } from '../Screens/Article';
32
import { Albums } from '../Screens/Albums';
43
import { Contacts } from '../Screens/Contacts';
54
import { Chat } from '../Screens/Chat';
6-
// This import works properly when library is published
7-
import createNativeBottomTabNavigator from '../../../../packages/react-native-bottom-tabs/src/react-navigation/navigators/createNativeBottomTabNavigator';
5+
import { createNativeBottomTabNavigator } from '@bottom-tabs/react-navigation';
86
import { Platform } from 'react-native';
97

108
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';

‎apps/example/src/Examples/SFSymbols.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import * as React from 'react';
21
import TabView, { SceneMap } from 'react-native-bottom-tabs';
32
import { useState } from 'react';
43
import { Article } from '../Screens/Article';

‎apps/example/src/Examples/ThreeTabs.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import * as React from 'react';
21
import TabView, { SceneMap } from 'react-native-bottom-tabs';
32
import { useState } from 'react';
43
import { Article } from '../Screens/Article';

‎apps/example/tsconfig.json

Lines changed: 6 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,10 @@
11
{
2+
"extends": "../../tsconfig",
3+
"references": [
4+
{ "path": "../../packages/react-native-bottom-tabs" },
5+
{ "path": "../../packages/react-navigation" },
6+
],
27
"compilerOptions": {
3-
"paths": {
4-
"react-native-bottom-tabs": ["../../packages/react-native-bottom-tabs/src/index"],
5-
"react-native-bottom-tabs/react-navigation": [
6-
"../../packages/react-native-bottom-tabs/src/react-navigation/index"
7-
]
8-
},
9-
"allowUnreachableCode": false,
10-
"allowUnusedLabels": false,
11-
"esModuleInterop": true,
12-
"forceConsistentCasingInFileNames": true,
13-
"jsx": "react-jsx",
14-
"lib": ["ESNext"],
15-
"module": "ESNext",
16-
"moduleResolution": "Bundler",
17-
"noFallthroughCasesInSwitch": true,
18-
"noImplicitReturns": true,
19-
"noImplicitUseStrict": false,
20-
"noStrictGenericChecks": false,
21-
"noUncheckedIndexedAccess": true,
22-
"noUnusedLocals": true,
23-
"noUnusedParameters": true,
24-
"resolveJsonModule": true,
25-
"skipLibCheck": true,
26-
"strict": true,
27-
"target": "ESNext",
28-
"verbatimModuleSyntax": true
8+
"rootDir": "."
299
}
3010
}

0 commit comments

Comments
 (0)