Wrong size (width and height) when embedded in other components

When <Swiper> 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>

[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.