diff --git a/__tests__/Datepicker.test.js b/__tests__/Datepicker.test.js
index 0ded2ef586..c4f121e6f5 100644
--- a/__tests__/Datepicker.test.js
+++ b/__tests__/Datepicker.test.js
@@ -128,10 +128,10 @@ describe('DatePicker', () => {
     datePicker.setModalVisible(true);
 
     expect(wrapper.state('modalVisible')).toEqual(true);
-    expect(wrapper.state('animatedHeight')._animation._toValue).toBeGreaterThan(200);
+    expect(wrapper.state('animatedHeight')._animation._toValue).toEqual(0);
 
     datePicker.setModalVisible(false);
-    expect(wrapper.state('animatedHeight')._animation._toValue).toEqual(0);
+    expect(wrapper.state('animatedHeight')._animation._toValue).toBeGreaterThan(200);
   });
 
   it('onPressCancel', () => {
diff --git a/datepicker.js b/datepicker.js
index ac6cacde29..41fd07b08d 100644
--- a/datepicker.js
+++ b/datepicker.js
@@ -31,7 +31,8 @@ class DatePicker extends Component {
     this.state = {
       date: this.getDate(),
       modalVisible: false,
-      animatedHeight: new Animated.Value(0),
+      animatedHeight: new Animated.Value(props.height),
+      opacity: new Animated.Value(0),
       allowPointerEvents: true
     };
 
@@ -62,21 +63,39 @@ class DatePicker extends Component {
     // slide animation
     if (visible) {
       this.setState({modalVisible: visible});
-      return Animated.timing(
-        this.state.animatedHeight,
-        {
-          toValue: height,
-          duration: duration
-        }
-      ).start();
+      Animated.parallel([
+        Animated.timing(
+          this.state.animatedHeight,
+          {
+            toValue: 0,
+            duration: duration
+          }
+        ),
+        Animated.timing(
+          this.state.opacity,
+          {
+            toValue: 1,
+            duration: duration
+          }
+        )
+      ]).start();
     } else {
-      return Animated.timing(
-        this.state.animatedHeight,
-        {
-          toValue: 0,
-          duration: duration
-        }
-      ).start(() => {
+      Animated.parallel([
+        Animated.timing(
+          this.state.animatedHeight,
+          {
+            toValue: height,
+            duration: duration
+          }
+        ),
+        Animated.timing(
+          this.state.opacity,
+          {
+            toValue: 0,
+            duration: duration
+          }
+        )
+      ]).start(() => {
         this.setState({modalVisible: visible});
       });
     }
@@ -341,7 +360,8 @@ class DatePicker extends Component {
       cancelBtnTestID,
       confirmBtnTestID,
       allowFontScaling,
-      locale
+      locale,
+      height
     } = this.props;
 
     const dateInputStyle = [
@@ -363,7 +383,7 @@ class DatePicker extends Component {
               <View style={dateInputStyle}>
                 {this.getTitleElement()}
               </View>
-            :
+              :
               <View/>
           }
           {this._renderIcon()}
@@ -377,60 +397,66 @@ class DatePicker extends Component {
             <View
               style={{flex: 1}}
             >
-              <TouchableComponent
-                style={Style.datePickerMask}
-                activeOpacity={1}
-                underlayColor={'#00000077'}
-                onPress={this.onPressMask}
-              >
+              <Animated.View style={{flex: 1, opacity: this.state.opacity}}>
                 <TouchableComponent
-                  underlayColor={'#fff'}
-                  style={{flex: 1}}
+                  style={Style.datePickerMask}
+                  activeOpacity={1}
+                  underlayColor={'#00000077'}
+                  onPress={this.onPressMask}
                 >
-                  <Animated.View
-                    style={[Style.datePickerCon, {height: this.state.animatedHeight}, customStyles.datePickerCon]}
+                  <TouchableComponent
+                    underlayColor={'#fff'}
+                    style={{flex: 1}}
                   >
-                    <View pointerEvents={this.state.allowPointerEvents ? 'auto' : 'none'}>
-                      <DatePickerIOS
-                        date={this.state.date}
-                        mode={mode}
-                        minimumDate={minDate && this.getDate(minDate)}
-                        maximumDate={maxDate && this.getDate(maxDate)}
-                        onDateChange={this.onDateChange}
-                        minuteInterval={minuteInterval}
-                        timeZoneOffsetInMinutes={timeZoneOffsetInMinutes ? timeZoneOffsetInMinutes : null}
-                        style={[Style.datePicker, customStyles.datePicker]}
-                        locale={locale}
-                      />
-                    </View>
-                    <TouchableComponent
-                      underlayColor={'transparent'}
-                      onPress={this.onPressCancel}
-                      style={[Style.btnText, Style.btnCancel, customStyles.btnCancel]}
-                      testID={cancelBtnTestID}
+                    <Animated.View
+                      style={[
+                        Style.datePickerCon,
+                        {height, transform: [{translateY: this.state.animatedHeight}]},
+                        customStyles.datePickerCon
+                      ]}
                     >
-                      <Text
-                        allowFontScaling={allowFontScaling}
-                        style={[Style.btnTextText, Style.btnTextCancel, customStyles.btnTextCancel]}
+                      <View pointerEvents={this.state.allowPointerEvents ? 'auto' : 'none'}>
+                        <DatePickerIOS
+                          date={this.state.date}
+                          mode={mode}
+                          minimumDate={minDate && this.getDate(minDate)}
+                          maximumDate={maxDate && this.getDate(maxDate)}
+                          onDateChange={this.onDateChange}
+                          minuteInterval={minuteInterval}
+                          timeZoneOffsetInMinutes={timeZoneOffsetInMinutes ? timeZoneOffsetInMinutes : null}
+                          style={[Style.datePicker, customStyles.datePicker]}
+                          locale={locale}
+                        />
+                      </View>
+                      <TouchableComponent
+                        underlayColor={'transparent'}
+                        onPress={this.onPressCancel}
+                        style={[Style.btnText, Style.btnCancel, customStyles.btnCancel]}
+                        testID={cancelBtnTestID}
                       >
-                        {cancelBtnText}
-                      </Text>
-                    </TouchableComponent>
-                    <TouchableComponent
-                      underlayColor={'transparent'}
-                      onPress={this.onPressConfirm}
-                      style={[Style.btnText, Style.btnConfirm, customStyles.btnConfirm]}
-                      testID={confirmBtnTestID}
-                    >
-                      <Text allowFontScaling={allowFontScaling}
-                            style={[Style.btnTextText, customStyles.btnTextConfirm]}
+                        <Text
+                          allowFontScaling={allowFontScaling}
+                          style={[Style.btnTextText, Style.btnTextCancel, customStyles.btnTextCancel]}
+                        >
+                          {cancelBtnText}
+                        </Text>
+                      </TouchableComponent>
+                      <TouchableComponent
+                        underlayColor={'transparent'}
+                        onPress={this.onPressConfirm}
+                        style={[Style.btnText, Style.btnConfirm, customStyles.btnConfirm]}
+                        testID={confirmBtnTestID}
                       >
-                        {confirmBtnText}
-                      </Text>
-                    </TouchableComponent>
-                  </Animated.View>
+                        <Text allowFontScaling={allowFontScaling}
+                          style={[Style.btnTextText, customStyles.btnTextConfirm]}
+                        >
+                          {confirmBtnText}
+                        </Text>
+                      </TouchableComponent>
+                    </Animated.View>
+                  </TouchableComponent>
                 </TouchableComponent>
-              </TouchableComponent>
+              </Animated.View>
             </View>
           </Modal>}
         </View>