Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

React-native-swiper overlaying images from sides, Looks dirty

See original GitHub issue

I am using react-native-swiper library in react-native-snap-carousel, but native-swiper showing me overlaying image from side, and looks so bad, i have tried, but unable to do.

see screenshot:

Capture3

Here is the code:

SliderEntry.js

render() {

        return (
            <View style={styles.slideInnerContainer} >
                <View>
                        <Swiper
                            width={300}
                            showsButtons
                        >
                            <View>
                                <Image
                                  source={{ uri: 
                                  'http://primecourierservices.co.uk/wp- 
                                   content/uploads/2018/11/van-courier- 
                                   service-london-uk.jpg' }}
                                   style={{width: 330, height: 250
                                  }}
                                />
                            </View>
                            <View>
                                <Image
                                  source={{ uri: 
                                  'http://primecourierservices.co.uk/wp- 
                                   content/uploads/2018/11/van-courier- 
                                   service-london-uk.jpg' }}
                                   style={{width: 330, height: 250
                                  }}
                                />
                            </View>
                            <View>
                                <Image
                                  source={{ uri: 
                                  'http://primecourierservices.co.uk/wp- 
                                   content/uploads/2018/11/van-courier- 
                                   service-london-uk.jpg' }}
                                   style={{width: 330, height: 250
                                  }}
                                />
                            </View>
                        </Swiper>
                </View>
                <View>
                    <Text style={{marginBottom: 10}}>{uppercaseTitle}</Text>
                    <View style={{marginLeft: 19, marginTop: 5, marginBottom: 6}}>
                        <Text>
                            {van}
                        </Text>
                    </View>
                </View>
            </View>
        );
    }

Can anyone help me with this? Please

Issue Analytics

State:
Created 4 years ago
Comments:7 (2 by maintainers)

Top GitHub Comments

1reaction

austinaugustincommented, Apr 5, 2019

it seems your swiper width is less than the image width. 300 and 330.

1reaction

zainshabir00commented, Apr 2, 2019

but why?

@zainshabir00 nobody can solve your problem

Top Results From Across the Web

React-Native-Swiper images Overflow ONLY ON ANDROID

I have a problem with react-native-swiper on Android ONLY. The same code works for iOS! Below is an image of what is happening:....

How to create a “Before & After” image slider with CSS and JS

A quick (but dirty) way to do it is to add another element, completely not related to the slider, but is positioned to...

Create advanced animations with smart animate

Smart animate looks for matching layers, recognizes differences, and animates layers ... This can cause layers to overlap, making the transition look messy....

swiper get index - You.com | The AI Search Engine You Control

Open side panel ... Looks like onSlideChangeStart: photosChange method isn't working. ... how to get list index using react-native-swiper-flatlist?

前端客栈/awesome-react-native - Gitee

react -native-snap-carousel ☆3959 - Swiper component for React Native with previews, multiple layouts, parallax images, performant handling of huge numbers ...