Suppression des fichiers d'exemple inutilisés
This commit is contained in:
		@@ -1,45 +0,0 @@
 | 
			
		||||
import { PropsWithChildren, useState } from 'react';
 | 
			
		||||
import { StyleSheet, TouchableOpacity } from 'react-native';
 | 
			
		||||
 | 
			
		||||
import { ThemedText } from '@/components/ThemedText';
 | 
			
		||||
import { ThemedView } from '@/components/ThemedView';
 | 
			
		||||
import { IconSymbol } from '@/components/ui/IconSymbol';
 | 
			
		||||
import { Colors } from '@/constants/Colors';
 | 
			
		||||
import { useColorScheme } from '@/hooks/useColorScheme';
 | 
			
		||||
 | 
			
		||||
export function Collapsible({ children, title }: PropsWithChildren & { title: string }) {
 | 
			
		||||
  const [isOpen, setIsOpen] = useState(false);
 | 
			
		||||
  const theme = useColorScheme() ?? 'light';
 | 
			
		||||
 | 
			
		||||
  return (
 | 
			
		||||
    <ThemedView>
 | 
			
		||||
      <TouchableOpacity
 | 
			
		||||
        style={styles.heading}
 | 
			
		||||
        onPress={() => setIsOpen((value) => !value)}
 | 
			
		||||
        activeOpacity={0.8}>
 | 
			
		||||
        <IconSymbol
 | 
			
		||||
          name="chevron.right"
 | 
			
		||||
          size={18}
 | 
			
		||||
          weight="medium"
 | 
			
		||||
          color={theme === 'light' ? Colors.light.icon : Colors.dark.icon}
 | 
			
		||||
          style={{ transform: [{ rotate: isOpen ? '90deg' : '0deg' }] }}
 | 
			
		||||
        />
 | 
			
		||||
 | 
			
		||||
        <ThemedText type="defaultSemiBold">{title}</ThemedText>
 | 
			
		||||
      </TouchableOpacity>
 | 
			
		||||
      {isOpen && <ThemedView style={styles.content}>{children}</ThemedView>}
 | 
			
		||||
    </ThemedView>
 | 
			
		||||
  );
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
const styles = StyleSheet.create({
 | 
			
		||||
  heading: {
 | 
			
		||||
    flexDirection: 'row',
 | 
			
		||||
    alignItems: 'center',
 | 
			
		||||
    gap: 6,
 | 
			
		||||
  },
 | 
			
		||||
  content: {
 | 
			
		||||
    marginTop: 6,
 | 
			
		||||
    marginLeft: 24,
 | 
			
		||||
  },
 | 
			
		||||
});
 | 
			
		||||
@@ -1,24 +0,0 @@
 | 
			
		||||
import { Link } from 'expo-router';
 | 
			
		||||
import { openBrowserAsync } from 'expo-web-browser';
 | 
			
		||||
import { type ComponentProps } from 'react';
 | 
			
		||||
import { Platform } from 'react-native';
 | 
			
		||||
 | 
			
		||||
type Props = Omit<ComponentProps<typeof Link>, 'href'> & { href: string };
 | 
			
		||||
 | 
			
		||||
export function ExternalLink({ href, ...rest }: Props) {
 | 
			
		||||
  return (
 | 
			
		||||
    <Link
 | 
			
		||||
      target="_blank"
 | 
			
		||||
      {...rest}
 | 
			
		||||
      href={href}
 | 
			
		||||
      onPress={async (event) => {
 | 
			
		||||
        if (Platform.OS !== 'web') {
 | 
			
		||||
          // Prevent the default behavior of linking to the default browser on native.
 | 
			
		||||
          event.preventDefault();
 | 
			
		||||
          // Open the link in an in-app browser.
 | 
			
		||||
          await openBrowserAsync(href);
 | 
			
		||||
        }
 | 
			
		||||
      }}
 | 
			
		||||
    />
 | 
			
		||||
  );
 | 
			
		||||
}
 | 
			
		||||
@@ -1,18 +0,0 @@
 | 
			
		||||
import { BottomTabBarButtonProps } from '@react-navigation/bottom-tabs';
 | 
			
		||||
import { PlatformPressable } from '@react-navigation/elements';
 | 
			
		||||
import * as Haptics from 'expo-haptics';
 | 
			
		||||
 | 
			
		||||
export function HapticTab(props: BottomTabBarButtonProps) {
 | 
			
		||||
  return (
 | 
			
		||||
    <PlatformPressable
 | 
			
		||||
      {...props}
 | 
			
		||||
      onPressIn={(ev) => {
 | 
			
		||||
        if (process.env.EXPO_OS === 'ios') {
 | 
			
		||||
          // Add a soft haptic feedback when pressing down on the tabs.
 | 
			
		||||
          Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
 | 
			
		||||
        }
 | 
			
		||||
        props.onPressIn?.(ev);
 | 
			
		||||
      }}
 | 
			
		||||
    />
 | 
			
		||||
  );
 | 
			
		||||
}
 | 
			
		||||
@@ -1,37 +0,0 @@
 | 
			
		||||
import { StyleSheet } from 'react-native';
 | 
			
		||||
import Animated, {
 | 
			
		||||
  useSharedValue,
 | 
			
		||||
  useAnimatedStyle,
 | 
			
		||||
  withTiming,
 | 
			
		||||
  withRepeat,
 | 
			
		||||
  withSequence,
 | 
			
		||||
} from 'react-native-reanimated';
 | 
			
		||||
 | 
			
		||||
import { ThemedText } from '@/components/ThemedText';
 | 
			
		||||
 | 
			
		||||
export function HelloWave() {
 | 
			
		||||
  const rotationAnimation = useSharedValue(0);
 | 
			
		||||
 | 
			
		||||
  rotationAnimation.value = withRepeat(
 | 
			
		||||
    withSequence(withTiming(25, { duration: 150 }), withTiming(0, { duration: 150 })),
 | 
			
		||||
    4 // Run the animation 4 times
 | 
			
		||||
  );
 | 
			
		||||
 | 
			
		||||
  const animatedStyle = useAnimatedStyle(() => ({
 | 
			
		||||
    transform: [{ rotate: `${rotationAnimation.value}deg` }],
 | 
			
		||||
  }));
 | 
			
		||||
 | 
			
		||||
  return (
 | 
			
		||||
    <Animated.View style={animatedStyle}>
 | 
			
		||||
      <ThemedText style={styles.text}>👋</ThemedText>
 | 
			
		||||
    </Animated.View>
 | 
			
		||||
  );
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
const styles = StyleSheet.create({
 | 
			
		||||
  text: {
 | 
			
		||||
    fontSize: 28,
 | 
			
		||||
    lineHeight: 32,
 | 
			
		||||
    marginTop: -6,
 | 
			
		||||
  },
 | 
			
		||||
});
 | 
			
		||||
@@ -1,82 +0,0 @@
 | 
			
		||||
import type { PropsWithChildren, ReactElement } from 'react';
 | 
			
		||||
import { StyleSheet } from 'react-native';
 | 
			
		||||
import Animated, {
 | 
			
		||||
  interpolate,
 | 
			
		||||
  useAnimatedRef,
 | 
			
		||||
  useAnimatedStyle,
 | 
			
		||||
  useScrollViewOffset,
 | 
			
		||||
} from 'react-native-reanimated';
 | 
			
		||||
 | 
			
		||||
import { ThemedView } from '@/components/ThemedView';
 | 
			
		||||
import { useBottomTabOverflow } from '@/components/ui/TabBarBackground';
 | 
			
		||||
import { useColorScheme } from '@/hooks/useColorScheme';
 | 
			
		||||
 | 
			
		||||
const HEADER_HEIGHT = 250;
 | 
			
		||||
 | 
			
		||||
type Props = PropsWithChildren<{
 | 
			
		||||
  headerImage: ReactElement;
 | 
			
		||||
  headerBackgroundColor: { dark: string; light: string };
 | 
			
		||||
}>;
 | 
			
		||||
 | 
			
		||||
export default function ParallaxScrollView({
 | 
			
		||||
  children,
 | 
			
		||||
  headerImage,
 | 
			
		||||
  headerBackgroundColor,
 | 
			
		||||
}: Props) {
 | 
			
		||||
  const colorScheme = useColorScheme() ?? 'light';
 | 
			
		||||
  const scrollRef = useAnimatedRef<Animated.ScrollView>();
 | 
			
		||||
  const scrollOffset = useScrollViewOffset(scrollRef);
 | 
			
		||||
  const bottom = useBottomTabOverflow();
 | 
			
		||||
  const headerAnimatedStyle = useAnimatedStyle(() => {
 | 
			
		||||
    return {
 | 
			
		||||
      transform: [
 | 
			
		||||
        {
 | 
			
		||||
          translateY: interpolate(
 | 
			
		||||
            scrollOffset.value,
 | 
			
		||||
            [-HEADER_HEIGHT, 0, HEADER_HEIGHT],
 | 
			
		||||
            [-HEADER_HEIGHT / 2, 0, HEADER_HEIGHT * 0.75]
 | 
			
		||||
          ),
 | 
			
		||||
        },
 | 
			
		||||
        {
 | 
			
		||||
          scale: interpolate(scrollOffset.value, [-HEADER_HEIGHT, 0, HEADER_HEIGHT], [2, 1, 1]),
 | 
			
		||||
        },
 | 
			
		||||
      ],
 | 
			
		||||
    };
 | 
			
		||||
  });
 | 
			
		||||
 | 
			
		||||
  return (
 | 
			
		||||
    <ThemedView style={styles.container}>
 | 
			
		||||
      <Animated.ScrollView
 | 
			
		||||
        ref={scrollRef}
 | 
			
		||||
        scrollEventThrottle={16}
 | 
			
		||||
        scrollIndicatorInsets={{ bottom }}
 | 
			
		||||
        contentContainerStyle={{ paddingBottom: bottom }}>
 | 
			
		||||
        <Animated.View
 | 
			
		||||
          style={[
 | 
			
		||||
            styles.header,
 | 
			
		||||
            { backgroundColor: headerBackgroundColor[colorScheme] },
 | 
			
		||||
            headerAnimatedStyle,
 | 
			
		||||
          ]}>
 | 
			
		||||
          {headerImage}
 | 
			
		||||
        </Animated.View>
 | 
			
		||||
        <ThemedView style={styles.content}>{children}</ThemedView>
 | 
			
		||||
      </Animated.ScrollView>
 | 
			
		||||
    </ThemedView>
 | 
			
		||||
  );
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
const styles = StyleSheet.create({
 | 
			
		||||
  container: {
 | 
			
		||||
    flex: 1,
 | 
			
		||||
  },
 | 
			
		||||
  header: {
 | 
			
		||||
    height: HEADER_HEIGHT,
 | 
			
		||||
    overflow: 'hidden',
 | 
			
		||||
  },
 | 
			
		||||
  content: {
 | 
			
		||||
    flex: 1,
 | 
			
		||||
    padding: 32,
 | 
			
		||||
    gap: 16,
 | 
			
		||||
    overflow: 'hidden',
 | 
			
		||||
  },
 | 
			
		||||
});
 | 
			
		||||
@@ -1,32 +0,0 @@
 | 
			
		||||
import { SymbolView, SymbolViewProps, SymbolWeight } from 'expo-symbols';
 | 
			
		||||
import { StyleProp, ViewStyle } from 'react-native';
 | 
			
		||||
 | 
			
		||||
export function IconSymbol({
 | 
			
		||||
  name,
 | 
			
		||||
  size = 24,
 | 
			
		||||
  color,
 | 
			
		||||
  style,
 | 
			
		||||
  weight = 'regular',
 | 
			
		||||
}: {
 | 
			
		||||
  name: SymbolViewProps['name'];
 | 
			
		||||
  size?: number;
 | 
			
		||||
  color: string;
 | 
			
		||||
  style?: StyleProp<ViewStyle>;
 | 
			
		||||
  weight?: SymbolWeight;
 | 
			
		||||
}) {
 | 
			
		||||
  return (
 | 
			
		||||
    <SymbolView
 | 
			
		||||
      weight={weight}
 | 
			
		||||
      tintColor={color}
 | 
			
		||||
      resizeMode="scaleAspectFit"
 | 
			
		||||
      name={name}
 | 
			
		||||
      style={[
 | 
			
		||||
        {
 | 
			
		||||
          width: size,
 | 
			
		||||
          height: size,
 | 
			
		||||
        },
 | 
			
		||||
        style,
 | 
			
		||||
      ]}
 | 
			
		||||
    />
 | 
			
		||||
  );
 | 
			
		||||
}
 | 
			
		||||
@@ -1,43 +0,0 @@
 | 
			
		||||
// This file is a fallback for using MaterialIcons on Android and web.
 | 
			
		||||
 | 
			
		||||
import MaterialIcons from '@expo/vector-icons/MaterialIcons';
 | 
			
		||||
import { SymbolWeight } from 'expo-symbols';
 | 
			
		||||
import React from 'react';
 | 
			
		||||
import { OpaqueColorValue, StyleProp, ViewStyle } from 'react-native';
 | 
			
		||||
 | 
			
		||||
// Add your SFSymbol to MaterialIcons mappings here.
 | 
			
		||||
const MAPPING = {
 | 
			
		||||
  // See MaterialIcons here: https://icons.expo.fyi
 | 
			
		||||
  // See SF Symbols in the SF Symbols app on Mac.
 | 
			
		||||
  'house.fill': 'home',
 | 
			
		||||
  'paperplane.fill': 'send',
 | 
			
		||||
  'chevron.left.forwardslash.chevron.right': 'code',
 | 
			
		||||
  'chevron.right': 'chevron-right',
 | 
			
		||||
} as Partial<
 | 
			
		||||
  Record<
 | 
			
		||||
    import('expo-symbols').SymbolViewProps['name'],
 | 
			
		||||
    React.ComponentProps<typeof MaterialIcons>['name']
 | 
			
		||||
  >
 | 
			
		||||
>;
 | 
			
		||||
 | 
			
		||||
export type IconSymbolName = keyof typeof MAPPING;
 | 
			
		||||
 | 
			
		||||
/**
 | 
			
		||||
 * An icon component that uses native SFSymbols on iOS, and MaterialIcons on Android and web. This ensures a consistent look across platforms, and optimal resource usage.
 | 
			
		||||
 *
 | 
			
		||||
 * Icon `name`s are based on SFSymbols and require manual mapping to MaterialIcons.
 | 
			
		||||
 */
 | 
			
		||||
export function IconSymbol({
 | 
			
		||||
  name,
 | 
			
		||||
  size = 24,
 | 
			
		||||
  color,
 | 
			
		||||
  style,
 | 
			
		||||
}: {
 | 
			
		||||
  name: IconSymbolName;
 | 
			
		||||
  size?: number;
 | 
			
		||||
  color: string | OpaqueColorValue;
 | 
			
		||||
  style?: StyleProp<ViewStyle>;
 | 
			
		||||
  weight?: SymbolWeight;
 | 
			
		||||
}) {
 | 
			
		||||
  return <MaterialIcons color={color} size={size} name={MAPPING[name]} style={style} />;
 | 
			
		||||
}
 | 
			
		||||
@@ -1,22 +0,0 @@
 | 
			
		||||
import { useBottomTabBarHeight } from '@react-navigation/bottom-tabs';
 | 
			
		||||
import { BlurView } from 'expo-blur';
 | 
			
		||||
import { StyleSheet } from 'react-native';
 | 
			
		||||
import { useSafeAreaInsets } from 'react-native-safe-area-context';
 | 
			
		||||
 | 
			
		||||
export default function BlurTabBarBackground() {
 | 
			
		||||
  return (
 | 
			
		||||
    <BlurView
 | 
			
		||||
      // System chrome material automatically adapts to the system's theme
 | 
			
		||||
      // and matches the native tab bar appearance on iOS.
 | 
			
		||||
      tint="systemChromeMaterial"
 | 
			
		||||
      intensity={100}
 | 
			
		||||
      style={StyleSheet.absoluteFill}
 | 
			
		||||
    />
 | 
			
		||||
  );
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
export function useBottomTabOverflow() {
 | 
			
		||||
  const tabHeight = useBottomTabBarHeight();
 | 
			
		||||
  const { bottom } = useSafeAreaInsets();
 | 
			
		||||
  return tabHeight - bottom;
 | 
			
		||||
}
 | 
			
		||||
@@ -1,6 +0,0 @@
 | 
			
		||||
// This is a shim for web and Android where the tab bar is generally opaque.
 | 
			
		||||
export default undefined;
 | 
			
		||||
 | 
			
		||||
export function useBottomTabOverflow() {
 | 
			
		||||
  return 0;
 | 
			
		||||
}
 | 
			
		||||
		Reference in New Issue
	
	Block a user