Can't see the dots when screen has navigation

[minhhung2556]

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' } }

[minhhung2556]

I found out the dots are drawn below of visible area on the screen. I think you need to calculate position of them again.

[DouSN]

You have to send height as a property. not as a style property