Merge pull request #105 from ngandhy/master

Add iPhone X Support
testshallpass · Feb 3, 2018 · b05d86c · b05d86c
2 parents 81204e1 + 0453b11
commit b05d86c
Show file tree

Hide file tree

Showing 3 changed files with 320 additions and 246 deletions.
diff --git a/DropdownAlert.js b/DropdownAlert.js
@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import {
   StyleSheet,
+  SafeAreaView,
   View,
   Text,
   TouchableHighlight,
@@ -30,6 +31,7 @@ export default class DropdownAlert extends Component {
     startDelta: PropTypes.number,
     endDelta: PropTypes.number,
     containerStyle: ViewPropTypes.style,
+    safeAreaStyle:ViewPropTypes.style,
     titleStyle: Text.propTypes.style,
     messageStyle: Text.propTypes.style,
     imageStyle: Image.propTypes.style,
@@ -76,6 +78,10 @@ export default class DropdownAlert extends Component {
       padding: 16,
       flexDirection: 'row',
     },
+    safeAreaStyle:{
+      flexDirection:'row',
+      flex:1
+    },
     titleStyle: {
       fontSize: 16,
       textAlign: 'left',
@@ -428,11 +434,13 @@ export default class DropdownAlert extends Component {
             onLayout={event => this.onLayoutEvent(event)}
           >
             <View style={style}>
-              <ImageView style={StyleSheet.flatten(this.props.imageStyle)} source={source} />
-              <View style={StyleSheet.flatten(this.props.defaultTextContainer)}>
-                <Label style={StyleSheet.flatten(this.props.titleStyle)} numberOfLines={this.props.titleNumOfLines} text={this.state.title} />
-                <Label style={StyleSheet.flatten(this.props.messageStyle)} numberOfLines={this.props.messageNumOfLines} text={this.state.message} />
-              </View>
+              <SafeAreaView style={StyleSheet.flatten(this.props.safeAreaStyle)}>
+                <ImageView style={StyleSheet.flatten(this.props.imageStyle)} source={source} />
+                <View style={StyleSheet.flatten(this.props.defaultTextContainer)}>
+                  <Label style={StyleSheet.flatten(this.props.titleStyle)} numberOfLines={this.props.titleNumOfLines} text={this.state.title} />
+                  <Label style={StyleSheet.flatten(this.props.messageStyle)} numberOfLines={this.props.messageNumOfLines} text={this.state.message} />
+                </View>
+              </SafeAreaView>
               {showCancel &&
                 <TouchableOpacity
                   style={{

diff --git a/README.md b/README.md
@@ -9,16 +9,19 @@
 ![screenshot](https://raw.github.com/testshallpass/react-native-dropdownalert/master/screenshots/info.png) ![screenshot](https://raw.github.com/testshallpass/react-native-dropdownalert/master/screenshots/warning.png) ![screenshot](https://raw.github.com/testshallpass/react-native-dropdownalert/master/screenshots/error.png) ![screenshot](https://raw.github.com/testshallpass/react-native-dropdownalert/master/screenshots/success.png)
 
 ### Table of contents
-1. [News](#news)
+1. [Support](#support)
 2. [Installation](#installation)
 3. [Demo](#demo)
 4. [Usage](#usage)
 5. [Props](#props)
 
 A simple alert to notify users about new chat messages, something went wrong or everything is ok. It can be closed by tap, cancel button, automatically with `closeInterval`, pan responder up gesture or programmatically. 
 
-### News
-> v2.13.0 supports ViewPropTypes introduced in react-native **0.44.0**. If you support an earlier react-native version, please use v2.12.0 or earlier.
+### Support
+| react-native version | package version | reason | 
+| ---- | :---: | ---- |
+| 0.50.0 | >=3.2.0 | Added SafeAreaView (iPhone X) |
+| 0.44.0 | >=2.12.0 | Added ViewPropTypes |
 
 ### Installation
 ```