I am unable to render Tabnavigation content

Question

I implemented React Navigaton’s Bottomtabnavigation in one app and it has two tabs: home and about. About.js has content, but it doesn’t appear on the screen, I thought it was behind another component but it’s not. I saw other codes and it’s the same as mine, I can’t see where the error is, could help me?

This is App.js

import React from 'react'
import { Text, View, Image, ScrollView, TouchableOpacity, Linking } from 'react-native'
import { styles, header, boxes, footer } from './src/styles'
import ModaisFem from './src/components/ModaisFem'
import ModaisMasc from './src/components/ModaisMasc'
import { FontAwesome } from '@expo/vector-icons'
import { NavigationContainer } from '@react-navigation/native'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import Icon from 'react-native-vector-icons/Entypo'

import Home from './src/pages/Home'
import Sobre from './src/pages/Sobre'

const Tab = createBottomTabNavigator()

const imgPrincipal = require('./src/images/xiaolong-wong-pdx1LH_TMJM-unsplash.jpg')
const imgPromo = require('./src/images/eduardo-pastor-sWcDEaemw14-unsplash.jpg')
const imgPromo2 = require('./src/images/tamas-pap-N7lIJLtAegc-unsplash.jpg')
const twitter = 'https://twitter.com/'
const instagram = 'https://www.instagram.com/'
const facebook = 'https://www.facebook.com/'
const pin = 'https://br.pinterest.com/'

Icon.loadFont()

export default function App () {
  return (
    <>
      <ScrollView>

        <NavigationContainer>
          <Tab.Navigator>
            <Tab.Screen name="Home" component={Home} />
            <Tab.Screen name="Sobre" component={Sobre} />
          </Tab.Navigator>
        </NavigationContainer>

        <View style={styles.container}>

          <TouchableOpacity>
            <Text style={styles.carrinho}>
              <Icon name="shopping-cart" size={15} color="#FFF" />  Carrinho</Text>
          </TouchableOpacity>

          <View style={header.container}><Text style={header.text}>Bazzaar</Text></View>
          <Image style={styles.principal} source={imgPrincipal} />
          <Text style={styles.secoes}>Moda Feminina</Text>
          <ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
            <ModaisFem></ModaisFem>
          </ScrollView>

          <Text style={styles.secoes}>Moda Masculina</Text>
          <ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
            <ModaisMasc></ModaisMasc>
          </ScrollView>

          <View style={boxes.box}>
            <TouchableOpacity>
              <View style={boxes.boxImage}>
                <Image style={styles.imgPromo} source={imgPromo} />
              </View>
              <View><Text style={boxes.boxText}>Jeans de todos os estilos em promoção, aproveite!</Text></View>
            </TouchableOpacity>
            <TouchableOpacity>
              <View style={boxes.boxImage}>
                <Image style={styles.imgPromo} source={imgPromo2} />
              </View>
              <View><Text style={boxes.boxText}>Monte aqui seu look perfeito para qualquer evento!</Text></View>
            </TouchableOpacity>

          </View>

          <View style={footer.box}>
            <View style={footer.social}>
              <TouchableOpacity
                onPress={() => Linking.openURL(twitter)}>
                <Icon name="twitter-with-circle" size={50} color="#121212" />
              </TouchableOpacity>
              <TouchableOpacity
                onPress={() => Linking.openURL(instagram)}>
                <Icon name="instagram-with-circle" size={50} color="#121212" />
              </TouchableOpacity>
              <TouchableOpacity
                onPress={() => Linking.openURL(facebook)}>
                <Icon name="facebook-with-circle" size={50} color="#121212" />
              </TouchableOpacity>
              <TouchableOpacity
                onPress={() => Linking.openURL(pin)}>
                <Icon name="pinterest-with-circle" size={50} color="#121212" />
              </TouchableOpacity>
            </View>
            <View style={footer.payment}>
              <FontAwesome name="cc-visa" size={48} color="black" />
              <FontAwesome name="cc-mastercard" size={48} color="black" />
              <FontAwesome name="cc-amex" size={48} color="black" />
              <FontAwesome name="cc-paypal" size={48} color="black" />
            </View>
          </View>

        </View>
      </ScrollView>
    </>
  )
}

About.js

import React from 'react'
import { View, Text } from 'react-native'

function Sobre () {
  return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: '#000' }}>
              <Text>Sobre</Text>
          </View>
  )
}

export default Sobre

And home.js

import React from 'react'
import { View, Text } from 'react-native'

function Home () {
  return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: '#000' }}>
            <Text>Home</Text>
        </View>
  )
}

export default Home

And this my package.json

 },
  "dependencies": {
    "@react-native-community/masked-view": "0.1.10",
    "@react-navigation/bottom-tabs": "^6.0.5",
    "@react-navigation/drawer": "^6.1.3",
    "@react-navigation/native": "^6.0.2",
    "expo": "~42.0.1",
    "expo-status-bar": "~1.0.4",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz",
    "react-native-gesture-handler": "~1.10.2",
    "react-native-reanimated": "~2.2.0",
    "react-native-safe-area-context": "3.2.0",
    "react-native-screens": "~3.4.0",
    "react-native-vector-icons": "^8.1.0",
    "react-native-web": "~0.13.12"
  },