diff --git a/README.md b/README.md
index d771db7..e7d6b05 100644
--- a/README.md
+++ b/README.md
@@ -40,7 +40,7 @@ modalStyle   | Styles for the blocking view behind the DialogInput             |
 dialogStyle             | Styles for the DialogInput main view                        |   Object (OPTIONAL)
 cancelText             | Replacement text for the Cancel button      |   String (OPTIONAL)
 submitText             | Replacement text for the Submit button      |   String (OPTIONAL)
-
+keyboardMargin          | When open keyboard add margin      |   number (OPTIONAL)
 ## Methods
 
  name           | description                                        | returns
diff --git a/index.js b/index.js
index ec830ad..defcc5e 100644
--- a/index.js
+++ b/index.js
@@ -1,20 +1,48 @@
 import React from 'react';
-import { StyleSheet, Text, View, Modal, TextInput, TouchableOpacity,
-         Platform } from 'react-native';
+import {
+  StyleSheet, Text, View, Modal, TextInput, TouchableOpacity,
+  Platform, Keyboard
+} from 'react-native';
 
-class DialogInput extends React.Component{
-  constructor(props){
+class DialogInput extends React.Component {
+  constructor(props) {
     super(props);
-    this.state = { inputModal: '', openning: true }
+    this.state = {
+      inputModal: '',
+      openning: true,
+      keyboardVisible: false,
+    }
+  }
+  componentWillMount() {
+    this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this.keyboardDidShow.bind(this));
+    this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this.keyboardDidHide.bind(this));
+  };
+
+  componentWillUnmount() {
+    this.keyboardDidShowListener.remove();
+    this.keyboardDidHideListener.remove();
+  }
+
+  keyboardDidShow(e) {
+    this.setState({
+      keyboardVisible: true
+    });
+  }
+
+  keyboardDidHide(e) {
+    this.setState({
+      keyboardVisible: false
+    });
   }
 
-  render(){
+  render() {
+    console.log('keyboard status', this.state.keyboardVisible)
     let title = this.props.title || '';
     let hintInput = this.props.hintInput || '';
     let value = '';
     if (!this.state.openning) {
       value = this.state.inputModal;
-    }else{
+    } else {
       value = this.props.initValueTextInput ? this.props.initValueTextInput : '';
     }
 
@@ -23,51 +51,51 @@ class DialogInput extends React.Component{
     let dialogStyleProps = this.props.dialogStyle || {};
     var cancelText = this.props.cancelText || 'Cancel';
     var submitText = this.props.submitText || 'Submit';
-    cancelText = (Platform.OS === 'ios')? cancelText:cancelText.toUpperCase();
-    submitText = (Platform.OS === 'ios')? submitText:submitText.toUpperCase();
+    cancelText = (Platform.OS === 'ios') ? cancelText : cancelText.toUpperCase();
+    submitText = (Platform.OS === 'ios') ? submitText : submitText.toUpperCase();
 
-    return(
+    return (
       <Modal
         animationType="fade"
         transparent={true}
         visible={this.props.isDialogVisible}
-      	onRequestClose={() => {
+        onRequestClose={() => {
           this.props.closeDialog();
           this.setState({ inputModal: '' });
-      	}}>
-        <View style={[styles.container, {...modalStyleProps}]}  >
-          <TouchableOpacity style={styles.container} activeOpacity={1} onPress={() => { this.props.closeDialog(); this.setState({ inputModal: '',openning: true })}} >
-            <View style={[styles.modal_container, {...dialogStyleProps}]} >
+        }}>
+        <View style={[styles.container, { ...modalStyleProps }]}  >
+          <TouchableOpacity style={[styles.container, { marginBottom: this.state.keyboardVisible ? this.props.keyboardMargin : 0, }]} activeOpacity={1} onPress={() => { this.props.closeDialog(); this.setState({ inputModal: '', openning: true }) }} >
+            <View style={[styles.modal_container, { ...dialogStyleProps }]} >
               <View style={styles.modal_body} >
                 <Text style={styles.title_modal}>{title}</Text>
-                <Text style={[this.props.message ? styles.message_modal : {height:0} ]}>{this.props.message}</Text>
+                <Text style={[this.props.message ? styles.message_modal : { height: 0 }]}>{this.props.message}</Text>
                 <TextInput style={styles.input_container}
-                  autoCorrect={(textProps && textProps.autoCorrect==false)?false:true}
-                  autoCapitalize={(textProps && textProps.autoCapitalize)?textProps.autoCapitalize:'none'}
-                  clearButtonMode={(textProps && textProps.clearButtonMode)?textProps.clearButtonMode:'never'}
-                  clearTextOnFocus={(textProps && textProps.clearTextOnFocus==true)?textProps.clearTextOnFocus:false}
-                  keyboardType={(textProps && textProps.keyboardType)?textProps.keyboardType:'default'}
+                  autoCorrect={(textProps && textProps.autoCorrect == false) ? false : true}
+                  autoCapitalize={(textProps && textProps.autoCapitalize) ? textProps.autoCapitalize : 'none'}
+                  clearButtonMode={(textProps && textProps.clearButtonMode) ? textProps.clearButtonMode : 'never'}
+                  clearTextOnFocus={(textProps && textProps.clearTextOnFocus == true) ? textProps.clearTextOnFocus : false}
+                  keyboardType={(textProps && textProps.keyboardType) ? textProps.keyboardType : 'default'}
                   autoFocus={true}
                   onKeyPress={() => this.setState({ openning: false })}
                   underlineColorAndroid='transparent'
                   placeholder={hintInput}
-                  onChangeText={(inputModal) => this.setState({inputModal})}
+                  onChangeText={(inputModal) => this.setState({ inputModal })}
                   value={value}
-                  />
+                />
               </View>
               <View style={styles.btn_container}>
                 <TouchableOpacity style={styles.touch_modal}
                   onPress={() => {
                     this.props.closeDialog();
-                    this.setState({ inputModal: '',openning: true })
+                    this.setState({ inputModal: '', openning: true })
                   }}>
                   <Text style={styles.btn_modal_left}>{cancelText}</Text>
                 </TouchableOpacity>
                 <View style={styles.divider_btn}></View>
-                <TouchableOpacity  style={styles.touch_modal}
+                <TouchableOpacity style={styles.touch_modal}
                   onPress={() => {
                     this.props.submitInput(value);
-                    this.setState({ inputModal: '',openning: true })
+                    this.setState({ inputModal: '', openning: true })
                   }}>
                   <Text style={styles.btn_modal_right}>{submitText}</Text>
                 </TouchableOpacity>
@@ -80,37 +108,37 @@ class DialogInput extends React.Component{
   }
 }
 const styles = StyleSheet.create({
-  container:{
-    flex:1,
+  container: {
+    flex: 1,
     width: '100%',
     height: '100%',
     flexDirection: 'column',
     justifyContent: 'center',
     alignItems: 'center',
     ...Platform.select({
-      android:{
+      android: {
         backgroundColor: 'rgba(0,0,0,0.62)'
       }
     }),
   },
-  modal_container:{
+  modal_container: {
     marginLeft: 30,
     marginRight: 30,
     ...Platform.select({
       ios: {
-        backgroundColor:'#E3E6E7',
+        backgroundColor: '#E3E6E7',
         borderRadius: 10,
         minWidth: 300,
       },
       android: {
-        backgroundColor:'#fff',
+        backgroundColor: '#fff',
         elevation: 24,
         minWidth: 280,
         borderRadius: 5,
       },
     }),
   },
-  modal_body:{
+  modal_body: {
     ...Platform.select({
       ios: {
         padding: 10,
@@ -120,35 +148,35 @@ const styles = StyleSheet.create({
       },
     }),
   },
-  title_modal:{
+  title_modal: {
     fontWeight: 'bold',
     fontSize: 20,
     ...Platform.select({
       ios: {
         marginTop: 10,
-        textAlign:'center',
+        textAlign: 'center',
         marginBottom: 5,
       },
       android: {
-        textAlign:'left',
+        textAlign: 'left',
       },
     }),
   },
-  message_modal:{
+  message_modal: {
     fontSize: 16,
     ...Platform.select({
       ios: {
-        textAlign:'center',
+        textAlign: 'center',
         marginBottom: 10,
       },
       android: {
-        textAlign:'left',
+        textAlign: 'left',
         marginTop: 20
       },
     }),
   },
-  input_container:{
-    textAlign:'left',
+  input_container: {
+    textAlign: 'left',
     fontSize: 16,
     color: 'rgba(0,0,0,0.54)',
     ...Platform.select({
@@ -156,7 +184,7 @@ const styles = StyleSheet.create({
         backgroundColor: 'white',
         borderRadius: 5,
         paddingTop: 5,
-	      borderWidth: 1,
+        borderWidth: 1,
         borderColor: '#B0B0B0',
         paddingBottom: 5,
         paddingLeft: 10,
@@ -170,7 +198,7 @@ const styles = StyleSheet.create({
       },
     }),
   },
-  btn_container:{
+  btn_container: {
     flex: 1,
     flexDirection: 'row',
     ...Platform.select({
@@ -180,7 +208,7 @@ const styles = StyleSheet.create({
         borderColor: '#B0B0B0',
         maxHeight: 48,
       },
-      android:{
+      android: {
         alignSelf: 'flex-end',
         maxHeight: 52,
         paddingTop: 8,
@@ -188,64 +216,64 @@ const styles = StyleSheet.create({
       }
     }),
   },
-  divider_btn:{
+  divider_btn: {
     ...Platform.select({
-      ios:{
-      	width: 1,
+      ios: {
+        width: 1,
         backgroundColor: '#B0B0B0',
       },
-      android:{
-	      width: 0
+      android: {
+        width: 0
       },
     }),
   },
-  touch_modal:{
+  touch_modal: {
     ...Platform.select({
       ios: {
         flex: 1,
       },
-      android:{
+      android: {
         paddingRight: 8,
         minWidth: 64,
         height: 36,
       }
     }),
   },
-  btn_modal_left:{
+  btn_modal_left: {
     ...Platform.select({
       fontWeight: "bold",
       ios: {
-        fontSize:18,
-        color:'#408AE2',
-        textAlign:'center',
+        fontSize: 18,
+        color: '#408AE2',
+        textAlign: 'center',
         borderRightWidth: 5,
         borderColor: '#B0B0B0',
         padding: 10,
-	      height: 48,
-	      maxHeight: 48,
+        height: 48,
+        maxHeight: 48,
       },
       android: {
-        textAlign:'right',
-        color:'#009688',
+        textAlign: 'right',
+        color: '#009688',
         padding: 8
       },
     }),
   },
-  btn_modal_right:{
+  btn_modal_right: {
     ...Platform.select({
       fontWeight: "bold",
       ios: {
-        fontSize:18,
-        color:'#408AE2',
-        textAlign:'center',
+        fontSize: 18,
+        color: '#408AE2',
+        textAlign: 'center',
         padding: 10,
       },
       android: {
-        textAlign:'right',
-        color:'#009688',
+        textAlign: 'right',
+        color: '#009688',
         padding: 8
       },
     }),
   },
 });
-export default DialogInput;
\ No newline at end of file
+export default DialogInput;