Swiper as ListHeaderComponent in FlatList not rendering any image or text

I am trying to pass swiper as the header for a FlatList. My code work when i remove "" and "". But i want to have swiper imcluded so that i can also swipe between images and make this swiper scroll up when the flatList is scrolled up

  <View>
            <FlatList
                   data = {this.state.mainImages}
                   renderItem = {({item}) => <View><Text>{item.image_slot_id}</Text></View>}
                   KeyExtractor={item => item.imgid}
                   ListHeaderComponent = {() => <RenderImages ImageDetails = {this.state.mainImages}/>}
             />
  </View>

class RenderImages extends React.Component {
constructor(props){
	super(props)
}

renderImagesSwipper() {
	return(
		this.props.ImageDetails.map(function(imgs){
			return(
				<View>
					<Image
						style={{height: 100}}
      					source={{uri: imgs.imgs_url}}
      				/>
				</View>
			)
		})
	)
}

render(){
	return(
	<View style={{height:200, width:400}}>
			<Swiper loop={false} index={0}>
				{this.renderImagesSwipper()}
			</Swiper>
	</View>
	)
}
}

export default RenderImages;

Start by reproducing the example using FlatList's ListHeaderComponent, RenderImages, and the Swiper wrapper shown in the issue. Check whether the header renders its mapped Image and Text children, then verify the intended behavior: the images can be swiped and the header moves with the FlatList. No test or source file is named in the report.