enter image description here enter image description here
Hello developers, I'm coding an application using react native, and the profile screen must contain a small design on top of a Tab Navbar, (as showing in the picture).
The problem is that the TopTabNavbar is not rendering its route components when I try to wrap the wode within a ScrollView (First image with the full display of the design on top of the TabView), but when I remove ScrollView and use SafeAreaView or SafeAreaProvider, or even View with flex:1 style, it renders its components perfectly well. I don't know what the problem is, so I'll show you the code.
import {View, Text, StyleSheet, Image, Dimensions, TouchableOpacity, useWindowDimensions, FlatList} from 'react-native'
import React, { useState } from 'react'
import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context'
import { COLORS, FONTS, SIZES } from '../../constants/theme'
import { StatusBar } from 'expo-status-bar'
import Constants from 'expo-constants'
import MainHeader from '../../components/MainHeader'
import { Ionicons } from '@expo/vector-icons'
import Header from '../../components/Header'
import images from '../../constants/images'
import { imagesDataURL } from '../../constants/data'
import * as ImagePicker from "expo-image-picker"
// import {user} from '../search/user'
import UserTabs from '../../navigation/UserTabs';
import { SceneMap, TabBar, TabView } from "react-native-tab-view";
import EventHistory from './EventHistory'
import PersonalInfo from './PersonalInfo'
import { ScrollView } from 'react-native'
const cover =require('../../assets/images/splash.png')
const user=[{
fullname:"Rayan Henkins",
title:"Event Organizer",
location:"Paris, France",
eventsAchieved:10,
src: require('../../assets/images/gordon.jpg')}]
const height= Dimensions.get('window').height
const marginTop= Constants.statusBarHeight
const renderScene = ({ route }) => {
switch (route.key) {
case 'first':
return <EventHistory />;
case 'second':
return <PersonalInfo />;
default:
return null;
}
};
export default function UserDesign(){
const [selectedImage, setSelectedImage]=useState(null)
const handleImageSelection = async () =>{
let result = await ImagePicker.launchImageLibraryAsync({
mediaTypes:ImagePicker.MediaTypeOptions.All,
allowsEditing:true,
aspect:[4,4],
quality:1
}); console.log(result);
if(!result.canceled){
setSelectedImage(result.assets[0].uri)
}
}
const layout = useWindowDimensions();
const [index, setIndex] = useState(0);
const [routes] = useState([
{ key: "first", title: "Agenda" },
{ key: "second", title: "Personal Info" },
]);
const renderTabBar = (props) => (
<TabBar
{...props}
indicatorStyle={{
height: 5,
borderRadius: 5,
backgroundColor: COLORS.green,
}}
style={{
backgroundColor: COLORS.white,
height: 44,
}}
renderLabel={({ focused, route }) => (
<Text style={[{ color: focused ? COLORS.black : COLORS.gray,textTransform:'capitalize',fontWeight:'bold' }]}>
{route.title}
</Text>
)}
/>
);
console.log('index:', index);
console.log('routes:', routes);
return(
<View style={styles.container}>
<MainHeader title="Hadarli" />
<Header />
<StatusBar backgroundColor={COLORS.lightWhite} />
<SafeAreaProvider style={{flex:1}}>
<View style={styles.mediaContainer}>
<View style={styles.imageContainer}>
<Image
source={images.cover}
resizeMode='cover'
style={styles.imageStyle}
/>
</View>
</View>
<View style={styles.profilePicBorderContainer}>
<TouchableOpacity
onPress={handleImageSelection}
>
<Image
source={{uri:selectedImage}}
resizeMode='contain'
style={styles.profileImage}
/>
<View style={styles.iconImage}>
<Ionicons
name="camera-outline"
size={32}
color={COLORS.green}
/>
</View>
</TouchableOpacity>
<Text
style={styles.nameStyle}
>{user[0].fullname}</Text>
<Text
style={styles.titleStyle}
>{user[0].title}</Text>
<View style={styles.locationStyle}>
<Ionicons
name={"location-outline"} size={24} color={COLORS.green}
/>
<Text style={styles.locationTextStyle}>{user[0].location}</Text>
</View>
<View style={styles.activityCardContainer}>
<View style={styles.activityCard}>
<Text style={styles.activityCardNumber}>{user[0].eventsAchieved}</Text>
<Text style={styles.activityCardText}>Events</Text>
</View>
</View>
<View style={styles.buttonContainer}>
<TouchableOpacity style={styles.buttonPress}>
<Text style={styles.buttonText}>
Contact
</Text>
</TouchableOpacity>
</View>
</View>
<View style={{ flex: 1, marginHorizontal: 22, marginTop: 20 }}>
<TabView
navigationState={{ index, routes }}
renderScene={renderScene}
onIndexChange={setIndex}
initialLayout={{ width: layout.width }}
renderTabBar={renderTabBar}
/>
</View>
</SafeAreaProvider>
</View>
)
}
const styles= StyleSheet.create({
// Background Image Style
container:{
flex:1,
backgroundColor: COLORS.lightWhite,
},
mediaContainer:{
height:(height-marginTop) /1.9,
},
imageContainer:{
width:"100%",
height:"100%"
},
imageStyle:{
height:"100%",
width:"100%",
borderRadius:20
},
// Profile Style
profilePicBorderContainer:{
flex:1,
alignItems:'center'
},
profileImage:{
height:155,
width:155,
borderRadius:999,
borderColor:COLORS.green,
borderWidth:2,
marginTop:-90
},
iconImage:{
position:"absolute",
bottom:0,
right:10,
zIndex:9999
},
nameStyle:{
...FONTS.h3,
color:COLORS.green,
marginVertical:8,
},
titleStyle:{
color:COLORS.black,
...FONTS.body4
},
locationStyle:{
flexDirection:"row",
marginVertical:6,
alignItems:"center"
},
locationTextStyle:{
...FONTS.body4,
marginLeft:4
},
// Card Styles
activityCardContainer:{
paddingVertical:8,
flexDirection:"row"
},
activityCard:{
flexDirection:"column",
alignItems:"center",
marginHorizontal:SIZES.padding
},
activityCardNumber:{
...FONTS.h2,
color:COLORS.green
},
activityCardText:{
...FONTS.body4,
color:COLORS.green
},
// Button Style
buttonContainer:{
flexDirection:"row"
},
buttonPress:{
width:124,
height:36,
alignItems:"center",
justifyContent:"center",
backgroundColor:COLORS.green,
borderRadius:10,
marginHorizontal:SIZES.padding*2,
},
buttonText:{
...FONTS.body4,
color:COLORS.lightWhite
},
// Tab Nav Style
tabNav:{
flex:1,
marginHorizontal:22,
marginTop:20
},
scene: {
flex: 1,
},
contentContainer: {
flexGrow: 1,
},
})