react-native-snap-carousel full screen + passing content - reactjs

Question

I have a two part question. I'm currently using react-native-snap-carousel found here: https://github.com/meliorence/react-native-snap-carousel .
My code looks like this:
carouselItems: [
{
image: require('../assets/images/placeholder-slide.png'),
},
{
image: require('../assets/images/slide2.png'),
},
{
//I want to pass <View> here with content and a button
},
]
_renderItem({ item, index }) {
<View>
<Image source={item.image} />
</View>
}
<SafeAreaView style={styles.body}>
<Carousel
layout={"default"}
ref={ref => this.carousel = ref}
data={this.state.carouselItems}
sliderWidth={phoneWidth}
itemWidth={phoneWidth}
renderItem={this._renderItem}
inactiveSlideOpacity={1}
inactiveSlideScale={1}
slideStyle={{ width: phoneWidth }}
onSnapToItem={index => this.setState({ activeIndex: index })} />
//This is the block I want to pass in the 3rd slide of the carousel
<View>
<Text>Some Text Here</Text>
<button>Button here</button>
</View>
</SafeAreaView>
body: {
flex: 1,
position: 'relative',
},
So the first two items in the carousel are a full-width image, the last slide will contain content and 2 buttons. How do I pass the items in the <View> into the carouselItems?
My second question is how do I make the carousel full screen. Here is a screenshot of my simulator: https://ibb.co/ZNZKRqm
As you can see there is grey area above and below the carousel. I don't believe this is something to do with the carousel, I think maybe by default this is full width? But I have seen applications target this gray space as well.

Answer 1

Part
carouselItems: [
{
image: require('../assets/images/placeholder-slide.png'),
},
{
image: require('../assets/images/slide2.png'),
},
{
content:
<View>
<Text>Some Text Here</Text>
<button>Button here</button>
</View>
},
]
_renderItem({ item, index }) {
//return item.content if exists
return item?.content || <View>
<Image source={item.image} />
</View>
}
<SafeAreaView style={styles.body}>
<Carousel
layout={"default"}
ref={ref => this.carousel = ref}
data={this.state.carouselItems}
sliderWidth={phoneWidth}
itemWidth={phoneWidth}
renderItem={this._renderItem}
inactiveSlideOpacity={1}
inactiveSlideScale={1}
slideStyle={{ width: phoneWidth }}
onSnapToItem={index => this.setState({ activeIndex: index })} />
</SafeAreaView>
Part
The grey space is because of theSafeAreaView. This will only be on the devices with a notch. You can set custom backgroundColor for it with a style prop.