Implementei o BottomTabNavigation do React Navigaton em um app e tem duas tabs: home e sobre. O sobre.js possui conteúdo, mas não aparece na tela, pensei que estivesse atras de outro componente mas não está. Vi outros códigos e também está igual o meu, não estou conseguindo ver onde está o erro, poderiam me ajudar?
Esse é o 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>
</>
)
}
Sobre.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
E 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
E esse meu 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"
},