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

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

Use Scrollview or Flatlist to render the above ListItems with horizontal={true} props

https://reactnative.dev/docs/scrollview#horizontal

Answer 2

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