Can't see the dots when screen has navigation

import React from 'react';
import {
View,
StyleSheet,
Text,
Dimensions,
Image,
} from 'react-native';
import Swiper from 'react-native-swiper';
const { width } = Dimensions.get('window');
export default class WeatherScreen extends React.Component {
static navigationOptions = {
title: 'Weather',
};

constructor(props) {
    super(props);
}

render() {
    return <Swiper style={styles.wrapper} showsButtons>
        <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>
}

}

var styles = {
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'
}
}

Start by reproducing the supplied WeatherScreen example with navigation enabled and verify when the Swiper pagination dots disappear. Trace the Swiper pagination positioning from that example; done means the dots remain visible on screens that include navigation.