Adding a images behind header react-native - react-native

Question

I want to add multiple images behind header with a swiper. I tried implementing this using Native-base and react-native-swiper. However, what was resulted is, as following.
Following is my code
<View style={{flex:1, elevation:2}}>
<Swiper style={StyleSheet.flatten( {backgroundColor: '#fff'})}>
<ImageBackground
source={require('../../img/auth_background.png')}
style={this.styles.backgroundStyle}
imageStyle={this.styles.backgroundImage}
>
<Header style={{
marginTop: StatusBar.currentHeight,
backgroundColor: 'transparent',
justifyContent: 'center',
alignItems: 'center',
}}>
<StatusBar
backgroundColor={Colors.statusBar}
barStyle="light-content"
/>
<Left>
<Button transparent onPress={this.handleBackButtonClick} small={true}>
<Icon name='ios-arrow-back' size={30} color={Colors.textWhite}/>
</Button>
</Left>
<Body/>
<Right/>
</Header>
</ImageBackground>
<ImageBackground
source={require('../../img/auth_background.png')}
style={this.styles.backgroundStyle}
imageStyle={this.styles.backgroundImage}
>
<Header style={{
marginTop: StatusBar.currentHeight,
backgroundColor: 'transparent',
justifyContent: 'center',
alignItems: 'center',
borderBottomWidth: 0, shadowOffset: {height: 0, width: 0},
shadowOpacity: 0, elevation: 0
}}>
<StatusBar
backgroundColor={Colors.statusBar}
barStyle="light-content"
/>
<Left>
<Button transparent onPress={this.handleBackButtonClick} small={true}>
<Icon name='ios-arrow-back' size={30} color={Colors.textWhite}/>
</Button>
</Left>
<Body/>
<Right/>
</Header>
</ImageBackground>
</Swiper>
</View>
I want to fix the header so that it won't also swipe with the images. Can anyone help me with this? Thanks in-advance.

Answer 1

React-Native-Swiper in android will display blank content when swiper height and width aren't shown.
please add fixed height and width to view or to the swiper

Answer 2

Keep your Header outside Swiper and make its position absolute
<Header style={{
marginTop: StatusBar.currentHeight,
backgroundColor: 'transparent',
justifyContent: 'center',
alignItems: 'center',
position:'absolute',
top:0,
left:0
}}>

Answer 3

I found the solution using zIndex and position. I guess there is some issue when using native-base header and container with zIndex.
<View style={{flex: 1}}>
<View style={{flex:1, zIndex: 2, position: 'absolute', marginTop: StatusBar.currentHeight, marginLeft:'2%'}}>
<Button iconLeft transparent>
<Icon name='ios-arrow-back' size={30} color={Colors.textWhite}/>
</Button>
</View>
<View style={{width: '100%', height: '50%', zIndex: 1, position: 'absolute'}}>
<Swiper style={StyleSheet.flatten( {backgroundColor: '#fff',zIndex:1, flex:1})}>
<ImageBackground
source={require('../../img/auth_background.png')}
style={this.styles.backgroundStyle}
imageStyle={this.styles.backgroundImage}
>
</ImageBackground>
<ImageBackground
source={require('../../img/auth_background.png')}
style={this.styles.backgroundStyle}
imageStyle={this.styles.backgroundImage}
>
</ImageBackground>
</Swiper>
</View>