react-nativenative-basereact-native-swiper

Adding a images behind header react-native


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.

enter image description here

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.


Solution

  • 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>