android ui small fix

src/components/Calendars/RangeCalendar/RangeCalendarWithTabs.tsx

@@ -5,7 +5,8 @@ import {
   TouchableOpacity,
   StyleSheet,
   Animated,
-  LayoutChangeEvent
+  LayoutChangeEvent,
+  Platform
 } from 'react-native';
 import { Picker as WheelPicker } from 'react-native-wheel-pick';
 import { Modal } from '../../Modal';
@@ -33,10 +34,7 @@ export type CalendarMode = 'exact' | 'approx';
 
 const CURRENT_YEAR = dayjs().year();
 
-const YEAR_STRINGS: string[] = Array.from(
-  { length: 100 },
-  (_, i) => String(CURRENT_YEAR - 1 - i)
-);
+const YEAR_STRINGS: string[] = Array.from({ length: 100 }, (_, i) => String(CURRENT_YEAR - 1 - i));
 
 const FIXED_CONTENT_HEIGHT = 380;
 
@@ -70,9 +68,7 @@ function TabSwitcher({
 
   return (
     <View style={tabStyles.wrapper} onLayout={handleLayout}>
-      <Animated.View
-        style={[tabStyles.pill, { width: pillWidth, transform: [{ translateX }] }]}
-      />
+      <Animated.View style={[tabStyles.pill, { width: pillWidth, transform: [{ translateX }] }]} />
       {(['exact', 'approx'] as CalendarMode[]).map((tab) => (
         <TouchableOpacity
           key={tab}
@@ -98,7 +94,7 @@ const tabStyles = StyleSheet.create({
     marginHorizontal: 16,
     marginBottom: 12,
     position: 'relative',
-    overflow: 'hidden',
+    overflow: 'hidden'
   },
   pill: {
     position: 'absolute',
@@ -138,9 +134,11 @@ function YearWheelPicker({
   onYearChange: (year: number) => void;
 }) {
   return (
-    <View style={wheelStyles.container}>
+    <View
+      style={[wheelStyles.container, Platform.OS === 'android' ? { justifyContent: 'center' } : {}]}
+    >
       <WheelPicker
-        style={wheelStyles.wheel}
+        style={[wheelStyles.wheel, Platform.OS === 'android' ? { height: '75%' } : {}]}
         pickerData={YEAR_STRINGS}
         selectedValue={String(selectedYear)}
         onValueChange={(value: string) => onYearChange(Number(value))}
@@ -170,7 +168,7 @@ function YearWheelPicker({
 const wheelStyles = StyleSheet.create({
   container: {
     flex: 1,
-    alignItems: 'center',
+    alignItems: 'center'
   },
   wheel: {
     width: '100%',
@@ -353,13 +351,15 @@ export default function RangeCalendarWithTabs({
             pointerEvents={activeTab === 'exact' ? 'auto' : 'none'}
           >
             {startDate && endDate && withHint && (
-              <Text style={{
-                color: Colors.TEXT_GRAY,
-                fontSize: 12,
-                textAlign: 'center',
-                fontWeight: '500',
-                marginBottom: 8
-              }}>
+              <Text
+                style={{
+                  color: Colors.TEXT_GRAY,
+                  fontSize: 12,
+                  textAlign: 'center',
+                  fontWeight: '500',
+                  marginBottom: 8
+                }}
+              >
                 Double-tap to mark the first day of your trip.
               </Text>
             )}
@@ -445,12 +445,8 @@ export default function RangeCalendarWithTabs({
             style={[StyleSheet.absoluteFill, { opacity: activeTab === 'approx' ? 1 : 0 }]}
             pointerEvents={activeTab === 'approx' ? 'auto' : 'none'}
           >
-            <YearWheelPicker
-              selectedYear={selectedYear}
-              onYearChange={setSelectedYear}
-            />
+            <YearWheelPicker selectedYear={selectedYear} onYearChange={setSelectedYear} />
           </View>
-
         </View>
       </View>