react-native-modals: Pop up not showing on Android

I have tried all sorts of things to get the pop up working on Android but nothing seems to work, even when I copied the example from the ReadMe, it does not work. On IOS is works smoothly without any problems

import React, { Component } from 'react';
import { Container, Content, Left, Right, Icon, Text, Segment, Button } from 'native-base';
import { View, StyleSheet, ImageBackground, Dimensions, Image } from 'react-native';
import PopupDialog, { DialogTitle } from 'react-native-popup-dialog';
import skin from '../../assets/img/bg_2.jpeg'
import bulb from '../../assets/img/lightbulb.png';


export default class Documents extends Component {
  static navigationOptions = {
    title: 'Total Savings',
    headerTitleStyle: { color: 'white'},
    drawerLabel: 'Home',
    drawerIcon: ({ tintColor }) => (
      <Icon name='ios-home-outline' />
    ),
    tabBarIcon: <Icon name='ios-home-outline' />,
    headerStyle: {shadowColor: 'transparent', backgroundColor: '#5271FF', borderBottomWidth: 0, elevation:0}
  };
  componentDidMount(){
    this.popupDialog.show();
  }
  render() {
    const { width: viewportWidth, height: viewportHeight } = Dimensions.get('window');
    return (
      <ImageBackground source={skin} style={styles.backgroundImage}>
      <Container>
        <Content>
          <View style={{ backgroundColor: "#5271FF", height: 150, width: '100%'}}>
            <Text style={{alignSelf: 'center', color: 'white', fontSize: 55, marginTop: '5%'}}> R 0.00</Text>
            <View style={{flexDirection: 'row', alignSelf: 'center', flexWrap: 'wrap', flex:1}}>
              <Button transparent warning>
                <Text>Savings</Text>
              </Button>
              <Button transparent success>
                <Text>Investment</Text>
              </Button>
            </View>
            <PopupDialog
              ref={(popupDialog) => { this.popupDialog = popupDialog; }}
              width={viewportWidth*0.8}
              dialogTitle={
                <DialogTitle 
                  haveTitleBar={false} 
                  titleAlign="right" 
                  title={<Icon name="ios-close" onPress={() => this.popupDialog.dismiss()} />}
                  titleStyle={{marginTop: '-5%'}}
                />
              }
              haveTitleBar={false}
              haveOverlay={false}
            >
              <View style={{flexDirection: 'row'}}>
                <Image source={bulb} style={{height: 50, width: 50}} />
                <View>
                  <Text style={styles.text}>
                     Testing
                  </Text>
                </View>
              </View>
              <Button onPress={() => {this.props.navigation.navigate('Packages')}} style={{backgroundColor: "#EFCB0E", alignSelf: 'center', marginTop: '20%'}}><Text> GET STARTED </Text></Button>
            </PopupDialog>
          </View>
          <Text>
          </Text>
        </Content>
      </Container>
      </ImageBackground>
    );
  }
}

const styles = StyleSheet.create({
  backgroundImage: {
    flex: 1,
    width: '100%',
    height: '100%',
  },
  text: {
    alignSelf: 'center',
    fontSize: 15,
  }
})

above is the affected class, I have pasted all of it in case there is something that I have missed or am doing wrong.

Below is the list of relevant dependencies and their version

expo: 23.0.4 native-base: 2.3.8 react: 16.0.0 react-native-popup-dialog: 0.11.46