alguém já conseguiu resolver?

ainda estou com problema, mesmo após tentar as duas soluções,

segue abaixo meu package.json

{
  "name": "SentinelCLI",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest"
  },
  "dependencies": {
    "@react-native-community/masked-view": "^0.1.11",
    "@react-native-vector-icons/common": "^11.0.0",
    "@react-native-vector-icons/fontawesome6": "^6.7.1",
    "@react-native-vector-icons/material-icons": "^0.0.1",
    "@react-navigation/bottom-tabs": "^7.2.0",
    "@react-navigation/elements": "^2.2.5",
    "@react-navigation/native": "^7.0.0",
    "@react-navigation/native-stack": "^6.11.0",
    "react": "18.3.1",
    "react-native": "^0.76.5",
    "react-native-gesture-handler": "^2.21.2",
    "react-native-reanimated": "^3.16.6",
    "react-native-safe-area-context": "^5.1.0",
    "react-native-screens": "^4.4.0"
  },
  "devDependencies": {
    "@babel/core": "^7.25.2",
    "@babel/preset-env": "^7.25.3",
    "@babel/runtime": "^7.25.0",
    "@eslint/js": "^9.17.0",
    "@react-native-community/cli": "15.0.1",
    "@react-native-community/cli-platform-android": "15.0.1",
    "@react-native-community/cli-platform-ios": "15.0.1",
    "@react-native/babel-preset": "0.76.5",
    "@react-native/eslint-config": "0.76.5",
    "@react-native/metro-config": "0.76.5",
    "@react-native/typescript-config": "0.76.5",
    "@types/react": "^18.2.6",
    "@types/react-test-renderer": "^18.0.0",
    "babel-eslint": "^10.1.0",
    "babel-jest": "^29.6.3",
    "eslint": "^9.17.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-prettier": "^5.2.1",
    "eslint-plugin-react": "^7.37.3",
    "jest": "^29.6.3",
    "prettier": "^3.4.2",
    "react-test-renderer": "18.3.1",
    "reactotron-react-native": "^5.1.12",
    "typescript": "5.0.4",
    "typescript-eslint": "^8.19.1"
  },
  "engines": {
    "node": ">=18"
  }
}

como também meu index.tsx

import './config/ReactotronConfig';
import React from 'react';
import {
  StatusBar,
  useColorScheme,
  StyleSheet,
} from 'react-native';
import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';

import Routes from './routes';

function App() {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? '#121212' : '#7159c1', // Substituindo cores
    flex: 1, // Garante que o layout ocupe toda a tela
  };

  return (
    <SafeAreaProvider>
      <SafeAreaView style={backgroundStyle}>
        <StatusBar
          barStyle={isDarkMode ? 'light-content' : 'dark-content'}
          backgroundColor={backgroundStyle.backgroundColor}
        />
        <Routes />
      </SafeAreaView>
    </SafeAreaProvider>
  );
}

export default App;

imagem na tela

no Android ele funciona normal.

por favor alguém pode me ajudar?