Android NavigationBar White (React Native Expo App) ⇐ Android

[Anonymous]

Я строю нативное приложение React, используя Expo и TypeScript. Я хочу, чтобы навигационная панель навигации Android (стержень внизу с кнопками с задней/домашней) была белой с темными иконами (то есть темный контент ).
Прямо сейчас, навигационная планка с белыми иконами , и я не могу понять, почему. Содержание?.\app.config.js:
const IS_DEV = process.env.APP_VARIANT === 'development';
const IS_IOS = process.env.EXPO_PLATFORM === 'ios';

export default {
"expo": {
"name": IS_DEV ? "Dev - Canyon Hunt" : "Canyon Hunt",
"slug": "canyon-hunt",
"owner": "canyoning-world",
"version": "1.0.1",
"orientation": "portrait",
"icon": IS_IOS ? "./assets/images/icon_iOS.png" : "./assets/images/icon.png",
"scheme": "myapp",
"userInterfaceStyle": "light",
"newArchEnabled": true,
"ios": {
"supportsTablet": true,
"bundleIdentifier": IS_DEV ? "com.canyoning.world.dev" : "com.canyoning.world",
"infoPlist": {
"NSLocationWhenInUseUsageDescription": "Canyon Hunt uses your location to find canyons in your near surrounding and to navigate you to and in the canyon."
}
},
"android": {
"adaptiveIcon": {
"foregroundImage": IS_DEV ? "./assets/images/icon_dev.png" : "./assets/images/icon.png",
"backgroundColor": "#ffffff"
},
"androidNavigationBar": {
"barStyle": "dark-content",
"backgroundColor": "transparent", //"#ffffff",
},
"package": IS_DEV ? "com.canyoningworld.canyonhunt.dev" : "com.canyoningworld.canyonhunt",
},
"web": {
"bundler": "metro",
"output": "static",
"favicon": "./assets/images/favicon.png"
},
"plugins": [
[
"expo-location",
{
"locationAlwaysAndWhenInUsePermission": "Canyon Hunt uses your location to find canyons in your near surrounding and to navigate you to and in the canyon."
}
],
[
"expo-font",
"expo-web-browser"
],
[
"@rnmapbox/maps",
{
"RNMapboxMapsImpl": "mapbox",
"RNMapboxMapsVersion": "11.8.0",
"RNMapboxMapsDownloadToken": "sk.eyJ1Ijoic2FtaXJkdXYiLCJhIjoiY2x3ZHd2OW45MGZjZDJubzlnNmRnam1jZiJ9.KBwWy__451TkOHGPYzrFbQ"
}
],
"expo-router",
[
"expo-splash-screen",
{
"image": "./assets/images/icon_dev.png",
"imageWidth": 300,
"resizeMode": "contain",
"backgroundColor": "#ffffff"
}
]
],
"experiments": {
"typedRoutes": true
},
"extra": {
"router": {
"origin": false
},
"eas": {
"projectId": "ed59ec77-8732-4440-a23d-5a23fc6551ab"
}
}
}
}

< /code>
.\app\_layout.tsx:
import '@/i18n';
import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native';
import { useFonts } from 'expo-font';
import { Stack } from 'expo-router';
import * as SplashScreen from 'expo-splash-screen';
import { StatusBar } from 'react-native';
import { useEffect } from 'react';
import 'react-native-reanimated';
import * as NavigationBar from 'expo-navigation-bar';
import { FavoriteProvider } from '@/providers/FavoritesProvider';
import { FilterProvider } from '@/providers/FilterProvider';
import { OfflineProvider } from '@/providers/OfflineProvider';
import 'expo-dev-client';
import { LogBox, Platform} from "react-native";
import { GestureHandlerRootView } from 'react-native-gesture-handler';

LogBox.ignoreLogs(['Mapbox [error] ViewTagResolver | view:']);
SplashScreen.preventAutoHideAsync();

export default function RootLayout() {
const [loaded] = useFonts({
SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
});

useEffect(() => {
async function prepare() {
if (Platform.OS === 'android') {
await NavigationBar.setBackgroundColorAsync('white');
await NavigationBar.setButtonStyleAsync('dark');
await NavigationBar.setBehaviorAsync('overlay-swipe'); // I also commented this line out but nothing changed
await NavigationBar.setVisibilityAsync("hidden"); // I also commented this line out but nothing changed
}
if (loaded) {
await SplashScreen.hideAsync();
}
}
prepare();
}, [loaded]);

if (!loaded) { return null; }

return (

















);
}
< /code>
.\app\(tabs)\_layout.tsx:
import { useTranslation } from 'react-i18next';
import { Tabs } from 'expo-router';
import React from 'react';
import { Platform } from 'react-native';
import { Entypo, MaterialIcons, Ionicons } from '@expo/vector-icons';
import { HapticTab } from '@/components/HapticTab';
import TabBarBackground from '@/components/ui/TabBarBackground';
import { Colors, Scales, Styles } from '@/constants/Design';

export default function TabLayout() {
const { t } = useTranslation();

return (

}} />
}} />
}} />

);
}


Подробнее здесь: https://stackoverflow.com/questions/796 ... e-expo-app