How do I apply the react-native-swiper in a View tag?

Which OS ?

Win10 64bit

Version

Which versions are you using:

• react-native-swiper : 1.6.0-rc
• react-native v0 : 0.62

Expected behaviour

I want to adds a swiper to the section View.
I expected the header, footer view size to be fixed, and the sweeper to be fully printed on the section View.

Actual behaviour

the section invades the area of the header, footer view, and at the same time the header view is getting smaller and no footer view is visible.

How to reproduce it>

To help us, please fork this component, modify one example in examples folder to reproduce your issue and include link here.

Steps to reproduce

• 1. first code

// Code 1
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default class extends React.Component {
  render(){
    return (
      <View style={styles.container}>
        {/* header */}
        <View style={styles.header}>
          <Text>header</Text>
        </View>

        {/* section */}
        <View style={styles.section}>
          <Text>sect</Text>
        </View>


        <View style={styles.footer}>
          <Text>footer</Text>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff'
  },
  header:{
    flex:1.5,
    backgroundColor:"red"
  },
  section:{
    flex:8,
    backgroundColor:"yellow"
  },
  footer:{
    flex:1,
    backgroundColor:"blue"
  }
});

• 2. Unexpected Code

import React from 'react';
import { AppRegistry, StyleSheet, Text, View } from 'react-native'
import Swiper from 'react-native-swiper/src'



export default class extends React.Component {
  render(){
    return (
      <View style={styles.container}>

        {/* header */}
        <View style={styles.header}>
          <Text>header</Text>
        </View>


        {/* section */}
        <View style={styles.section}>
          <Swiper 
          style={styles.wrapper}
          showsPagination={false}
          >
            <View style={styles.slide1}>
              <Text style={styles.text}>Hello Swiper</Text>
            </View>
            <View style={styles.slide2}>
              <Text style={styles.text}>Beautiful</Text>
            </View>
            <View style={styles.slide3}>
              <Text style={styles.text}>And simple</Text>
            </View>
          </Swiper>
        </View>



        {/* footer*/}
        <View style={styles.footer}>
          <Text>footer</Text>
        </View>

      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff'
  },
  header:{
    flex:1.5,
    backgroundColor:"red"
  },
  section:{
    flex:8,
    backgroundColor:"yellow"
  },
  footer:{
    flex:1,
    backgroundColor:"blue"
  },
  wrapper:{

  },
  slide1: {
    flex:1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#9DD6EB'
  },
  slide2: {
    flex:1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#97CAE5'
  },
  slide3: {
    flex:1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#92BBD9'
  },
  text: {
    color: '#fff',
    fontSize: 30,
    fontWeight: 'bold'
  }

});


AppRegistry.registerComponent('App/', () => App)

Start with the provided two-component reproduction and the react-native-swiper/src entry point, comparing the layout with and without Swiper inside the section View. Confirm the flex behavior that causes the header or footer to be displaced; done means the header and footer retain their intended sizes while the swiper fills only the section.