Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: trim routes for android - no more then 6 tabs #38

Merged
merged 5 commits into from
Oct 14, 2024
Merged

fix: trim routes for android - no more then 6 tabs #38

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
1513e32
fix: trim routes for android - no more then 6 tabs
mrpmohiburrahman Oct 12, 2024
dad451a
Merge branch 'main' into mrp/no-more-then-6-tabs-android
mrpmohiburrahman Oct 12, 2024
1fe59b6
refactor: refactor inline style for lefthook
mrpmohiburrahman Oct 12, 2024
aaf0348
fix: optimization - calculate trimmed routes only one time
mrpmohiburrahman Oct 12, 2024
e8ab649
refactor: update constants, useMemo() dependencies, style
mrpmohiburrahman Oct 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 21 additions & 12 deletions src/TabView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,8 @@ interface Props<Route extends BaseRoute> {
}) => ImageSource | undefined;
}

const ANDROID_MAX_TABS = 6;

const TabView = <Route extends BaseRoute>({
navigationState,
renderScene,
Expand All @@ -87,9 +89,18 @@ const TabView = <Route extends BaseRoute>({
// @ts-ignore
const focusedKey = navigationState.routes[navigationState.index].key;

if (navigationState.routes.length > 6) {
throw new Error('TabView only supports up to 6 tabs');
}
const trimmedRoutes = useMemo(() => {
if (
Platform.OS === 'android' &&
navigationState.routes.length > ANDROID_MAX_TABS
) {
console.warn(
`TabView only supports up to ${ANDROID_MAX_TABS} tabs on Android`
);
return navigationState.routes.slice(0, ANDROID_MAX_TABS);
}
return navigationState.routes;
}, [navigationState.routes]);

/**
* List of loaded tabs, tabs will be loaded when navigated to.
Expand All @@ -103,18 +114,18 @@ const TabView = <Route extends BaseRoute>({

const icons = useMemo(
() =>
navigationState.routes.map((route) =>
trimmedRoutes.map((route) =>
getIcon({
route,
focused: route.key === focusedKey,
})
),
[focusedKey, getIcon, navigationState.routes]
[focusedKey, getIcon, trimmedRoutes]
);

const items: TabViewItems = useMemo(
() =>
navigationState.routes.map((route, index) => {
trimmedRoutes.map((route, index) => {
const icon = icons[index];
const isSfSymbol = isAppleSymbol(icon);

Expand All @@ -130,7 +141,7 @@ const TabView = <Route extends BaseRoute>({
badge: props.getBadge?.({ route }),
};
}),
[getLabelText, icons, navigationState.routes, props]
[getLabelText, icons, trimmedRoutes, props]
);

const resolvedIconAssets: ImageSource[] = useMemo(
Expand All @@ -145,9 +156,7 @@ const TabView = <Route extends BaseRoute>({
);

const jumpTo = useLatestCallback((key: string) => {
const index = navigationState.routes.findIndex(
(route) => route.key === key
);
const index = trimmedRoutes.findIndex((route) => route.key === key);

onIndexChange(index);
});
Expand All @@ -163,7 +172,7 @@ const TabView = <Route extends BaseRoute>({
}}
{...props}
>
{navigationState.routes.map((route) => {
{trimmedRoutes.map((route) => {
if (getLazy({ route }) !== false && !loaded.includes(route.key)) {
// Don't render a screen if we've never navigated to it
if (Platform.OS === 'android') {
Expand All @@ -176,7 +185,7 @@ const TabView = <Route extends BaseRoute>({
<View
key={route.key}
style={[
{ width: '100%', height: '100%' },
styles.fullWidth,
Platform.OS === 'android' && {
display: route.key === focusedKey ? 'flex' : 'none',
},
Expand Down
Loading