fix : Pas besoin de theming
This commit is contained in:
10
app.json
10
app.json
@@ -1,12 +1,12 @@
|
|||||||
{
|
{
|
||||||
"expo": {
|
"expo": {
|
||||||
"name": "bahla_front",
|
"name": "bahla",
|
||||||
"slug": "bahla_front",
|
"slug": "bahla",
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"orientation": "portrait",
|
"orientation": "portrait",
|
||||||
"icon": "./assets/images/icon.png",
|
"icon": "./assets/images/icon.png",
|
||||||
"scheme": "bahlafront",
|
"scheme": "bahla",
|
||||||
"userInterfaceStyle": "automatic",
|
"userInterfaceStyle": "dark",
|
||||||
"ios": {
|
"ios": {
|
||||||
"icon": "./assets/expo.icon"
|
"icon": "./assets/expo.icon"
|
||||||
},
|
},
|
||||||
@@ -18,7 +18,7 @@
|
|||||||
"monochromeImage": "./assets/images/android-icon-monochrome.png"
|
"monochromeImage": "./assets/images/android-icon-monochrome.png"
|
||||||
},
|
},
|
||||||
"predictiveBackGestureEnabled": false,
|
"predictiveBackGestureEnabled": false,
|
||||||
"package": "com.anonymous.bahla_front"
|
"package": "com.anonymous.bahla"
|
||||||
},
|
},
|
||||||
"web": {
|
"web": {
|
||||||
"bundler": "metro",
|
"bundler": "metro",
|
||||||
|
|||||||
@@ -1,6 +1,5 @@
|
|||||||
import { Stack } from 'expo-router';
|
import { Stack } from 'expo-router';
|
||||||
|
|
||||||
import { ThemeProvider } from '../theme';
|
|
||||||
import { useAppFonts } from '../theme/typography';
|
import { useAppFonts } from '../theme/typography';
|
||||||
|
|
||||||
export default function RootLayout() {
|
export default function RootLayout() {
|
||||||
@@ -11,8 +10,6 @@ export default function RootLayout() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ThemeProvider>
|
|
||||||
<Stack />
|
<Stack />
|
||||||
</ThemeProvider>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -6,12 +6,13 @@ import { Badge } from '@/components/Badge';
|
|||||||
import { Button } from '@/components/Button';
|
import { Button } from '@/components/Button';
|
||||||
import { ParticipationSegment } from '@/components/ParticipationSegment';
|
import { ParticipationSegment } from '@/components/ParticipationSegment';
|
||||||
import { ThemeChip } from '@/components/ThemeChip';
|
import { ThemeChip } from '@/components/ThemeChip';
|
||||||
import { useTheme } from '@/theme/useTheme';
|
import { colors } from '@/theme/colors';
|
||||||
|
import { spacing } from '@/theme/spacing';
|
||||||
|
import { typography } from '@/theme/typography';
|
||||||
|
|
||||||
import '../global.css';
|
import '../global.css';
|
||||||
|
|
||||||
export default function Index() {
|
export default function Index() {
|
||||||
const { colors, spacing, typography } = useTheme();
|
|
||||||
const [selectedThemes, setSelectedThemes] = useState<string[]>(['Soirée', 'Techno', 'Festival']);
|
const [selectedThemes, setSelectedThemes] = useState<string[]>(['Soirée', 'Techno', 'Festival']);
|
||||||
|
|
||||||
const themeOptions = useMemo(
|
const themeOptions = useMemo(
|
||||||
|
|||||||
@@ -10,7 +10,9 @@ import {
|
|||||||
type ViewStyle,
|
type ViewStyle,
|
||||||
} from 'react-native';
|
} from 'react-native';
|
||||||
|
|
||||||
import { useTheme } from '@/theme/useTheme';
|
import { colors } from '@/theme/colors';
|
||||||
|
import { borderRadius } from '@/theme/spacing';
|
||||||
|
import { typography } from '@/theme/typography';
|
||||||
|
|
||||||
export type BadgeVariant = 'verified' | 'tonight' | 'free' | 'complete' | 'draft' | 'pro' | 'date';
|
export type BadgeVariant = 'verified' | 'tonight' | 'free' | 'complete' | 'draft' | 'pro' | 'date';
|
||||||
|
|
||||||
@@ -48,7 +50,6 @@ export function Badge({
|
|||||||
style,
|
style,
|
||||||
textStyle,
|
textStyle,
|
||||||
}: BadgeProps) {
|
}: BadgeProps) {
|
||||||
const { colors, typography, borderRadius } = useTheme();
|
|
||||||
const pulse = useRef(new Animated.Value(1)).current;
|
const pulse = useRef(new Animated.Value(1)).current;
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
|||||||
@@ -14,7 +14,10 @@ import {
|
|||||||
} from 'react-native';
|
} from 'react-native';
|
||||||
import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
|
import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
|
||||||
|
|
||||||
import { useTheme } from '@/theme/useTheme';
|
import { colors, gradientDirection, gradients } from '@/theme/colors';
|
||||||
|
import { borderRadius } from '@/theme/spacing';
|
||||||
|
import { typography } from '@/theme/typography';
|
||||||
|
|
||||||
|
|
||||||
const BUTTON_HEIGHT = 52;
|
const BUTTON_HEIGHT = 52;
|
||||||
const PRESSED_SCALE = 0.97;
|
const PRESSED_SCALE = 0.97;
|
||||||
@@ -67,7 +70,6 @@ export function Button({
|
|||||||
accessibilityLabel,
|
accessibilityLabel,
|
||||||
testID,
|
testID,
|
||||||
}: ButtonProps) {
|
}: ButtonProps) {
|
||||||
const { colors, borderRadius, typography, gradients, gradientDirection } = useTheme();
|
|
||||||
const [internalLoading, setInternalLoading] = useState(false);
|
const [internalLoading, setInternalLoading] = useState(false);
|
||||||
const [isPressed, setIsPressed] = useState(false);
|
const [isPressed, setIsPressed] = useState(false);
|
||||||
|
|
||||||
|
|||||||
@@ -19,7 +19,9 @@ import Animated, {
|
|||||||
withTiming,
|
withTiming,
|
||||||
} from 'react-native-reanimated';
|
} from 'react-native-reanimated';
|
||||||
|
|
||||||
import { useTheme } from '@/theme/useTheme';
|
import { colors, glow, gradientDirection, gradients } from '@/theme/colors';
|
||||||
|
import { borderRadius } from '@/theme/spacing';
|
||||||
|
import { typography } from '@/theme/typography';
|
||||||
|
|
||||||
type ParticipationValue = {
|
type ParticipationValue = {
|
||||||
going: boolean;
|
going: boolean;
|
||||||
@@ -58,7 +60,6 @@ export function ParticipationSegment({
|
|||||||
style,
|
style,
|
||||||
testID,
|
testID,
|
||||||
}: ParticipationSegmentProps) {
|
}: ParticipationSegmentProps) {
|
||||||
const { colors, gradients, gradientDirection, typography, borderRadius, glow } = useTheme();
|
|
||||||
|
|
||||||
const [internalValue, setInternalValue] = useState<ParticipationValue>({
|
const [internalValue, setInternalValue] = useState<ParticipationValue>({
|
||||||
going: defaultValue?.going ?? false,
|
going: defaultValue?.going ?? false,
|
||||||
|
|||||||
@@ -11,7 +11,10 @@ import {
|
|||||||
type ViewStyle,
|
type ViewStyle,
|
||||||
} from 'react-native';
|
} from 'react-native';
|
||||||
|
|
||||||
import { useTheme } from '@/theme/useTheme';
|
import { colors, gradientDirection, gradients } from '@/theme/colors';
|
||||||
|
import { borderRadius } from '@/theme/spacing';
|
||||||
|
import { typography } from '@/theme/typography';
|
||||||
|
|
||||||
|
|
||||||
export type ThemeChipSelectedVariant = 'gradient' | 'accent';
|
export type ThemeChipSelectedVariant = 'gradient' | 'accent';
|
||||||
|
|
||||||
@@ -46,8 +49,6 @@ export function ThemeChip({
|
|||||||
testID,
|
testID,
|
||||||
accessibilityLabel,
|
accessibilityLabel,
|
||||||
}: ThemeChipProps) {
|
}: ThemeChipProps) {
|
||||||
const { colors, gradients, gradientDirection, borderRadius, typography } = useTheme();
|
|
||||||
|
|
||||||
const resolvedValue = value ?? label;
|
const resolvedValue = value ?? label;
|
||||||
const isGradient = selected && selectedVariant === 'gradient';
|
const isGradient = selected && selectedVariant === 'gradient';
|
||||||
const showSelectedIcon = selected && (showCross ?? showRemoveIcon);
|
const showSelectedIcon = selected && (showCross ?? showRemoveIcon);
|
||||||
|
|||||||
@@ -1,24 +0,0 @@
|
|||||||
import { type PropsWithChildren, useMemo } from 'react';
|
|
||||||
|
|
||||||
import { colors, glow, gradientDirection, gradients, palette } from './colors';
|
|
||||||
import spacing, { borderRadius } from './spacing';
|
|
||||||
import typography from './typography';
|
|
||||||
import { ThemeContext } from './useTheme';
|
|
||||||
|
|
||||||
export function ThemeProvider({ children }: PropsWithChildren) {
|
|
||||||
const value = useMemo(
|
|
||||||
() => ({
|
|
||||||
colors,
|
|
||||||
gradients,
|
|
||||||
glow,
|
|
||||||
gradientDirection,
|
|
||||||
palette,
|
|
||||||
typography,
|
|
||||||
spacing,
|
|
||||||
borderRadius,
|
|
||||||
}),
|
|
||||||
[],
|
|
||||||
);
|
|
||||||
|
|
||||||
return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
|
|
||||||
}
|
|
||||||
@@ -1,28 +0,0 @@
|
|||||||
import { createContext, useContext } from 'react';
|
|
||||||
|
|
||||||
import { colors, glow, gradientDirection, gradients, palette } from './colors';
|
|
||||||
import spacing, { borderRadius } from './spacing';
|
|
||||||
import typography from './typography';
|
|
||||||
|
|
||||||
export type ThemeContextValue = {
|
|
||||||
colors: typeof colors;
|
|
||||||
gradients: typeof gradients;
|
|
||||||
glow: typeof glow;
|
|
||||||
gradientDirection: typeof gradientDirection;
|
|
||||||
palette: typeof palette;
|
|
||||||
typography: typeof typography;
|
|
||||||
spacing: typeof spacing;
|
|
||||||
borderRadius: typeof borderRadius;
|
|
||||||
};
|
|
||||||
|
|
||||||
export const ThemeContext = createContext<ThemeContextValue | undefined>(undefined);
|
|
||||||
|
|
||||||
export const useTheme = () => {
|
|
||||||
const context = useContext(ThemeContext);
|
|
||||||
|
|
||||||
if (!context) {
|
|
||||||
throw new Error('useTheme must be used within a ThemeProvider');
|
|
||||||
}
|
|
||||||
|
|
||||||
return context;
|
|
||||||
};
|
|
||||||
Reference in New Issue
Block a user