feat : Première navigation
This commit is contained in:
Yaël Perret
@@ -1,12 +1,78 @@
|
||||
import { BahlaTabBar } from '@/components/navigation/BahlaTabBar';
|
||||
import { CreateActionSheet } from '@/components/organizer/CreateActionSheet';
|
||||
import { useAuth } from '@/stores/authStore';
|
||||
import { Redirect, Stack } from 'expo-router';
|
||||
import { colors } from '@/theme/colors';
|
||||
import { Redirect, Tabs, router } from 'expo-router';
|
||||
import { CalendarDays, ChartColumn, LayoutDashboard, UserRound } from 'lucide-react-native';
|
||||
import { useState } from 'react';
|
||||
|
||||
export default function OrgLayout() {
|
||||
const session = useAuth((state) => state.session);
|
||||
|
||||
const [createOpen, setCreateOpen] = useState(false);
|
||||
|
||||
if (!session) return <Redirect href="../(auth)/login" />;
|
||||
|
||||
if (session.role !== 'org') return <Redirect href="../(tabs)" />;
|
||||
|
||||
return <Stack screenOptions={{ headerShown: false }} />;
|
||||
return (
|
||||
<>
|
||||
<Tabs
|
||||
screenOptions={{
|
||||
headerShown: false,
|
||||
sceneStyle: { backgroundColor: colors.deepBackground },
|
||||
}}
|
||||
tabBar={(props) => <BahlaTabBar {...props}
|
||||
fabRouteName='create'
|
||||
fabAccessibilityLabel='Créer un événement ou un post'
|
||||
onFabPress={() => setCreateOpen(true)} />}
|
||||
>
|
||||
<Tabs.Screen
|
||||
name="index"
|
||||
options={{
|
||||
title: 'Tableau',
|
||||
tabBarIcon: ({ color, size }) => <LayoutDashboard color={color} size={size} />,
|
||||
}}
|
||||
/>
|
||||
<Tabs.Screen
|
||||
name="events"
|
||||
options={{
|
||||
title: 'Events',
|
||||
tabBarIcon: ({ color, size }) => <CalendarDays color={color} size={size} />,
|
||||
}}
|
||||
/>
|
||||
<Tabs.Screen
|
||||
name="create"
|
||||
options={{ title: 'Créer' }}
|
||||
listeners={{ tabPress: (e) => e.preventDefault() }}
|
||||
/>
|
||||
<Tabs.Screen
|
||||
name="stats"
|
||||
options={{
|
||||
title: 'Stats',
|
||||
tabBarIcon: ({ color, size }) => <ChartColumn color={color} size={size} />,
|
||||
}}
|
||||
/>
|
||||
<Tabs.Screen
|
||||
name="profile"
|
||||
options={{
|
||||
title: 'Profil',
|
||||
tabBarIcon: ({ color, size }) => <UserRound color={color} size={size} />,
|
||||
}}
|
||||
/>
|
||||
</Tabs>
|
||||
|
||||
<CreateActionSheet
|
||||
visible={createOpen}
|
||||
onClose={() => setCreateOpen(false)}
|
||||
onCreateEvent={() => {
|
||||
setCreateOpen(false);
|
||||
router.push('/create/event');
|
||||
}}
|
||||
onCreatePost={() => {
|
||||
setCreateOpen(false);
|
||||
router.push('/create/post');
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
7
src/app/(org)/create.tsx
Normal file
7
src/app/(org)/create.tsx
Normal file
@@ -0,0 +1,7 @@
|
||||
/* ------------------------------------------------------------------ *
|
||||
* Route factice : réserve l'emplacement central de la tab bar.
|
||||
* Elle n'est jamais atteinte — le listener de (org)/_layout la bloque.
|
||||
* ------------------------------------------------------------------ */
|
||||
export default function CreatePlaceholder() {
|
||||
return null;
|
||||
}
|
||||
@@ -1,5 +1,8 @@
|
||||
import { BahlaTabBar } from '@/components/navigation/BahlaTabBar';
|
||||
import { useAuth } from '@/stores/authStore';
|
||||
import { Redirect, Stack } from 'expo-router';
|
||||
import { colors } from '@/theme/colors';
|
||||
import { Redirect, Tabs } from 'expo-router';
|
||||
import { Compass, Map, Ticket, UserRound } from 'lucide-react-native';
|
||||
|
||||
export default function TabsLayout() {
|
||||
const session = useAuth((state) => state.session);
|
||||
@@ -8,5 +11,42 @@ export default function TabsLayout() {
|
||||
|
||||
if (session.role === 'org') return <Redirect href="../(org)" />;
|
||||
|
||||
return <Stack screenOptions={{ headerShown: false}} />;
|
||||
return (
|
||||
<Tabs
|
||||
screenOptions={{
|
||||
headerShown: false,
|
||||
sceneStyle: { backgroundColor: colors.deepBackground },
|
||||
}}
|
||||
tabBar={(props) => <BahlaTabBar {...props} />}
|
||||
>
|
||||
<Tabs.Screen
|
||||
name="index"
|
||||
options={{
|
||||
title: 'Découvrir',
|
||||
tabBarIcon: ({ color, size }) => <Compass color={color} size={size} />,
|
||||
}}
|
||||
/>
|
||||
<Tabs.Screen
|
||||
name="map"
|
||||
options={{
|
||||
title: 'Carte',
|
||||
tabBarIcon: ({ color, size }) => <Map color={color} size={size} />,
|
||||
}}
|
||||
/>
|
||||
<Tabs.Screen
|
||||
name="my-events"
|
||||
options={{
|
||||
title: 'Mes events',
|
||||
tabBarIcon: ({ color, size }) => <Ticket color={color} size={size} />,
|
||||
}}
|
||||
/>
|
||||
<Tabs.Screen
|
||||
name="profile"
|
||||
options={{
|
||||
title: 'Profil',
|
||||
tabBarIcon: ({ color, size }) => <UserRound color={color} size={size} />,
|
||||
}}
|
||||
/>
|
||||
</Tabs>
|
||||
);
|
||||
}
|
||||
@@ -1,28 +1,27 @@
|
||||
import { QueryClientProvider } from '@tanstack/react-query';
|
||||
import { Stack } from 'expo-router';
|
||||
import * as SplashScreen from 'expo-splash-screen';
|
||||
import { StatusBar } from 'expo-status-bar';
|
||||
import * as SystemUI from 'expo-system-ui';
|
||||
import { useEffect } from 'react';
|
||||
import { StatusBar } from 'react-native';
|
||||
import { SafeAreaProvider } from 'react-native-safe-area-context';
|
||||
|
||||
import { queryClient } from '../hooks/queryClient';
|
||||
import { useAppFonts } from '../theme/typography';
|
||||
|
||||
import { useAuth } from '@/stores/authStore';
|
||||
import colors from '@/theme/colors';
|
||||
|
||||
SplashScreen.preventAutoHideAsync();
|
||||
|
||||
export default function RootLayout() {
|
||||
const [fontsLoaded] = useAppFonts();
|
||||
|
||||
if (!fontsLoaded) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const hydrated = useAuth((state) => state.hydrated);
|
||||
const hydrate = useAuth((state) => state.hydrate);
|
||||
|
||||
useEffect(() => { hydrate(); }, []);
|
||||
useEffect(() => {
|
||||
hydrate();
|
||||
}, [hydrate]);
|
||||
|
||||
const ready = hydrated && fontsLoaded;
|
||||
|
||||
@@ -30,13 +29,21 @@ export default function RootLayout() {
|
||||
if (ready) SplashScreen.hideAsync();
|
||||
}, [ready]);
|
||||
|
||||
useEffect(() => {
|
||||
SystemUI.setBackgroundColorAsync(colors.deepBackground);
|
||||
}, []);
|
||||
|
||||
if (!ready) return null;
|
||||
|
||||
return (
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<SafeAreaProvider>
|
||||
<StatusBar style="auto" />
|
||||
<Stack screenOptions={{ headerShown: false, contentStyle: { backgroundColor: '#0B0B12' } }}>
|
||||
<StatusBar
|
||||
barStyle="light-content"
|
||||
backgroundColor={colors.deepBackground}
|
||||
translucent={false}
|
||||
/>
|
||||
<Stack screenOptions={{ headerShown: false, contentStyle: { backgroundColor: colors.deepBackground } }}>
|
||||
<Stack.Screen name="(auth)" />
|
||||
<Stack.Screen name="(tabs)" />
|
||||
<Stack.Screen name="(org)" />
|
||||
|
||||
5
src/app/index-old2.tsx
Normal file
5
src/app/index-old2.tsx
Normal file
@@ -0,0 +1,5 @@
|
||||
import { Redirect } from 'expo-router';
|
||||
|
||||
export default function IndexRoute() {
|
||||
return <Redirect href="/(tabs)" />;
|
||||
}
|
||||
277
src/components/navigation/BahlaTabBar.tsx
Normal file
277
src/components/navigation/BahlaTabBar.tsx
Normal file
@@ -0,0 +1,277 @@
|
||||
/* ------------------------------------------------------------------ *
|
||||
* BahlaTabBar — barre d'onglets floutée, partagée par (tabs) et (org).
|
||||
*
|
||||
* Une seule implémentation pour les deux parcours : le verre dépoli,
|
||||
* le calcul de safe area, le rendu des items et l'accessibilité sont
|
||||
* identiques. Seul le bouton central change, et il est optionnel.
|
||||
*
|
||||
* Usage :
|
||||
* <Tabs tabBar={(p) => <BahlaTabBar {...p} />}> // utilisateur
|
||||
* <Tabs tabBar={(p) => <BahlaTabBar {...p} fabRouteName="create" // organisateur
|
||||
* onFabPress={openCreateSheet} />}>
|
||||
*
|
||||
* Dépendances : expo-blur · expo-linear-gradient ·
|
||||
* react-native-safe-area-context · react-native-svg
|
||||
* ------------------------------------------------------------------ */
|
||||
import { BlurView } from 'expo-blur';
|
||||
import { LinearGradient } from 'expo-linear-gradient';
|
||||
import { Tabs } from 'expo-router';
|
||||
import { useCallback, type ComponentProps } from 'react';
|
||||
import {
|
||||
Platform,
|
||||
Pressable,
|
||||
StyleSheet,
|
||||
Text,
|
||||
View,
|
||||
type ViewStyle,
|
||||
} from 'react-native';
|
||||
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
||||
|
||||
import { colors, gradientDirection, gradients } from '@/theme/colors';
|
||||
import { fontFamily, typography } from '@/theme/typography';
|
||||
import { Plus } from 'lucide-react-native';
|
||||
|
||||
/** Hauteur de la barre hors safe area. La hauteur réelle y ajoute l'inset bas. */
|
||||
export const TAB_BAR_BASE_HEIGHT = 52;
|
||||
const FAB_SIZE = 62;
|
||||
|
||||
/**
|
||||
* expo-blur ne rend rien d'exploitable sous Android 9 : sans ce repli on
|
||||
* obtient un rectangle transparent et des libellés illisibles.
|
||||
*/
|
||||
const SUPPORTS_BLUR = Platform.OS === 'ios' || Number(Platform.Version) >= 28;
|
||||
|
||||
type ExpoRouterTabBarProps = Parameters<
|
||||
NonNullable<ComponentProps<typeof Tabs>['tabBar']>
|
||||
>[0];
|
||||
|
||||
type Props = ExpoRouterTabBarProps & {
|
||||
/**
|
||||
* Nom de la route factice qui occupe l'emplacement central.
|
||||
* Absent côté utilisateur — il n'y a pas de bouton flottant.
|
||||
*/
|
||||
fabRouteName?: string;
|
||||
/** Appelé à la place d'une navigation quand on presse le bouton central. */
|
||||
onFabPress?: () => void;
|
||||
/** Libellé lu par les lecteurs d'écran sur le bouton central. */
|
||||
fabAccessibilityLabel?: string;
|
||||
};
|
||||
|
||||
export function BahlaTabBar({
|
||||
state,
|
||||
descriptors,
|
||||
navigation,
|
||||
fabRouteName,
|
||||
onFabPress,
|
||||
fabAccessibilityLabel = 'Créer',
|
||||
}: Props) {
|
||||
const insets = useSafeAreaInsets();
|
||||
|
||||
const handlePress = useCallback(
|
||||
(routeKey: string, routeName: string, isFocused: boolean) => {
|
||||
const event = navigation.emit({
|
||||
type: 'tabPress',
|
||||
target: routeKey,
|
||||
canPreventDefault: true,
|
||||
});
|
||||
if (isFocused || event.defaultPrevented) return;
|
||||
navigation.navigate(routeName as never);
|
||||
},
|
||||
[navigation],
|
||||
);
|
||||
|
||||
const handleLongPress = useCallback(
|
||||
(routeKey: string) => {
|
||||
navigation.emit({ type: 'tabLongPress', target: routeKey });
|
||||
},
|
||||
[navigation],
|
||||
);
|
||||
|
||||
return (
|
||||
<BlurView
|
||||
tint="dark"
|
||||
intensity={SUPPORTS_BLUR ? 20 : 0}
|
||||
style={[
|
||||
styles.bar,
|
||||
{
|
||||
height: TAB_BAR_BASE_HEIGHT + insets.bottom,
|
||||
paddingBottom: insets.bottom,
|
||||
// Sans flou, le fond translucide ne suffit pas : on opacifie.
|
||||
backgroundColor: SUPPORTS_BLUR
|
||||
? colors.deepBackground
|
||||
: 'rgba(10,10,18,0.96)',
|
||||
},
|
||||
]}
|
||||
>
|
||||
{state.routes.map((route: (typeof state.routes)[number], index: number) => {
|
||||
const { options } = descriptors[route.key];
|
||||
const isFocused = state.index === index;
|
||||
const tint = isFocused ? colors.primary : colors.textSecondary;
|
||||
|
||||
/* --- Emplacement central : bouton flottant, pas un onglet ---- */
|
||||
if (fabRouteName && route.name === fabRouteName) {
|
||||
return (
|
||||
<View key={route.key} style={styles.fabSlot}>
|
||||
<Pressable
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel={fabAccessibilityLabel}
|
||||
onPress={onFabPress}
|
||||
style={({ pressed }) => [
|
||||
styles.fab,
|
||||
pressed && styles.fabPressed,
|
||||
]}
|
||||
>
|
||||
<LinearGradient
|
||||
colors={gradients.signature}
|
||||
start={gradientDirection.start}
|
||||
end={gradientDirection.end}
|
||||
style={styles.fabGradient}
|
||||
>
|
||||
<Plus size={28} color={colors.onPrimary} />
|
||||
</LinearGradient>
|
||||
</Pressable>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
/* --- Onglet ordinaire ---------------------------------------- */
|
||||
const label =
|
||||
typeof options.tabBarLabel === 'string'
|
||||
? options.tabBarLabel
|
||||
: (options.title ?? route.name);
|
||||
|
||||
return (
|
||||
<Pressable
|
||||
key={route.key}
|
||||
accessibilityRole="button"
|
||||
accessibilityState={isFocused ? { selected: true } : {}}
|
||||
accessibilityLabel={options.tabBarAccessibilityLabel ?? label}
|
||||
onPress={() => handlePress(route.key, route.name, isFocused)}
|
||||
onLongPress={() => handleLongPress(route.key)}
|
||||
style={styles.item}
|
||||
>
|
||||
<View>
|
||||
{options.tabBarIcon?.({
|
||||
focused: isFocused,
|
||||
color: tint,
|
||||
size: 23,
|
||||
})}
|
||||
{options.tabBarBadge != null && (
|
||||
<View style={styles.badge}>
|
||||
<Text style={styles.badgeText} numberOfLines={1}>
|
||||
{options.tabBarBadge}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
<Text
|
||||
numberOfLines={1}
|
||||
style={[
|
||||
styles.label,
|
||||
{
|
||||
color: tint,
|
||||
fontFamily: isFocused
|
||||
? fontFamily.bodySemi
|
||||
: fontFamily.bodyMedium,
|
||||
},
|
||||
]}
|
||||
>
|
||||
{label}
|
||||
</Text>
|
||||
</Pressable>
|
||||
);
|
||||
})}
|
||||
</BlurView>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
bar: {
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'flex-start',
|
||||
paddingTop: 8,
|
||||
borderTopWidth: StyleSheet.hairlineWidth * 2,
|
||||
borderTopColor: colors.border,
|
||||
overflow: 'visible',
|
||||
} as ViewStyle,
|
||||
|
||||
item: {
|
||||
flex: 1,
|
||||
alignItems: 'center',
|
||||
gap: 5,
|
||||
// La zone tactile couvre toute la hauteur de la barre.
|
||||
alignSelf: 'stretch',
|
||||
paddingTop: 2,
|
||||
},
|
||||
|
||||
label: {
|
||||
...typography.tabLabel,
|
||||
fontFamily: undefined, // remplacé plus haut selon l'état
|
||||
},
|
||||
|
||||
badge: {
|
||||
position: 'absolute',
|
||||
top: -4,
|
||||
right: -8,
|
||||
minWidth: 16,
|
||||
height: 16,
|
||||
paddingHorizontal: 4,
|
||||
borderRadius: 999,
|
||||
backgroundColor: colors.primary,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
|
||||
badgeText: {
|
||||
...typography.overlineSm,
|
||||
fontSize: 9,
|
||||
lineHeight: 16,
|
||||
letterSpacing: 0,
|
||||
color: colors.onPrimary,
|
||||
},
|
||||
|
||||
/* Le créneau central est plus étroit que les onglets : 84 px fixes,
|
||||
comme la colonne du même nom dans la maquette. */
|
||||
fabSlot: {
|
||||
width: 84,
|
||||
alignItems: 'center',
|
||||
},
|
||||
|
||||
fab: {
|
||||
width: FAB_SIZE,
|
||||
height: FAB_SIZE,
|
||||
aspectRatio: 1,
|
||||
borderRadius: 15,
|
||||
// Remonte au-dessus de la barre et découpe un anneau dans le fond.
|
||||
marginTop: -30,
|
||||
overflow: 'hidden',
|
||||
alignSelf: 'center',
|
||||
borderWidth: 3,
|
||||
borderColor: colors.deepBackground,
|
||||
shadowColor: colors.primary,
|
||||
shadowOffset: { width: 0, height: 14 },
|
||||
shadowOpacity: 0.85,
|
||||
shadowRadius: 17,
|
||||
elevation: 12,
|
||||
},
|
||||
|
||||
fabPressed: {
|
||||
transform: [{ scale: 0.94 }],
|
||||
shadowOpacity: 0.5,
|
||||
},
|
||||
|
||||
fabGradient: {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
aspectRatio: 1,
|
||||
borderRadius: 15,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
});
|
||||
|
||||
export default BahlaTabBar;
|
||||
150
src/components/organizer/CreateActionSheet.tsx
Normal file
150
src/components/organizer/CreateActionSheet.tsx
Normal file
@@ -0,0 +1,150 @@
|
||||
/* ------------------------------------------------------------------ *
|
||||
* CreateActionSheet — le choix ouvert par le bouton central.
|
||||
* Deux actions, rien d'autre : créer un événement, publier un post.
|
||||
* ------------------------------------------------------------------ */
|
||||
import { LinearGradient } from 'expo-linear-gradient';
|
||||
import {
|
||||
Modal,
|
||||
Pressable,
|
||||
StyleSheet,
|
||||
Text,
|
||||
View,
|
||||
type ViewStyle,
|
||||
} from 'react-native';
|
||||
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
||||
|
||||
import { colors, gradientDirection, gradients } from '@/theme/colors';
|
||||
import { typography } from '@/theme/typography';
|
||||
import { Plus } from 'lucide-react-native';
|
||||
|
||||
type Props = {
|
||||
visible: boolean;
|
||||
onClose: () => void;
|
||||
onCreateEvent: () => void;
|
||||
onCreatePost: () => void;
|
||||
};
|
||||
|
||||
export function CreateActionSheet({
|
||||
visible,
|
||||
onClose,
|
||||
onCreateEvent,
|
||||
onCreatePost,
|
||||
}: Props) {
|
||||
const insets = useSafeAreaInsets();
|
||||
|
||||
return (
|
||||
<Modal
|
||||
visible={visible}
|
||||
transparent
|
||||
animationType="slide"
|
||||
onRequestClose={onClose}
|
||||
>
|
||||
<Pressable style={styles.scrim} onPress={onClose} accessibilityLabel="Fermer" />
|
||||
<View style={[styles.sheet, { paddingBottom: insets.bottom + 24 }]}>
|
||||
<View style={styles.handle} />
|
||||
|
||||
<Pressable
|
||||
accessibilityRole="button"
|
||||
onPress={onCreateEvent}
|
||||
style={({ pressed }) => [styles.row, pressed && styles.rowPressed]}
|
||||
>
|
||||
<LinearGradient
|
||||
colors={gradients.signature}
|
||||
start={gradientDirection.start}
|
||||
end={gradientDirection.end}
|
||||
style={styles.iconBox}
|
||||
>
|
||||
<Plus size={22} color={colors.onPrimary} />
|
||||
</LinearGradient>
|
||||
<View style={styles.rowText}>
|
||||
<Text style={styles.rowTitle}>Créer un événement</Text>
|
||||
<Text style={styles.rowSub}>Date, lieu, line-up, billetterie</Text>
|
||||
</View>
|
||||
</Pressable>
|
||||
|
||||
<Pressable
|
||||
accessibilityRole="button"
|
||||
onPress={onCreatePost}
|
||||
style={({ pressed }) => [styles.row, pressed && styles.rowPressed]}
|
||||
>
|
||||
<View style={[styles.iconBox, styles.iconBoxPlain]}>
|
||||
<Plus size={22} color={colors.tertiary} />
|
||||
</View>
|
||||
<View style={styles.rowText}>
|
||||
<Text style={styles.rowTitle}>Publier un post</Text>
|
||||
<Text style={styles.rowSub}>Sur un de tes événements à venir</Text>
|
||||
</View>
|
||||
</Pressable>
|
||||
</View>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
scrim: {
|
||||
flex: 1,
|
||||
backgroundColor: 'rgba(6,6,12,0.62)',
|
||||
} as ViewStyle,
|
||||
|
||||
sheet: {
|
||||
backgroundColor: colors.surface,
|
||||
borderTopLeftRadius: 28,
|
||||
borderTopRightRadius: 28,
|
||||
borderTopWidth: 1,
|
||||
borderTopColor: colors.border,
|
||||
paddingHorizontal: 20,
|
||||
paddingTop: 10,
|
||||
gap: 10,
|
||||
},
|
||||
|
||||
handle: {
|
||||
width: 44,
|
||||
height: 5,
|
||||
borderRadius: 999,
|
||||
backgroundColor: colors.border,
|
||||
alignSelf: 'center',
|
||||
marginBottom: 10,
|
||||
},
|
||||
|
||||
row: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 14,
|
||||
padding: 12,
|
||||
borderRadius: 18,
|
||||
backgroundColor: colors.surfaceElevated,
|
||||
borderWidth: 1,
|
||||
borderColor: colors.border,
|
||||
},
|
||||
|
||||
rowPressed: { opacity: 0.7 },
|
||||
|
||||
iconBox: {
|
||||
width: 48,
|
||||
height: 48,
|
||||
borderRadius: 15,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
|
||||
iconBoxPlain: {
|
||||
backgroundColor: colors.surface,
|
||||
borderWidth: 1,
|
||||
borderColor: colors.border,
|
||||
},
|
||||
|
||||
rowText: { flex: 1, gap: 2 },
|
||||
|
||||
rowTitle: {
|
||||
...typography.label,
|
||||
fontSize: 16,
|
||||
color: colors.textPrimary,
|
||||
},
|
||||
|
||||
rowSub: {
|
||||
...typography.caption,
|
||||
color: colors.textSecondary,
|
||||
},
|
||||
});
|
||||
|
||||
export default CreateActionSheet;
|
||||
18
src/hooks/useTabBarHeight.ts
Normal file
18
src/hooks/useTabBarHeight.ts
Normal file
@@ -0,0 +1,18 @@
|
||||
/* ------------------------------------------------------------------ *
|
||||
* useTabBarHeight — hauteur réelle de la BahlaTabBar.
|
||||
*
|
||||
* La barre est en position absolue au-dessus du contenu. Tout écran qui
|
||||
* défile doit réserver cette hauteur, sinon sa dernière carte finit
|
||||
* masquée derrière le verre dépoli :
|
||||
*
|
||||
* <FlatList contentContainerStyle={{ paddingBottom: useTabBarHeight() + 24 }} />
|
||||
* ------------------------------------------------------------------ */
|
||||
import { TAB_BAR_BASE_HEIGHT } from '@/components/navigation/BahlaTabBar';
|
||||
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
||||
|
||||
export function useTabBarHeight() {
|
||||
const insets = useSafeAreaInsets();
|
||||
return TAB_BAR_BASE_HEIGHT + insets.bottom;
|
||||
}
|
||||
|
||||
export default useTabBarHeight;
|
||||
@@ -8,6 +8,14 @@ export type Session = {
|
||||
role: Role;
|
||||
}
|
||||
|
||||
// Temporaire: bypass de l'auth pour avancer sur la navigation.
|
||||
const DEV_MOCK_SESSION_ENABLED = true;
|
||||
const DEV_MOCK_SESSION: Session = {
|
||||
userId: 'dev-user',
|
||||
token: 'dev-token',
|
||||
role: 'org',
|
||||
};
|
||||
|
||||
type AuthState = {
|
||||
session: Session | null;
|
||||
hydrated: boolean; // Le disque a été lu, la réponse est fiable
|
||||
@@ -23,8 +31,18 @@ export const useAuth = create<AuthState>((set) => ({
|
||||
hydrated: false,
|
||||
|
||||
hydrate: async () => {
|
||||
if (DEV_MOCK_SESSION_ENABLED) {
|
||||
set({ session: DEV_MOCK_SESSION, hydrated: true });
|
||||
return;
|
||||
}
|
||||
|
||||
const session = await SecureStore.getItemAsync(KEY);
|
||||
set({ session: session ? JSON.parse(session) : null, hydrated: true });
|
||||
if (session) {
|
||||
set({ session: JSON.parse(session), hydrated: true });
|
||||
return;
|
||||
}
|
||||
|
||||
set({ session: null, hydrated: true });
|
||||
},
|
||||
|
||||
signIn: async (s: Session) => {
|
||||
|
||||
Reference in New Issue
Block a user