space/luggage-list
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases 20 Wiki Activity

feat: add centered quick-add item button in bottom nav
All checks were successful
Luggage List Build / build-web (push) Successful in 29s
Details
Luggage List Build / build-android (push) Successful in 5m59s
Details
Luggage List Build / release (push) Successful in 11s
Details

Browse Source
This commit is contained in:
Luna
2026-04-18 18:13:28 +02:00
parent fb54db0619
commit 2ec877362f
3 changed files with 65 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
src/components/BottomTab.js
View File

@@ -3,10 +3,23 @@ import { Pressable, Text, View } from 'react-native';
import Ionicons from '@expo/vector-icons/Ionicons';
import { styles } from '../styles';
export default function BottomTab({ current, onChange }) {
const tabs = [
function TabBtn({ tab, current, onChange }) {
const active = current === tab.key;
return (
<Pressable onPress={() => onChange(tab.key)} style={styles.tabItem}>
<Ionicons name={active ? tab.iconActive : tab.icon} size={18} color={active ? '#dbeafe' : '#94a3b8'} />
<Text style={[styles.tabLabel, active && styles.tabLabelActive]}>{tab.label}</Text>
</Pressable>
);
}
export default function BottomTab({ current, onChange, onAddItem, canAddItem }) {
const leftTabs = [
{ key: 'trips', label: 'Trips', icon: 'airplane-outline', iconActive: 'airplane' },
{ key: 'items', label: 'Items', icon: 'briefcase-outline', iconActive: 'briefcase' },
];
const rightTabs = [
{ key: 'checkup', label: 'Check-Up', icon: 'checkmark-circle-outline', iconActive: 'checkmark-circle' },
{ key: 'history', label: 'History', icon: 'time-outline', iconActive: 'time' },
];
@@ -14,19 +27,25 @@ export default function BottomTab({ current, onChange }) {
return (
<View style={styles.tabBarWrap}>
<View style={styles.tabBar}>
{tabs.map((tab) => {
const active = current === tab.key;
return (
<Pressable key={tab.key} onPress={() => onChange(tab.key)} style={styles.tabItem}>
<Ionicons
name={active ? tab.iconActive : tab.icon}
size={18}
color={active ? '#dbeafe' : '#94a3b8'}
/>
<Text style={[styles.tabLabel, active && styles.tabLabelActive]}>{tab.label}</Text>
</Pressable>
);
})}
<View style={styles.tabGroupSide}>
{leftTabs.map((tab) => (
<TabBtn key={tab.key} tab={tab} current={current} onChange={onChange} />
))}
</View>
<Pressable
style={[styles.tabAddBtn, !canAddItem && styles.tabAddBtnDisabled]}
onPress={onAddItem}
disabled={!canAddItem}
>
<Ionicons name="add" size={26} color="#fff" />
</Pressable>
<View style={styles.tabGroupSide}>
{rightTabs.map((tab) => (
<TabBtn key={tab.key} tab={tab} current={current} onChange={onChange} />
))}
</View>
</View>
</View>
);