How can i display the following output in react native snap carousel - reactjs

Question

How can i display the following output in react native snap carousel
<Carousel
autoplayInterval={4000}
// slideStyle={{ flex: 1,
// marginRight:10}}
ref={ (c) => { this._carousel = c; } }
data={this.state.featuredBusinessData}
scrollInterpolator={stackScrollInterpolator}
slideInterpolatedStyle={stackAnimatedStyles}
useScrollView={true}
renderItem={this._renderItemFeaturedBusiness.bind(this)}
onSnapToItem={this.handleSnapToItem.bind(this)}
sliderWidth={deviceWidth}
// itemWidth={deviceWidth/2.5 }
itemWidth={deviceWidth/3 }
layout={'default'}
// loopClonesPerSide={this.state.videos.length-1}
firstItem={2}
autoplay={true}
loop={true}
useScrollView={true}
enableMomentum={true}
lockScrollWhileSnapping={false}
/>
as I'm new to RN can please anybody tell me how can i display the following output in react native snap carousel

Answer 1

Output:
#Waheed Akhtar gave you the perfect suggestion, but if you still have some difficulties in implementation here is the full working example:
import * as React from 'react';
import { Text, View, StyleSheet, FlatList, Image } from 'react-native';
import Constants from 'expo-constants';
// You can import from local files
import AssetExample from './components/AssetExample';
// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';
export default function App() {
const videos = [
{
id: 'WpIAc9by5iU',
thumbnail: 'https://source.unsplash.com/random',
title: 'Led Zeppelin - Stairway To Heaven',
},
{
id: 'sNPnbI1arSE',
thumbnail: 'https://img.youtube.com/vi/sNPnbI1arSE/hqdefault.jpg',
title: 'Eminem - My Name Is',
},
{
id: 'VOgFZfRVaww',
thumbnail: 'https://img.youtube.com/vi/VOgFZfRVaww/hqdefault.jpg',
title: 'some title',
},{
id: 'WpIAc9by5iU',
thumbnail: 'https://source.unsplash.com/random',
title: 'Led Zeppelin - Stairway To Heaven',
},
{
id: 'sNPnbI1arSE',
thumbnail: 'https://source.unsplash.com/random',
title: 'Eminem - My Name Is',
},
{
id: 'VOgFZfRVaww',
thumbnail: 'https://img.youtube.com/vi/VOgFZfRVaww/hqdefault.jpg',
title: 'some title',
},
];
return (
<View style={styles.container}>
<FlatList
horizontal
data={videos}
renderItem={({ item }) => (
<View style={styles.card_template}>
<Image
style={styles.card_image}
source={{
uri:
item.thumbnail,
}}
/>
<View style={styles.text_container}>
<Text style={styles.card_title}>{item.title.toUpperCase().substr(0, 10)+"..."}</Text>
<Text style={styles.card_subtitle}>{item.id}</Text>
</View>
</View>
)}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
card_template: {
width: 150,
height: 150,
marginLeft: 10,
marginTop: 20,
boxShadow: '20px 20px 17px -12px rgba(0,0,0,0.75)',
borderRadius: 10,
},
card_image: {
width: 150,
height: 150,
borderRadius: 10,
},
text_container: {
position: 'absolute',
width: 150,
height: 50,
bottom: 0,
paddingVertical: 2,
backgroundColor: 'rgba(255,255,255, 1)',
borderBottomLeftRadius: 10,
borderBottomRightRadius: 10,
},
card_title: {
color: 'black',
fontSize: 14,
marginLeft: 10,
},
card_subtitle:{
color: 'grey',
fontSize: 14,
marginLeft: 10,
}
});
You can play with working code here: Expo Snack

Answer 2

Use Scrollview or Flatlist to render the above ListItems with horizontal={true} props
https://reactnative.dev/docs/scrollview#horizontal