Resize image in carousel

Question

I use 'react-native-snap-carousel' but for the wide images, it cut the image (I see 50%). I have not find the props for rezise them in the doc.

How to resize them to see 100% of the width?

Here is my code:

renderItem({ item, index }, contactId) {
    const {
        viewportWidth,
    } = this.state;
    const sourceURL = buildVisitCardUrl(contactId, item);
    return (
        <View
        style={{ width: viewportWidth }}
        key={index}
        >
        <Image
        style={{ width: '100%', height: this.hp(75) }}
        source={{ uri: sourceURL }}
        />
        </View>
    );
}

render() {
    <Modal
    animationType="slide"
    visible={open}
    onRequestClose={() => openModal(false, 'listCards')}
    >
        <View style={{ display: 'flex', alignItems: 'center' }}>
            <View>
            <Carousel
            layout="default"
            ref={(c) => { this.carousel = c; }}
            data={listVCard}
            renderItem={({ item, index }) => this.renderItem({ item, index }, contactId)}
            sliderWidth={viewportWidth} // Dimensions.get('window').width
            sliderHeight={viewportHeight} // Dimensions.get('window').height
            itemWidth={this.wp(95)} // 95% of viewportWidth
            contentContainerCustomStyle={{ display: 'flex', alignItems: 'center' }}
            vertical={false}
            />
            </View>
        </View>
    </Modal>
}

Answer 1

I felt the same issue when using react-native-snap-carousel & I found the preferred way to solve it using React native Dimensions following Snap carousel Tips and tricks documentation. Using this method you are able set slider with 100% according to device screen sizes.

Step 1

Add React Dimensions to your project

import { Dimensions } from 'react-native';

Step 2

Define viewportWidth as constant

const { width: viewportWidth } = Dimensions.get('window');

Step 3

Add Carousel components properties sliderWidth & itemWidth as defined constant as below

<Carousel
     ref={(c) => { this._carousel = c; }}
     data={listVCard}
     renderItem={({ item, index }) => this.renderItem({ item, index }, contactId)}
     sliderWidth={viewportWidth}
     itemWidth={viewportWidth}
 />