React-native-swiper: Wrong size (width and height) when embedded in other components

[itinance]

When is embedded into a component hierarchy, it will not fit in into the dimensions of the container. Both width and height are completely wrong and much to big.

Imagine the following screen:

- top bar 
- container (flex: 4)
  + swiper embedded in container (flex: 4)
  + bottom bar of container (flex: 1)
- bottom bar (flex: 1)

This looks like this and you can see, that the swiper gots dimensions far away from the size of the container component.

I provided the whole code in a gist:
https://gist.github.com/itinance/7d9c14f01bd0dd34008607f25c4391a7

When i set a specific height-attribute, everything works fine:

But to set a specific height destroys the flexibility of the whole flex based layout system.

Did i something wrong here?

This is the structure:

        return (
            <View style={{ flex: 1 }}>
                <NavigationBar
                  style={ styles.navBar }
                  title={titleConfig}
                  rightButton={rightButtonConfig}
                  leftButton={leftButtonConfig}>
                  </NavigationBar>

                <View style={styles.container}>
                    <View style={styles.topBox}>

                    </View>
                    <View style={styles.storyContainer}>

                        <View style={styles.storyImageContainer}>
                            <Swiper showsButtons={true} showsPagination={true} styles={styles.slider}>
                                <Image
                                    style={styles.sliderImage}
                                    source={{uri: 'https://upload.wikimedia.org/wikipedia/commons/f/fc/HGM_Raketengesch%C3%BCtz_1865.jpg'}}
                                  />
                            </Swiper>
                        </View>

                        <View style={styles.storyBox}>
                        </View>

                    </View>
                </View>
            </View>
        );

The styles you will find at the bottom of my gist.

[itinance]

I've found a possible work around on application side:

I use state to manage the height of the swiper and change this height on the onLayout-Event of the parent container:

                    <View style={styles.storyImageContainer} onLayout={ (e) => {
                        var {x, y, width, height} = e.nativeEvent.layout;
                        this.setState({
                            swiperHeight: height
                        })
                    } }>
                        <Swiper showsButtons={true} showsPagination={true} styles={styles.slider} height={this.state.swiperHeight} >
                                                                  { slides... ..... }
                        </Swiper>
                    </View>

[rafaelcorreiapoli]

I'm also facing this issue, the swiper is occupying the whole screen even when it's inside a View that occupies half of it

[khovansky-al]

Alright, I've been coding for too many hours in past days so please excuse me if my workaround is awful.
After inspecting the source code I found out that if no width/height provided - they're set equals to window dimensions using Dimensions.get('window'). In my case I needed the Swiper to fill the container that had 10px padding at the sides horizontally. So basically what I did was I fetched the window width using Dimensions and subtracted the required padding multiplied by 2.
End result:

componentWillMount() {
    let windowWidth = Dimensions.get('window').width
    this.setState({windowWidth: windowWidth - 20})
}

<Swiper width={this.state.windowWidth}>
  ...
</Swiper>

[edencakir]

@khovansky-al I liked and applied your solution to my height issue. Cheers.

[jorfermo]

I agree that the component should respect the parent dimensions. It would be much easier to use

[jorfermo]

@itinance I used your workaround and it's working almost perfect.

The problem is after setting the height dynamically on the swiper the views inside the slides that have with the prop adjustsFontSizeToFit on, are not redimensioning according to the new slide side.

Any idea on how to fix that?

[itinance]

@jorfermo sorry, we've gave up here and switched in the end with all projects to https://github.com/zbtang/React-Native-ViewPager, where everything works fine from scratch.

[jorfermo]

Thanks! I'll give it a try

[GuillaumeMunsch]

@itinance Thanks a lot man 👍

[aliberski]

setting height="100%" prop worked for me