Image Slider implemented using Carousel is not working - react-native

Question

I am working on an App which can display a simple Image Slider using Carousel.
I have used the Carousel from "react-native-banner-carousel" library.
Code:
ImageSlider.js
import React from 'react';
import Carousel from 'react-native-banner-carousel';
import { StyleSheet, Image, View, Dimensions } from 'react-native';
const BannerWidth = Dimensions.get('window').width;
const BannerHeight = 260;
const images = [
"https://images-na.ssl-images-amazon.com/images/I/61McsadO1OL.jpg",
"https://images-na.ssl-images-amazon.com/images/I/51vlGuX7%2BFL.jpg",
"https://images-na.ssl-images-amazon.com/images/I/717DWgRftmL._SX522_.jpg"
];
export default class ImageSlider extends React.Component {
renderPage(image, index) {
return (
<View key={index}>
<Image style={{ width: 500, height: BannerHeight }} source={{ uri: image }} />
</View>
);
}
render() {
return (
<View style={styles.container}>
<Carousel
autoplay
autoplayTimeout={5000}
loop
index={0}
pageSize={BannerWidth}
>
{images.map((image, index) => this.renderPage(image, index))}
</Carousel>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
justifyContent: 'center'
},
});
App.js
import React, { Component } from 'react';
import { View, Text } from 'react-native';
import Header from './components/Header';
import ImageSlider from './components/ImageSlider';
class App extends Component {
render () {
return (
<View>
<Header headerText = "SAMPLE APP" />
<ImageSlider />
</View>
);
}
}
export default App;
I am importing ImageSlider inside the App.js
I am trying the method mentioned in this link: https://github.com/f111fei/react-native-banner-carousel
But the output I am getting is somewhat like this:
Where am I going wrong here?

Answer 1

class App extends Component {
render () {
return (
<View style={{flex:1}}>
<Header headerText = "SAMPLE APP" />
<ImageSlider />
</View>
);
}
}
Notice this in the above code
<View style={{flex:1}}>
Hope this will help.!