I'm using the react-native-swiper, but I didn't find any solution for my problem in the docs. Currently it's show me one picture at once. But I want one and half, and always slide one by one. Is it possible somehow, because the slides have a strict width.

A design what I would achive:

There is my current code:

class Featured extends Component {
    /**
     * Render the featured box
     */
    renderFeatured() {
        return this.props.featured.data.items.map(object => (
                <View style={styles.slide} key={object.id}>
                    <FeaturedBox
                        id={object.id}
                        image={Helpers.getPrimaryImage(object.images)}
                        text={object.name}
                    />
                </View>
            )
        );
    }

    render() {
        if (Helpers.isObjectEmpty(this.props.featured)) {
            return (
                <View />
            );
        }
        return (
            <View>
                <Swiper
                    style={styles.wrapper}
                    height={150}
                    horizontal={false}
                    showsPagination={false}
                >
                    {this.renderFeatured()}
                </Swiper>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    wrapper: {
    },
    slide: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    }
});

Basically the FeaturedBox is just an image.

I'm using the react-native-swiper, but I didn't find any solution for my problem in the docs. Currently it's show me one picture at once. But I want one and half, and always slide one by one. Is it possible somehow, because the slides have a strict width.

A design what I would achive:

There is my current code:

class Featured extends Component {
    /**
     * Render the featured box
     */
    renderFeatured() {
        return this.props.featured.data.items.map(object => (
                <View style={styles.slide} key={object.id}>
                    <FeaturedBox
                        id={object.id}
                        image={Helpers.getPrimaryImage(object.images)}
                        text={object.name}
                    />
                </View>
            )
        );
    }

    render() {
        if (Helpers.isObjectEmpty(this.props.featured)) {
            return (
                <View />
            );
        }
        return (
            <View>
                <Swiper
                    style={styles.wrapper}
                    height={150}
                    horizontal={false}
                    showsPagination={false}
                >
                    {this.renderFeatured()}
                </Swiper>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    wrapper: {
    },
    slide: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    }
});

Basically the FeaturedBox is just an image.

• javascript
• react-native
• swiper.js

4 Answers 4

I found the solution, and change the Swiper to Carousel.

I had the same problem with you.

I tried many times, eventually solved this problem and I created npm package for these use cases.

First of all, You can solve this error by adding specific width in the images via your device.

If your use cases is adding multiple images, then you can solve that easily by using method below.

Hope react-native-image-swiper helps you.

usage

import {Dimensions} from 'react-native';
import ImagesSwiper from "react-native-image-swiper";
const { width, height } = Dimensions.get("window");

<ImagesSwiper width={width} height={height-400} />

I suggest you to use react-native-snap-carousel follow below link for more details https://www.npmjs./package/react-native-snap-carousel

You can do this via following code;

<Swiper removeClippedSubviews={false}>

<View style={{width: screenWidth - 100}}></View>

<View style={{marginLeft: - 100}}> </View>

</Swiper>