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

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.

Start with the component hierarchy and styles shown in the linked gist, then reproduce the Swiper inside the flex-based container with the navigation and bottom bars. Trace how its dimensions are determined when no fixed height is provided; done means the Swiper fits its container while preserving the flexible layout.