feat : Première navigation
This commit is contained in:
Yaël Perret
110
package-lock.json
generated
110
package-lock.json
generated
@@ -12,6 +12,7 @@
|
||||
"@expo-google-fonts/jetbrains-mono": "^0.4.1",
|
||||
"@expo-google-fonts/space-grotesk": "^0.4.1",
|
||||
"@expo/ui": "~56.0.14",
|
||||
"@react-navigation/bottom-tabs": "^7.18.18",
|
||||
"@tanstack/react-query": "^5.102.8",
|
||||
"axios": "^1.20.0",
|
||||
"babel-preset-expo": "^57.0.9",
|
||||
@@ -2867,6 +2868,96 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@react-navigation/bottom-tabs": {
|
||||
"version": "7.18.18",
|
||||
"resolved": "https://registry.npmjs.org/@react-navigation/bottom-tabs/-/bottom-tabs-7.18.18.tgz",
|
||||
"integrity": "sha512-8XEvMG7SeBEY1zPSM3Bt3T12db1Q+j9qAMakdoSVkbFBXo5+rbrsdz4kOVtCs7vXOEeJfOEIZlubgDb4zRFHAw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@react-navigation/elements": "^2.9.40",
|
||||
"color": "^4.2.3",
|
||||
"sf-symbols-typescript": "^2.1.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@react-navigation/native": "^7.3.18",
|
||||
"react": ">= 18.2.0",
|
||||
"react-native": "*",
|
||||
"react-native-safe-area-context": ">= 4.0.0",
|
||||
"react-native-screens": ">= 4.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@react-navigation/core": {
|
||||
"version": "7.21.13",
|
||||
"resolved": "https://registry.npmjs.org/@react-navigation/core/-/core-7.21.13.tgz",
|
||||
"integrity": "sha512-d1syMXra7RlJjGsjsIxEA14F6U+awFtQJeOfDc+V7x3y1mPqYQVTYnqnt3PR+fBBouUKaKsgKZsSR3MP5919Xg==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@react-navigation/routers": "^7.6.4",
|
||||
"escape-string-regexp": "^4.0.0",
|
||||
"fast-deep-equal": "^3.1.3",
|
||||
"nanoid": "^3.3.11",
|
||||
"query-string": "^7.1.3",
|
||||
"react-is": "^19.1.0",
|
||||
"use-latest-callback": "^0.2.4",
|
||||
"use-sync-external-store": "^1.5.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">= 18.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@react-navigation/elements": {
|
||||
"version": "2.9.40",
|
||||
"resolved": "https://registry.npmjs.org/@react-navigation/elements/-/elements-2.9.40.tgz",
|
||||
"integrity": "sha512-x2fCMVKU23YeQvHSCFq2mVRYAbHqYNqb8kfWSEfIQ+XUX7dBXWd93/pr0w5jLjALDHDxQUaJKh4mIqr8q3zAwQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"color": "^4.2.3",
|
||||
"use-latest-callback": "^0.2.4",
|
||||
"use-sync-external-store": "^1.5.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@react-native-masked-view/masked-view": ">= 0.2.0",
|
||||
"@react-navigation/native": "^7.3.18",
|
||||
"react": ">= 18.2.0",
|
||||
"react-native": "*",
|
||||
"react-native-safe-area-context": ">= 4.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@react-native-masked-view/masked-view": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@react-navigation/native": {
|
||||
"version": "7.3.18",
|
||||
"resolved": "https://registry.npmjs.org/@react-navigation/native/-/native-7.3.18.tgz",
|
||||
"integrity": "sha512-5lLYl0Kt85jcpEYxXzj2ecIKta+yo4EcAIOZoJe6jU9lbR0lu6sAQsotU3rlVAYL1VBY/xLemxs4WQ2LJs4Oew==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@react-navigation/core": "^7.21.13",
|
||||
"escape-string-regexp": "^4.0.0",
|
||||
"fast-deep-equal": "^3.1.3",
|
||||
"nanoid": "^3.3.11",
|
||||
"standard-navigation": "^0.0.8",
|
||||
"use-latest-callback": "^0.2.4"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">= 18.2.0",
|
||||
"react-native": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@react-navigation/routers": {
|
||||
"version": "7.6.4",
|
||||
"resolved": "https://registry.npmjs.org/@react-navigation/routers/-/routers-7.6.4.tgz",
|
||||
"integrity": "sha512-GI7eJm8/KsZUQaYcXvEExikKurRZRgEsSzyZ7faENfi65yqJBCXjDMwyN1pF6pNW1MoLH1ErDwDivFxY6BzD3w==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"nanoid": "^3.3.11"
|
||||
}
|
||||
},
|
||||
"node_modules/@sinclair/typebox": {
|
||||
"version": "0.27.10",
|
||||
"resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.27.10.tgz",
|
||||
@@ -9666,6 +9757,16 @@
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/standard-navigation": {
|
||||
"version": "0.0.8",
|
||||
"resolved": "https://registry.npmjs.org/standard-navigation/-/standard-navigation-0.0.8.tgz",
|
||||
"integrity": "sha512-TyVbo7INUDWtsUWDFn8RR7kwR87U0S4xHfLfbbnyeC581TmmyqQ+eM+nPw8rQTSD8QitRVcYfPaSHr/QJiUy1g==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"peerDependencies": {
|
||||
"react": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/statuses": {
|
||||
"version": "1.5.0",
|
||||
"resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
|
||||
@@ -10191,6 +10292,15 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/use-sync-external-store": {
|
||||
"version": "1.6.0",
|
||||
"resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
|
||||
"integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/util-deprecate": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
|
||||
|
||||
@@ -7,6 +7,7 @@
|
||||
"@expo-google-fonts/jetbrains-mono": "^0.4.1",
|
||||
"@expo-google-fonts/space-grotesk": "^0.4.1",
|
||||
"@expo/ui": "~56.0.14",
|
||||
"@react-navigation/bottom-tabs": "^7.18.18",
|
||||
"@tanstack/react-query": "^5.102.8",
|
||||
"axios": "^1.20.0",
|
||||
"babel-preset-expo": "^57.0.9",
|
||||
|
||||
@@ -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