An example that react-native-swiper will ignore proper width and height when embedded in 'flexed' containers

TestScreen.js

import React, { Component } from 'react';
import {
	View, Text, TextInput, Image, 	ActivityIndicatorIOS,
	StyleSheet
} from "react-native";

import Button from "react-native-button";
import NavigationBar from 'react-native-navbar';
import Icon from 'react-native-vector-icons/FontAwesome';
var Swiper = require('react-native-swiper')


export default class TestScreen extends Component {

	constructor(props) {
	    super(props);
	  }

	render() {

		const { state, actions } = this.props;

		const rightButtonConfig = {}
    	const leftButtonConfig = {
  		    title: '<',
  		    handler: () => alert('hello!'),
  		  };

 	  	const titleConfig = {
		    title: 'Test',
			color: 'white',
			tintColor: 'white'
		};


		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>
		);

	}

}

const Dimensions = require('Dimensions');
const windowSize = Dimensions.get('window');

const sizeOfCharacter = 80;
const heightOfCharacterBar = sizeOfCharacter * 1.2;

var styles = {
    container: {
        flex: 1,
        flexDirection: 'column',
        backgroundColor: 'white',
    },

	searchBarContainer: {
		backgroundColor: 'rgba(69,133,170,0.6)',
		paddingTop: 12,
		paddingLeft: 12,
		paddingRight: 12,
	},

	searchBar: {
		height: 45,
		width: windowSize.width - 24,
	},

	topBox: {
		flex: 1,
		flexDirection: 'row',
//		backgroundColor: 'yellow',
		height: heightOfCharacterBar,
		paddingLeft: 50,
		justifyContent: 'center',
		alignItems: 'center',
	},

    characterContainer: {
        width: sizeOfCharacter * 1.2,
        height: sizeOfCharacter * 1.2,
		justifyContent: 'center',
		alignItems: 'center',
		//backgroundColor: 'green'
    },

	circle: {
	    width: sizeOfCharacter,
	    height: sizeOfCharacter,
	    borderRadius: sizeOfCharacter,
		backgroundColor: '#5eafe8',
		justifyContent: 'center',
		alignItems: 'center',
	},

	character: {
		fontSize: 50,
		textAlign:'center',
		color: 'white',
		backgroundColor: 'transparent',
		marginTop: 25

    },
    rightContainer: {
        flex: 1,
		marginTop: 0,
		justifyContent: 'center',
		marginLeft: 40
    },

	meaning: {
		color: '#5bbeb6',
		fontSize: 18,
	},

	storyContainer: {
		flex: 4,
		backgroundColor: 'lightblue',
		justifyContent: 'space-between',
		borderColor: 'red',
		borderWidth: 2
	},

	storyImageContainer: {
		flex: 4
	},

	slider: {
		width: 100, height: 100,

	},

	storyBox: {
		height: 60,
		flex: 1,
		backgroundColor: '#d9d6cd'
	},

  	sliderImage: {
		flex: 1,
    	backgroundColor: '#97CAE5',
  	},
    loading: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center'
    },

	navBar: {
		backgroundColor: '#0e415e',
	},

};