javascript – Why react-native tiptop navigation would not work accurately on IOS platform?

I am at present studying to work with React Native, and I am somewhat caught on the subject of navigation between pages. Particularly, I am at present determining the “High Tab Navigator”. As you’ll be able to see within the picture, I created 3 navigation gadgets “Statistics”, “Achivements” and “Challenges”, and every of them has corresponding parts. In accordance with my thought, when a consumer enters, for instance, the “Statistics” web page, the appliance ought to show the inscription “Statistics Display”. And by the identical logic, all different pages ought to work. However for some cause, the ‘Statistics’ web page shows the contents of the ‘Challanges’ web page, and the opposite two pages usually are not displayed in any respect. And the strangest factor is that that is solely on IOS, which is the place I am at present working. Only for the sake of an experiment, I ran the identical code, with out the slightest adjustments, on Android and the whole lot works accurately there, as I wished. Inform me, what may this be linked with?

[enter image description here](https://i.sstatic.web/DUyRWi4E.png)
[enter image description here](https://i.sstatic.web/EDVHzRXZ.png)
[enter image description here](https://i.sstatic.web/BKQu9Hzu.png)

I’ve tried plenty of issues already. Tried utilizing “SafeAreaView”, tried deleting and reinstalling expo, tried reinstalling dependencies, up to date all packages and applied sciences that I used within the venture, modified the telephone variations within the simulator (ranging from iPhone 15 and ending with iPhone 15 Professional Max), even requested ChatGPT to assist, however nonetheless nothing helps.

Simply in case, right here is my ‘TopTap’ file code:

    import React from "react";
    import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";
    import Statistics from "../screens/Statistics"
    import Achievements from "../screens/Achievements";
    import Challenges from "../screens/Challenges";
    import { StyleSheet } from "react-native";
    import { SafeAreaView } from "react-native-safe-area-context";
       
    const Tab = createMaterialTopTabNavigator();
    
    const TopTap = () => {
      return (
        
          
            
            
            
          
        
      );
    };
    
    const kinds = StyleSheet.create({
      container: {
        flex: 1,
        margin: 10,
      },
    });
    export default TopTap;