fix: disable status bar prop causing android status bar change (#502)

* fix: disable status bar prop causing android status bar change

* refactor: fix linting error

Author: iM-GeeKy

docusaurus/docs/date-picker/input-date-picker.md

@@ -51,6 +51,10 @@ Flag indicating if the calendar icon should be disabled. When set to `true`, the
 `Type: boolean | undefined`  
 Flag indicating if the status bar padding should be enabled or not. Defaults to `false`.
 
+**disableStatusBar**  
+`Type: boolean | undefined`  
+Flag indicating if the date picker modal should avoid manipulating the status bar. When set to `true`, the modal will not modify the status bar's appearance or translucency. Defaults to `false`.
+
 **endYear**  
 `Type: number | undefined`  
 The end year when the component is rendered. Defaults to `2200`.

docusaurus/docs/date-picker/multiple-dates-picker.md

@@ -75,6 +75,10 @@ The date values used to populate the component.
 `Type: boolean | undefined`  
 Flag indicating if the status bar padding should be enabled or not. Defaults to `false`.
 
+**disableStatusBar**  
+`Type: boolean | undefined`  
+Flag indicating if the date picker modal should avoid manipulating the status bar. When set to `true`, the modal will not modify the status bar's appearance or translucency. Defaults to `false`.
+
 **editIcon**  
 `Type: string | undefined`  
 The edit icon used to toggle between calendar and input. Defaults to `pencil`. You can pass the name of an icon from [MaterialCommunityIcons](https://materialdesignicons.com/).

docusaurus/docs/date-picker/range-date-picker.md

@@ -74,6 +74,10 @@ The icon used to close the component. Defaults to `close`. You can pass the name
 `Type: boolean | undefined`  
 Flag indicating if the status bar padding should be enabled or not. Defaults to `false`.
 
+**disableStatusBar**  
+`Type: boolean | undefined`  
+Flag indicating if the date picker modal should avoid manipulating the status bar. When set to `true`, the modal will not modify the status bar's appearance or translucency. Defaults to `false`.
+
 **editIcon**  
 `Type: string | undefined`  
 The edit icon used to toggle between calendar and input. Defaults to `pencil`. You can pass the name of an icon from [MaterialCommunityIcons](https://materialdesignicons.com/).

docusaurus/docs/date-picker/single-date-picker.md

@@ -77,6 +77,10 @@ The date value used to populate the component.
 `Type: boolean | undefined`  
 Flag indicating if the status bar padding should be enabled or not. Defaults to `false`.
 
+**disableStatusBar**  
+`Type: boolean | undefined`  
+Flag indicating if the date picker modal should avoid manipulating the status bar. When set to `true`, the modal will not modify the status bar's appearance or translucency. Defaults to `false`.
+
 **editIcon**  
 `Type: string | undefined`  
 The edit icon used to toggle between calendar and input. Defaults to `pencil`. You can pass the name of an icon from [MaterialCommunityIcons](https://materialdesignicons.com/).

src/Date/DatePickerInput.shared.tsx

@@ -26,6 +26,7 @@ export type DatePickerInputProps = {
   onChangeText?: (text: string | undefined) => void
   inputEnabled?: boolean
   disableStatusBarPadding?: boolean
+  disableStatusBar?: boolean
   animationType?: 'slide' | 'fade' | 'none'
   presentationStyle?: 'pageSheet' | 'overFullScreen'
   startWeekOnMonday?: boolean

src/Date/DatePickerInput.tsx

@@ -65,6 +65,7 @@ function DatePickerInput(
         endYear,
         inputEnabled,
         disableStatusBarPadding,
+        disableStatusBar,
         startWeekOnMonday,
       }) =>
         withModal ? (
@@ -84,6 +85,7 @@ function DatePickerInput(
             endYear={endYear ?? defaultEndYear}
             inputEnabled={inputEnabled}
             disableStatusBarPadding={disableStatusBarPadding ?? false}
+            disableStatusBar={disableStatusBar}
             animationType={animationType}
             presentationStyle={presentationStyle}
             label={rest.label as any}

src/Date/DatePickerInputWithoutModal.tsx

@@ -28,6 +28,7 @@ function DatePickerInputWithoutModal(
     onChangeText,
     inputEnabled,
     disableStatusBarPadding,
+    disableStatusBar,
     startWeekOnMonday,
     ...rest
   }: DatePickerInputProps & {
@@ -43,6 +44,7 @@ function DatePickerInputWithoutModal(
       endYear: DatePickerInputProps['endYear']
       inputEnabled: DatePickerInputProps['inputEnabled']
       disableStatusBarPadding: DatePickerInputProps['disableStatusBarPadding']
+      disableStatusBar: DatePickerInputProps['disableStatusBar']
       startWeekOnMonday?: DatePickerInputProps['startWeekOnMonday']
     }) => any
     inputButton?: ReactNode
@@ -119,6 +121,7 @@ function DatePickerInputWithoutModal(
         endYear,
         inputEnabled,
         disableStatusBarPadding,
+        disableStatusBar,
         startWeekOnMonday,
       })}
     </>

src/Date/DatePickerModal.tsx

@@ -73,7 +73,7 @@ export function DatePickerModal(
         onRequestClose={rest.onDismiss}
         presentationStyle={isPageSheet ? 'pageSheet' : 'overFullScreen'}
         supportedOrientations={supportedOrientations}
-        statusBarTranslucent={true}
+        statusBarTranslucent={!disableStatusBar}
       >
         <TouchableWithoutFeedback onPress={rest.onDismiss}>
           <View

src/Time/TimeInput.tsx

@@ -102,7 +102,7 @@ function TimeInput(
               Platform.OS === 'android'
                 ? Math.max(inputFontSize, 48)
                 : undefined,
-            paddingTop: Platform.OS === 'android' ? 10 : undefined,
+            paddingTop: Platform.OS === 'android' ? 0 : undefined,
             paddingBottom: Platform.OS === 'android' ? 0 : undefined,
             textAlign: 'center',
           },