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

Question

I'm writing to get some help because of the fact-native-sweeper application that didn't go as well as I thought.

The first code is a layout code with different header, section, and footer flex in the container view.

The second code is the code that adds a swiper to the section of the first code. I expected the header, footer view size to be fixed, and the sweeper to be fully printed on the section.

However, 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.

I may have caused an error while still studying real-native. I would appreciate it if you leave a comment about the error and direction of improvement.

Thank you for reading the long article.

• 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"
  }
});

• Second 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>



        {/* header */}
        <View style={styles.footer}>
          <Text>footer</Text>
          {/* <Header /> */}
        </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)[ie][1]