Сделать ScrollView - элементы используют процентный размер всего экрана

У моих текущих элементов scrollview есть проблема, заключающаяся в том, что мне нужно установить для них фиксированную высоту и ширину, чтобы они правильно отображались на разных устройствах.

Каждый элемент scrollview должен занимать 1/6 высоты экрана, чтобы соответствовать разным размерам экрана ... но как этого добиться, не делая прокрутку прокручиваемой?

Моя текущая попытка ...

 <ScrollView style={{backgroundColor: 'blue'}} contentContainerStyle={{flexGrow: 1}}>

    { /* Renders the header */}
    <Header text={Constants.header} screen="Drills&Games"/>

     <BoxView></BoxView>
     <BoxView></BoxView>
     <BoxView></BoxView>
     <BoxView></BoxView>
     <BoxView></BoxView>

  </ScrollView>



export default class BoxView extends Component{

    render(){

        return(

            <View style={{backgroundColor: 'red', flex: 0.25}}>

            </View>
        );
    }
}

Визуализирует scrollview с 5 BoxView-Items ... Проблема в том, что ... прямоугольные представления масштабируются правильно, каждый из них использует гибкость 0,25, но список больше не прокручивается.

Итак, как нам передать процентную / гибкую высоту элементам, сохранив прокручиваемую прокрутку?