Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | import React, { useEffect } from "react";
import { View, StyleSheet, Appearance } from "react-native";
import BottomNav from "../components/BottomNav";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
import { useTheme } from "../hooks/useTheme";
import { useDisplaySettingsStore } from "../hooks/useDisplaySettings";
import { useAccessibilitySettingsStore } from "../hooks/useAccessibilitySettings";
import { getDimOverlayOpacity } from "../utils/layoutDimOpacity";
function BrightnessDimLayer({
opacity,
}: Readonly<{
opacity: number;
}>): React.ReactElement | null {
Eif (opacity <= 0) {
return null;
}
return (
<View
pointerEvents="none"
style={[StyleSheet.absoluteFill, { backgroundColor: "#000", opacity }]}
/>
);
}
function ThemedRoot() {
const { colors } = useTheme();
const {
brightness,
autoBrightness,
darkMode,
hydrateFromStorage: hydrateDisplay,
} = useDisplaySettingsStore();
useEffect(() => {
void hydrateDisplay();
void useAccessibilitySettingsStore.getState().hydrateFromStorage();
}, [hydrateDisplay]);
useEffect(() => {
Appearance.setColorScheme(darkMode ? "dark" : "light");
}, [darkMode]);
const dimOpacity = getDimOverlayOpacity(brightness, autoBrightness);
return (
<View style={{ flex: 1, backgroundColor: colors.background }}>
<BottomNav />
<BrightnessDimLayer opacity={dimOpacity} />
</View>
);
}
export default function RootLayout() {
return (
<GestureHandlerRootView style={{ flex: 1 }}>
<BottomSheetModalProvider>
<ThemedRoot />
</BottomSheetModalProvider>
</GestureHandlerRootView>
);
}
|