How to make sure elements don't overlay in react native? - react-native

Question

Right now I have a react-native-elements-header with a react-native-snap-carousel wrapped in a simple container as below:
render() {
return (
<View style={styles.container}>
<Header
outerContainerStyles={styles.header}
leftComponent={
<Text style={styles.heading}>{this.state.title}</Text>
}
rightComponent={
<Icon
name='account-circle'
color={COLOR_LIGHT_SECONDARY}
onPress={() => this.props.navigation.navigate('Settings')} />
}
/>
{this.cardCarousel}
</View>
);
}
}
const styles = StyleSheet.create({
icon: {
width: 26,
height: 26,
},
container: {
flex: 1,
backgroundColor: "white",
},
containerCentered: {
justifyContent: 'center',
alignItems: 'center',
},
header: {
//flex: 2,
height: '15%',
},
heading: {
fontSize: TITLE,
fontWeight: 'bold',
color: THEME_COLOR,
},
card: {
backgroundColor: THEME_COLOR
}
});
and this.cardCarousel returns a carousel with pagination:
get cardCarousel() {
const { activeSlide, entries } = this.state;
var phoneWidth = Dimensions.get('window').width;
return (
<View style={styles.containerCentered}>
<Carousel
ref={(c) => { this._carousel = c; }}
data={entries}
renderItem={this._renderItem}
sliderWidth={phoneWidth}
itemWidth={phoneWidth*0.85}
/>
<Pagination
dotsLength={this.state.entries.length}
activeDotIndex={activeSlide}
containerStyle={{}}
dotStyle={{
width: 8,
height: 8,
borderRadius: 4,
marginHorizontal: 0,
backgroundColor: THEME_COLOR
}}
inactiveDotStyle={{
// Define styles for inactive dots here
}}
inactiveDotOpacity={1}
inactiveDotScale={0.6}
/>
</View>
);
}
However cardCarousel is overlayed on top of the header. I have tried many props for container and containerCentered but the cardCarousel is always overlaying header and is aligned from the top. What am I doing wrong here? I have also attached a screenshot below:

Answer 1

react-native-elements-header is absolute positioned element, because of header being absolutely positioned carousel is rendered on top of header.
check this once
https://github.com/react-native-training/react-native-elements/blob/8d4f85890bc37da64fa9712b166a92dd13b2e0a3/src/header/Header.js
<Header
outerContainerStyles={styles.header}
leftComponent={
<Text style={styles.heading}>{this.state.title}</Text>
}
rightComponent={
<Icon
name='account-circle'
color={COLOR_LIGHT_SECONDARY}
onPress={() => this.props.navigation.navigate('Settings')} />
}
/>
so give position relative for header outerContainerStyles.
<Header
outerContainerStyles={{position: "relative", height: "15%"}}
leftComponent={
<Text style={styles.heading}>{this.state.title}</Text>
}
rightComponent={
<Icon
name='account-circle'
color={COLOR_LIGHT_SECONDARY}
onPress={() => this.props.navigation.navigate('Settings')} />
}
/>