aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--apps/mobile/app/_layout.tsx13
-rw-r--r--apps/mobile/app/dashboard/(tabs)/highlights.tsx2
-rw-r--r--apps/mobile/app/dashboard/(tabs)/index.tsx2
-rw-r--r--apps/mobile/app/dashboard/(tabs)/lists.tsx2
-rw-r--r--apps/mobile/app/dashboard/(tabs)/settings.tsx2
-rw-r--r--apps/mobile/app/dashboard/(tabs)/tags.tsx2
-rw-r--r--apps/mobile/components/SplashScreenController.tsx14
-rw-r--r--apps/mobile/components/navigation/stack.tsx7
-rw-r--r--apps/mobile/components/ui/CustomSafeAreaView.tsx17
-rw-r--r--apps/mobile/lib/settings.ts7
-rw-r--r--apps/mobile/lib/useColorScheme.tsx12
11 files changed, 50 insertions, 30 deletions
diff --git a/apps/mobile/app/_layout.tsx b/apps/mobile/app/_layout.tsx
index 3f9e5575..ab0f9c52 100644
--- a/apps/mobile/app/_layout.tsx
+++ b/apps/mobile/app/_layout.tsx
@@ -2,13 +2,16 @@ import "@/globals.css";
import "expo-dev-client";
import { useEffect } from "react";
+import { Platform } from "react-native";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import { KeyboardProvider } from "react-native-keyboard-controller";
+import { SafeAreaProvider } from "react-native-safe-area-context";
import { useRouter } from "expo-router";
import { Stack } from "expo-router/stack";
import { ShareIntentProvider, useShareIntent } from "expo-share-intent";
import { StatusBar } from "expo-status-bar";
import { StyledStack } from "@/components/navigation/stack";
+import SplashScreenController from "@/components/SplashScreenController";
import { Providers } from "@/lib/providers";
import { useColorScheme, useInitialAndroidBarSync } from "@/lib/useColorScheme";
import { cn } from "@/lib/utils";
@@ -30,9 +33,13 @@ export default function RootLayout() {
}, [hasShareIntent]);
return (
- <>
- <KeyboardProvider statusBarTranslucent navigationBarTranslucent>
+ <SafeAreaProvider>
+ <KeyboardProvider
+ statusBarTranslucent={Platform.OS !== "android" ? true : undefined}
+ navigationBarTranslucent={Platform.OS !== "android" ? true : undefined}
+ >
<NavThemeProvider value={NAV_THEME[colorScheme]}>
+ <SplashScreenController />
<StyledStack
layout={(props) => {
return (
@@ -86,6 +93,6 @@ export default function RootLayout() {
key={`root-status-bar-${isDarkColorScheme ? "light" : "dark"}`}
style={isDarkColorScheme ? "light" : "dark"}
/>
- </>
+ </SafeAreaProvider>
);
}
diff --git a/apps/mobile/app/dashboard/(tabs)/highlights.tsx b/apps/mobile/app/dashboard/(tabs)/highlights.tsx
index 8a0a8ae3..8d6e37a4 100644
--- a/apps/mobile/app/dashboard/(tabs)/highlights.tsx
+++ b/apps/mobile/app/dashboard/(tabs)/highlights.tsx
@@ -42,7 +42,7 @@ export default function Highlights() {
};
return (
- <CustomSafeAreaView>
+ <CustomSafeAreaView edges={["top"]}>
<HighlightList
highlights={data.pages.flatMap((p) => p.highlights)}
header={
diff --git a/apps/mobile/app/dashboard/(tabs)/index.tsx b/apps/mobile/app/dashboard/(tabs)/index.tsx
index 0a51b817..3e49e6f2 100644
--- a/apps/mobile/app/dashboard/(tabs)/index.tsx
+++ b/apps/mobile/app/dashboard/(tabs)/index.tsx
@@ -76,7 +76,7 @@ function HeaderRight({
export default function Home() {
return (
- <CustomSafeAreaView>
+ <CustomSafeAreaView edges={["top"]}>
<UpdatingBookmarkList
query={{ archived: false }}
header={
diff --git a/apps/mobile/app/dashboard/(tabs)/lists.tsx b/apps/mobile/app/dashboard/(tabs)/lists.tsx
index a5d4ebc8..3f81a36e 100644
--- a/apps/mobile/app/dashboard/(tabs)/lists.tsx
+++ b/apps/mobile/app/dashboard/(tabs)/lists.tsx
@@ -186,7 +186,7 @@ export default function Lists() {
});
return (
- <CustomSafeAreaView>
+ <CustomSafeAreaView edges={["top"]}>
<FlatList
className="h-full"
ListHeaderComponent={
diff --git a/apps/mobile/app/dashboard/(tabs)/settings.tsx b/apps/mobile/app/dashboard/(tabs)/settings.tsx
index 079afab2..ba38d9e6 100644
--- a/apps/mobile/app/dashboard/(tabs)/settings.tsx
+++ b/apps/mobile/app/dashboard/(tabs)/settings.tsx
@@ -46,7 +46,7 @@ export default function Dashboard() {
}
return (
- <CustomSafeAreaView>
+ <CustomSafeAreaView edges={["top"]}>
<UserProfileHeader
image={data?.image}
name={data?.name}
diff --git a/apps/mobile/app/dashboard/(tabs)/tags.tsx b/apps/mobile/app/dashboard/(tabs)/tags.tsx
index b05095ac..8a629305 100644
--- a/apps/mobile/app/dashboard/(tabs)/tags.tsx
+++ b/apps/mobile/app/dashboard/(tabs)/tags.tsx
@@ -75,7 +75,7 @@ export default function Tags() {
};
return (
- <CustomSafeAreaView>
+ <CustomSafeAreaView edges={["top"]}>
<FlatList
className="h-full"
ListHeaderComponent={
diff --git a/apps/mobile/components/SplashScreenController.tsx b/apps/mobile/components/SplashScreenController.tsx
new file mode 100644
index 00000000..52c80415
--- /dev/null
+++ b/apps/mobile/components/SplashScreenController.tsx
@@ -0,0 +1,14 @@
+import { SplashScreen } from "expo-router";
+import useAppSettings from "@/lib/settings";
+
+SplashScreen.preventAutoHideAsync();
+
+export default function SplashScreenController() {
+ const { isLoading } = useAppSettings();
+
+ if (!isLoading) {
+ SplashScreen.hide();
+ }
+
+ return null;
+}
diff --git a/apps/mobile/components/navigation/stack.tsx b/apps/mobile/components/navigation/stack.tsx
index f53b3652..145c591f 100644
--- a/apps/mobile/components/navigation/stack.tsx
+++ b/apps/mobile/components/navigation/stack.tsx
@@ -1,4 +1,4 @@
-import { TextStyle, ViewStyle } from "react-native";
+import { Platform, TextStyle, ViewStyle } from "react-native";
import { Stack } from "expo-router/stack";
import { cssInterop } from "nativewind";
@@ -14,7 +14,10 @@ function StackImpl({ contentStyle, headerStyle, ...props }: StackProps) {
headerStyle: {
backgroundColor: headerStyle?.backgroundColor?.toString(),
},
- navigationBarColor: contentStyle?.backgroundColor?.toString(),
+ navigationBarColor:
+ Platform.OS === "android"
+ ? undefined
+ : contentStyle?.backgroundColor?.toString(),
headerTintColor: headerStyle?.color?.toString(),
};
return <Stack {...props} />;
diff --git a/apps/mobile/components/ui/CustomSafeAreaView.tsx b/apps/mobile/components/ui/CustomSafeAreaView.tsx
index 840ea058..33c9a765 100644
--- a/apps/mobile/components/ui/CustomSafeAreaView.tsx
+++ b/apps/mobile/components/ui/CustomSafeAreaView.tsx
@@ -1,5 +1,4 @@
-import { Platform, SafeAreaView } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { SafeAreaView } from "react-native-safe-area-context";
import { useHeaderHeight } from "@react-navigation/elements";
export default function CustomSafeAreaView({
@@ -9,21 +8,17 @@ export default function CustomSafeAreaView({
children: React.ReactNode;
edges?: ("top" | "bottom")[];
}) {
- const insets = useSafeAreaInsets();
const headerHeight = useHeaderHeight();
return (
<SafeAreaView
style={{
flex: 1,
- paddingTop:
- // Some ugly hacks to make the app look the same on both android and ios
- Platform.OS == "android" && edges.includes("top")
- ? headerHeight > 0
- ? headerHeight
- : insets.top
- : undefined,
- paddingBottom: edges.includes("bottom") ? insets.bottom : undefined,
+ paddingTop: edges.includes("top")
+ ? headerHeight > 0
+ ? headerHeight
+ : undefined
+ : undefined,
}}
>
{children}
diff --git a/apps/mobile/lib/settings.ts b/apps/mobile/lib/settings.ts
index 745c778d..8da1d33d 100644
--- a/apps/mobile/lib/settings.ts
+++ b/apps/mobile/lib/settings.ts
@@ -1,3 +1,4 @@
+import { useEffect } from "react";
import * as SecureStore from "expo-secure-store";
import { z } from "zod";
import { create } from "zustand";
@@ -77,6 +78,12 @@ const useSettings = create<AppSettingsState>((set, get) => ({
export default function useAppSettings() {
const { settings, setSettings, load } = useSettings();
+ useEffect(() => {
+ if (settings.isLoading) {
+ load();
+ }
+ }, [load, settings.isLoading]);
+
return { ...settings, setSettings, load };
}
diff --git a/apps/mobile/lib/useColorScheme.tsx b/apps/mobile/lib/useColorScheme.tsx
index a00a445d..40e7ad53 100644
--- a/apps/mobile/lib/useColorScheme.tsx
+++ b/apps/mobile/lib/useColorScheme.tsx
@@ -46,13 +46,7 @@ function useInitialAndroidBarSync() {
export { useColorScheme, useInitialAndroidBarSync };
function setNavigationBar(colorScheme: "light" | "dark") {
- return Promise.all([
- NavigationBar.setButtonStyleAsync(
- colorScheme === "dark" ? "light" : "dark",
- ),
- NavigationBar.setPositionAsync("absolute"),
- NavigationBar.setBackgroundColorAsync(
- colorScheme === "dark" ? "#00000030" : "#ffffff80",
- ),
- ]);
+ return NavigationBar.setButtonStyleAsync(
+ colorScheme === "dark" ? "light" : "dark",
+ );
}