mirror of
https://github.com/urosran/cally.git
synced 2025-11-26 08:24:55 +00:00
changed font
This commit is contained in:
ivic00
@ -43,7 +43,7 @@ export default function TabLayout() {
|
||||
return (
|
||||
<DrawerContentScrollView {...props} style={{ height: "100%" }}>
|
||||
<View centerH centerV margin-30>
|
||||
<Text text50>Welcome to Cally</Text>
|
||||
<Text text40>Welcome to Cally</Text>
|
||||
</View>
|
||||
<View
|
||||
style={{
|
||||
@ -101,6 +101,7 @@ export default function TabLayout() {
|
||||
<Button
|
||||
onPress={() => props.navigation.navigate("settings")}
|
||||
label={"Manage Settings"}
|
||||
labelStyle={{fontFamily: "Manrope_500Medium"}}
|
||||
iconSource={() => (
|
||||
<View
|
||||
backgroundColor="#ededed"
|
||||
@ -128,13 +129,14 @@ export default function TabLayout() {
|
||||
marginH-30
|
||||
paddingV-15
|
||||
style={{
|
||||
marginTop: "47%",
|
||||
marginTop: "42%",
|
||||
backgroundColor: "transparent",
|
||||
borderWidth: 2,
|
||||
borderWidth: 1.3,
|
||||
borderColor: "#fd1775",
|
||||
}}
|
||||
label="Sign out of Cally"
|
||||
color="#fd1775"
|
||||
labelStyle={{fontFamily: 'Manrope_700Bold'}}
|
||||
onPress={() => signOut()}
|
||||
/>
|
||||
</DrawerContentScrollView>
|
||||
|
||||
224
app/_layout.tsx
224
app/_layout.tsx
@ -1,44 +1,198 @@
|
||||
import {DefaultTheme, ThemeProvider} from '@react-navigation/native';
|
||||
import {useFonts} from 'expo-font';
|
||||
import {Stack} from 'expo-router';
|
||||
import * as SplashScreen from 'expo-splash-screen';
|
||||
import {useEffect} from 'react';
|
||||
import 'react-native-reanimated';
|
||||
import {AuthContextProvider} from "@/contexts/AuthContext";
|
||||
import {QueryClient, QueryClientProvider} from "react-query";
|
||||
import {Toast} from "react-native-ui-lib";
|
||||
import React, { useEffect } from "react";
|
||||
import { DefaultTheme, ThemeProvider } from "@react-navigation/native";
|
||||
import {
|
||||
useFonts,
|
||||
Manrope_200ExtraLight,
|
||||
Manrope_300Light,
|
||||
Manrope_400Regular,
|
||||
Manrope_500Medium,
|
||||
Manrope_600SemiBold,
|
||||
Manrope_700Bold,
|
||||
Manrope_800ExtraBold,
|
||||
} from "@expo-google-fonts/manrope";
|
||||
import { Stack } from "expo-router";
|
||||
import * as SplashScreen from "expo-splash-screen";
|
||||
import "react-native-reanimated";
|
||||
import { AuthContextProvider } from "@/contexts/AuthContext";
|
||||
import { QueryClient, QueryClientProvider } from "react-query";
|
||||
import {
|
||||
ThemeManager,
|
||||
Typography,
|
||||
Toast,
|
||||
TextProps,
|
||||
} from "react-native-ui-lib";
|
||||
|
||||
SplashScreen.preventAutoHideAsync();
|
||||
|
||||
const queryClient = new QueryClient();
|
||||
|
||||
export default function RootLayout() {
|
||||
const [loaded] = useFonts({
|
||||
SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
|
||||
});
|
||||
type TextStyleBase =
|
||||
| "text10"
|
||||
| "text20"
|
||||
| "text30"
|
||||
| "text40"
|
||||
| "text50"
|
||||
| "text60"
|
||||
| "text70"
|
||||
| "text80"
|
||||
| "text90"
|
||||
| "text100";
|
||||
type TextStyleModifier = "R" | "M" | "BO" | "H" | "BL" | "L";
|
||||
type TextStyle = TextStyleBase | `${TextStyleBase}${TextStyleModifier}`;
|
||||
|
||||
useEffect(() => {
|
||||
if (loaded) {
|
||||
SplashScreen.hideAsync();
|
||||
}
|
||||
}, [loaded]);
|
||||
type TextStyleProps = {
|
||||
[K in TextStyle]?: boolean;
|
||||
};
|
||||
|
||||
if (!loaded) {
|
||||
return null;
|
||||
}
|
||||
type ExtendedTextProps = TextProps & TextStyleProps;
|
||||
|
||||
return (
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<AuthContextProvider>
|
||||
<ThemeProvider value={DefaultTheme}>
|
||||
<Stack>
|
||||
<Stack.Screen name="(auth)" options={{headerShown: false}}/>
|
||||
<Stack.Screen name="(unauth)" options={{headerShown: false}}/>
|
||||
<Stack.Screen name="+not-found"/>
|
||||
</Stack>
|
||||
<Toast/>
|
||||
</ThemeProvider>
|
||||
</AuthContextProvider>
|
||||
</QueryClientProvider>
|
||||
);
|
||||
interface FontStyle {
|
||||
fontFamily: string;
|
||||
fontSize: number;
|
||||
}
|
||||
|
||||
const getManropeFontStyle = (style: TextStyle): FontStyle => {
|
||||
let fontFamily: string;
|
||||
let fontSize: number;
|
||||
|
||||
if (style.includes("L") || style.includes("BL"))
|
||||
fontFamily = "Manrope_300Light";
|
||||
else if (style.includes("R")) fontFamily = "Manrope_400Regular";
|
||||
else if (style.includes("M")) fontFamily = "Manrope_500Medium";
|
||||
else if (style.includes("BO") || style.includes("H"))
|
||||
fontFamily = "Manrope_700Bold";
|
||||
else {
|
||||
const baseStyle = style.slice(0, 6) as TextStyleBase;
|
||||
switch (baseStyle) {
|
||||
case "text10":
|
||||
case "text20":
|
||||
fontFamily = "Manrope_700Bold";
|
||||
break;
|
||||
case "text30":
|
||||
case "text40":
|
||||
fontFamily = "Manrope_600SemiBold";
|
||||
break;
|
||||
case "text50":
|
||||
fontFamily = "Manrope_400Regular";
|
||||
break;
|
||||
default:
|
||||
fontFamily = "Manrope_300Light";
|
||||
}
|
||||
}
|
||||
|
||||
switch (style.slice(0, 6) as TextStyleBase) {
|
||||
case "text10":
|
||||
fontSize = 64;
|
||||
break;
|
||||
case "text20":
|
||||
fontSize = 50;
|
||||
break;
|
||||
case "text30":
|
||||
fontSize = 36;
|
||||
break;
|
||||
case "text40":
|
||||
fontSize = 28;
|
||||
break;
|
||||
case "text50":
|
||||
fontSize = 24;
|
||||
break;
|
||||
case "text60":
|
||||
fontSize = 20;
|
||||
break;
|
||||
case "text70":
|
||||
fontSize = 16;
|
||||
break;
|
||||
case "text80":
|
||||
fontSize = 14;
|
||||
break;
|
||||
case "text90":
|
||||
fontSize = 12;
|
||||
break;
|
||||
case "text100":
|
||||
fontSize = 10;
|
||||
break;
|
||||
default:
|
||||
fontSize = 16;
|
||||
}
|
||||
|
||||
return { fontFamily, fontSize };
|
||||
};
|
||||
|
||||
export default function RootLayout() {
|
||||
const [loaded] = useFonts({
|
||||
Manrope_200ExtraLight,
|
||||
Manrope_300Light,
|
||||
Manrope_400Regular,
|
||||
Manrope_500Medium,
|
||||
Manrope_600SemiBold,
|
||||
Manrope_700Bold,
|
||||
Manrope_800ExtraBold,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (loaded) {
|
||||
SplashScreen.hideAsync();
|
||||
|
||||
const typographies: Partial<Record<TextStyle, FontStyle>> = {};
|
||||
(
|
||||
[
|
||||
"text10",
|
||||
"text20",
|
||||
"text30",
|
||||
"text40",
|
||||
"text50",
|
||||
"text60",
|
||||
"text70",
|
||||
"text80",
|
||||
"text90",
|
||||
"text100",
|
||||
] as const
|
||||
).forEach((baseStyle) => {
|
||||
typographies[baseStyle] = getManropeFontStyle(baseStyle);
|
||||
(["R", "M", "BO", "H", "BL", "L"] as const).forEach((modifier) => {
|
||||
const style = `${baseStyle}${modifier}` as TextStyle;
|
||||
typographies[style] = getManropeFontStyle(style);
|
||||
});
|
||||
});
|
||||
|
||||
Typography.loadTypographies(typographies);
|
||||
|
||||
ThemeManager.setComponentTheme(
|
||||
"Text",
|
||||
(props: ExtendedTextProps, context: unknown) => {
|
||||
const textStyle = (
|
||||
Object.keys(props) as Array<keyof ExtendedTextProps>
|
||||
).find((key) => typographies[key as TextStyle]) as
|
||||
| TextStyle
|
||||
| undefined;
|
||||
|
||||
return {
|
||||
style: [
|
||||
Typography.text50,
|
||||
textStyle ? typographies[textStyle] : undefined,
|
||||
],
|
||||
};
|
||||
}
|
||||
);
|
||||
}
|
||||
}, [loaded]);
|
||||
|
||||
if (!loaded) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<AuthContextProvider>
|
||||
<ThemeProvider value={DefaultTheme}>
|
||||
<Stack>
|
||||
<Stack.Screen name="(auth)" options={{ headerShown: false }} />
|
||||
<Stack.Screen name="(unauth)" options={{ headerShown: false }} />
|
||||
<Stack.Screen name="+not-found" />
|
||||
</Stack>
|
||||
<Toast />
|
||||
</ThemeProvider>
|
||||
</AuthContextProvider>
|
||||
</QueryClientProvider>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user