Merge pull request #316 from SoyDiego/fix-modal-jump-on-open

Fixed Datepicker modal jump when is opened
web-ridge · Aug 30, 2023 · 44a492d · 44a492d
2 parents 0432a88 + ebcb53e
commit 44a492d
Showing 1 changed file with 13 additions and 11 deletions.
diff --git a/src/Date/DatePickerModal.tsx b/src/Date/DatePickerModal.tsx
@@ -14,8 +14,8 @@ import DatePickerModalContent, {
   DatePickerModalContentRangeProps,
   DatePickerModalContentSingleProps,
 } from './DatePickerModalContent'
-import { useHeaderBackgroundColor, useHeaderColorIsLight } from '../utils'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { useHeaderBackgroundColor } from '../utils'
 
 interface DatePickerModalProps {
   visible: boolean
@@ -66,10 +66,10 @@ export function DatePickerModal(
       default: 'slide',
     })
 
-  const isLight = useHeaderColorIsLight()
+  const isTransparent = presentationStyle === 'pageSheet' ? false : true
   const headerBackgroundColor = useHeaderBackgroundColor()
   const insets = useSafeAreaInsets()
-  const isTransparent = presentationStyle === 'pageSheet' ? false : true
+
   return (
     <View style={[StyleSheet.absoluteFill]} pointerEvents="box-none">
       <Modal
@@ -103,18 +103,20 @@ export function DatePickerModal(
                 dimensions.width > 650 ? styles.modalContentBig : null,
               ]}
             >
-              {disableStatusBar ? null : (
-                <StatusBar
-                  translucent={true}
-                  barStyle={isLight ? 'dark-content' : 'light-content'}
-                />
-              )}
               {disableStatusBarPadding ? null : (
                 <View
                   style={[
                     {
-                      height: insets.top,
-                      backgroundColor: headerBackgroundColor,
+                      height: Platform.select({
+                        ios: StatusBar.currentHeight,
+                        android: StatusBar.currentHeight,
+                        web: insets.top,
+                      }),
+                      backgroundColor: Platform.select({
+                        ios: theme.colors.primary,
+                        android: theme.colors.primary,
+                        web: headerBackgroundColor,
+                      }),
                     },
                   ]}
                 />