From ea5ee24db40a2b4d75dfbba8611e712be06a291a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bruce=20R=C3=B6ttgers?= Date: Sat, 17 May 2025 15:45:20 +0200 Subject: [PATCH] add font to project --- app/app.json | 25 +++++++++++++++++++++++++ app/app/_layout.tsx | 6 ++++-- app/package.json | 3 ++- app/pnpm-lock.yaml | 10 +++++++++- app/utils/theme.ts | 8 ++++++++ 5 files changed, 48 insertions(+), 4 deletions(-) diff --git a/app/app.json b/app/app.json index 95225b8..f568f15 100644 --- a/app/app.json +++ b/app/app.json @@ -48,6 +48,31 @@ "project": "app", "organization": "bcye" } + ], + [ + "expo-font", + { + "fonts": [ + "node_modules/@expo-google-fonts/fraunces/100Thin/Fraunces_100Thin.ttf", + "node_modules/@expo-google-fonts/fraunces/100Thin_Italic/Fraunces_100Thin_Italic.ttf", + "node_modules/@expo-google-fonts/fraunces/200ExtraLight/Fraunces_200ExtraLight.ttf", + "node_modules/@expo-google-fonts/fraunces/200ExtraLight_Italic/Fraunces_200ExtraLight_Italic.ttf", + "node_modules/@expo-google-fonts/fraunces/300Light/Fraunces_300Light.ttf", + "node_modules/@expo-google-fonts/fraunces/300Light_Italic/Fraunces_300Light_Italic.ttf", + "node_modules/@expo-google-fonts/fraunces/400Regular/Fraunces_400Regular.ttf", + "node_modules/@expo-google-fonts/fraunces/400Regular_Italic/Fraunces_400Regular_Italic.ttf", + "node_modules/@expo-google-fonts/fraunces/500Medium/Fraunces_500Medium.ttf", + "node_modules/@expo-google-fonts/fraunces/500Medium_Italic/Fraunces_500Medium_Italic.ttf", + "node_modules/@expo-google-fonts/fraunces/600SemiBold/Fraunces_600SemiBold.ttf", + "node_modules/@expo-google-fonts/fraunces/600SemiBold_Italic/Fraunces_600SemiBold_Italic.ttf", + "node_modules/@expo-google-fonts/fraunces/700Bold/Fraunces_700Bold.ttf", + "node_modules/@expo-google-fonts/fraunces/700Bold_Italic/Fraunces_700Bold_Italic.ttf", + "node_modules/@expo-google-fonts/fraunces/800ExtraBold/Fraunces_800ExtraBold.ttf", + "node_modules/@expo-google-fonts/fraunces/800ExtraBold_Italic/Fraunces_800ExtraBold_Italic.ttf", + "node_modules/@expo-google-fonts/fraunces/900Black/Fraunces_900Black.ttf", + "node_modules/@expo-google-fonts/fraunces/900Black_Italic/Fraunces_900Black_Italic.ttf" + ] + } ] ], "experiments": { diff --git a/app/app/_layout.tsx b/app/app/_layout.tsx index 6b34cc8..2046477 100644 --- a/app/app/_layout.tsx +++ b/app/app/_layout.tsx @@ -1,15 +1,17 @@ import { Slot, Stack } from "expo-router"; import { hide, preventAutoHideAsync } from "expo-splash-screen"; import { useCallback, useEffect, useState } from "react"; -import { Button, Text, View } from "react-native-ui-lib"; +import { Button, Text, ThemeManager, View } from "react-native-ui-lib"; import AsyncStorage from "@react-native-async-storage/async-storage"; import { Linking } from "react-native"; -import { PRIMARY_COLOR } from "@/utils/theme"; +import { initialiseTheme, PRIMARY_COLOR } from "@/utils/theme"; import { init as initSentry, wrap as wrapSentry } from "@sentry/react-native"; // See https://docs.expo.dev/versions/latest/sdk/splash-screen/#usage for explanation on how this works preventAutoHideAsync(); +initialiseTheme(); + export default function Layout() { const [privacyConsent, setPrivacyConsent] = useState(null); diff --git a/app/package.json b/app/package.json index 483799a..5d3b0dc 100644 --- a/app/package.json +++ b/app/package.json @@ -25,6 +25,7 @@ }, "dependencies": { "@bcye/structured-wikivoyage-types": "^0.2.3", + "@expo-google-fonts/fraunces": "^0.3.1", "@expo/vector-icons": "^14.0.2", "@gorhom/bottom-sheet": "^5.0.6", "@maplibre/maplibre-react-native": "^10.1.0", @@ -38,7 +39,7 @@ "expo": "~52.0.17", "expo-blur": "~14.0.1", "expo-constants": "~17.0.3", - "expo-font": "~13.0.1", + "expo-font": "~13.0.4", "expo-haptics": "~14.0.0", "expo-linking": "~7.0.3", "expo-location": "~18.0.10", diff --git a/app/pnpm-lock.yaml b/app/pnpm-lock.yaml index 3a8c7cb..7be7beb 100644 --- a/app/pnpm-lock.yaml +++ b/app/pnpm-lock.yaml @@ -11,6 +11,9 @@ importers: '@bcye/structured-wikivoyage-types': specifier: ^0.2.3 version: 0.2.3 + '@expo-google-fonts/fraunces': + specifier: ^0.3.1 + version: 0.3.1 '@expo/vector-icons': specifier: ^14.0.2 version: 14.1.0(expo-font@13.0.4(expo@52.0.46(@babel/core@7.26.10)(@babel/preset-env@7.26.9(@babel/core@7.26.10))(@expo/metro-runtime@4.0.1(react-native@0.76.9(@babel/core@7.26.10)(@babel/preset-env@7.26.9(@babel/core@7.26.10))(@types/react@18.3.20)(react@18.3.1)))(graphql@16.8.1)(react-native-webview@13.12.5(react-native@0.76.9(@babel/core@7.26.10)(@babel/preset-env@7.26.9(@babel/core@7.26.10))(@types/react@18.3.20)(react@18.3.1))(react@18.3.1))(react-native@0.76.9(@babel/core@7.26.10)(@babel/preset-env@7.26.9(@babel/core@7.26.10))(@types/react@18.3.20)(react@18.3.1))(react@18.3.1))(react@18.3.1))(react-native@0.76.9(@babel/core@7.26.10)(@babel/preset-env@7.26.9(@babel/core@7.26.10))(@types/react@18.3.20)(react@18.3.1))(react@18.3.1) @@ -51,7 +54,7 @@ importers: specifier: ~17.0.3 version: 17.0.8(expo@52.0.46(@babel/core@7.26.10)(@babel/preset-env@7.26.9(@babel/core@7.26.10))(@expo/metro-runtime@4.0.1(react-native@0.76.9(@babel/core@7.26.10)(@babel/preset-env@7.26.9(@babel/core@7.26.10))(@types/react@18.3.20)(react@18.3.1)))(graphql@16.8.1)(react-native-webview@13.12.5(react-native@0.76.9(@babel/core@7.26.10)(@babel/preset-env@7.26.9(@babel/core@7.26.10))(@types/react@18.3.20)(react@18.3.1))(react@18.3.1))(react-native@0.76.9(@babel/core@7.26.10)(@babel/preset-env@7.26.9(@babel/core@7.26.10))(@types/react@18.3.20)(react@18.3.1))(react@18.3.1))(react-native@0.76.9(@babel/core@7.26.10)(@babel/preset-env@7.26.9(@babel/core@7.26.10))(@types/react@18.3.20)(react@18.3.1)) expo-font: - specifier: ~13.0.1 + specifier: ~13.0.4 version: 13.0.4(expo@52.0.46(@babel/core@7.26.10)(@babel/preset-env@7.26.9(@babel/core@7.26.10))(@expo/metro-runtime@4.0.1(react-native@0.76.9(@babel/core@7.26.10)(@babel/preset-env@7.26.9(@babel/core@7.26.10))(@types/react@18.3.20)(react@18.3.1)))(graphql@16.8.1)(react-native-webview@13.12.5(react-native@0.76.9(@babel/core@7.26.10)(@babel/preset-env@7.26.9(@babel/core@7.26.10))(@types/react@18.3.20)(react@18.3.1))(react@18.3.1))(react-native@0.76.9(@babel/core@7.26.10)(@babel/preset-env@7.26.9(@babel/core@7.26.10))(@types/react@18.3.20)(react@18.3.1))(react@18.3.1))(react@18.3.1) expo-haptics: specifier: ~14.0.0 @@ -912,6 +915,9 @@ packages: resolution: {integrity: sha512-XQsZgjm2EcVUiZQf11UBJQfmZeEmOW8DpI1gsFeln6w0ae0ii4dMQEQ0kjl6DspdWX1aGY1/loyXnP0JS06e/A==} engines: {node: '>=0.8.0'} + '@expo-google-fonts/fraunces@0.3.1': + resolution: {integrity: sha512-++IcwRvdnV/Qse4YcDnxTN2iOSTO5cpm0n6gXZUVQAu+c2YCm6A+3mY6u4N16o8mNcNdNas1yZ9la9EEqkMDSA==} + '@expo/apple-utils@2.1.12': resolution: {integrity: sha512-ugpL2URxNFxIRw943AIpX3dcvL5rhNCumpL8XTosYqZPyQQ7JRLVNd1m8FNyPg3pmFrz8M4tSucY2pt2ATuKOA==} hasBin: true @@ -6425,6 +6431,8 @@ snapshots: dependencies: '@types/hammerjs': 2.0.46 + '@expo-google-fonts/fraunces@0.3.1': {} + '@expo/apple-utils@2.1.12': {} '@expo/bunyan@4.0.1': diff --git a/app/utils/theme.ts b/app/utils/theme.ts index 7be857b..448b025 100644 --- a/app/utils/theme.ts +++ b/app/utils/theme.ts @@ -1 +1,9 @@ +import { ThemeManager } from "react-native-ui-lib"; + export const PRIMARY_COLOR = "#388659"; + +export function initialiseTheme() { + ThemeManager.setComponentTheme("Text", (props: any) => ({ + style: [{ fontFamily: "Fraunces" }, props.style], + })); +}