refactor: rewrite VirtualizedList to ScrollView to prevent calculations

Author: RichardLindhout

example/android/app/build.gradle

@@ -1,5 +1,5 @@
 project.ext.vectoricons = [
-    iconFontNames: [ 'MaterialIcons.ttf', 'EvilIcons.ttf' ] // Name of the font files you want to copy
+    iconFontNames: [ 'MaterialCommunityIcons.ttf'] // Name of the font files you want to copy
 ]
 
 apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

example/src/App.tsx

@@ -7,6 +7,7 @@ import {
   Linking,
   Image,
   Animated,
+  // I18nManager,
 } from 'react-native';
 import {
   Title,
@@ -44,6 +45,7 @@ function App({
   onToggleDarkMode: () => any;
   dark: boolean;
 }) {
+  // I18nManager.forceRTL(true);
   const theme = useTheme();
   const dateFormatter = new Intl.DateTimeFormat(undefined, {
     day: 'numeric',
@@ -257,26 +259,30 @@ function App({
           </View>
           <Enter />
         </Animated.View>
-        <View style={styles.content}>
-          <Title>Inside page</Title>
-        </View>
-        <Animated.View
-          style={[
-            styles.content,
-            styles.contentShadow,
-            styles.contentInline,
-            { backgroundColor },
-          ]}
-        >
-          <DatePickerModalContent
-            // locale={'en'} optional, default: automatic
-            mode="range"
-            onDismiss={onDismissRange}
-            startDate={range.startDate}
-            endDate={range.endDate}
-            onConfirm={onChangeRange}
-          />
-        </Animated.View>
+        {Platform.OS === 'web' ? (
+          <>
+            <View style={styles.content}>
+              <Title>Inside page</Title>
+            </View>
+            <Animated.View
+              style={[
+                styles.content,
+                styles.contentShadow,
+                styles.contentInline,
+                { backgroundColor },
+              ]}
+            >
+              <DatePickerModalContent
+                // locale={'en'} optional, default: automatic
+                mode="range"
+                onDismiss={onDismissRange}
+                startDate={range.startDate}
+                endDate={range.endDate}
+                onConfirm={onChangeRange}
+              />
+            </Animated.View>
+          </>
+        ) : null}
         <Enter />
         <Enter />
         <Enter />
@@ -316,7 +322,7 @@ function App({
         mode="single"
         visible={singleOpen}
         onDismiss={onDismissSingle}
-        date={undefined}
+        date={date}
         onConfirm={onChangeSingle}
         // saveLabel="Save" // optional
         // label="Select date" // optional

example/yarn.lock

@@ -4,7 +4,12 @@ import { StyleSheet, View } from 'react-native'
 import Swiper from './Swiper'
 
 import Month from './Month'
-import { areDatesOnSameDay, dateToUnix, DisableWeekDaysType } from './dateUtils'
+import {
+  areDatesOnSameDay,
+  dateToUnix,
+  DisableWeekDaysType,
+  getInitialIndex,
+} from './dateUtils'
 
 import CalendarHeader from './CalendarHeader'
 import { useCallback, useMemo } from 'react'
@@ -146,6 +151,7 @@ function Calendar(
   return (
     <View style={styles.root}>
       <Swiper
+        initialIndex={getInitialIndex(startDate || date)}
         selectedYear={selectedYear}
         scrollMode={scrollMode}
         renderItem={({ index }) => (
@@ -158,7 +164,6 @@ function Calendar(
             endDate={endDate}
             date={date}
             onPressYear={onPressYear}
-            selectedYear={selectedYear}
             selectingYear={selectingYear}
             onPressDate={onPressDate}
             scrollMode={scrollMode}

src/Date/Calendar.tsx

@@ -3,14 +3,14 @@ import { Text, TouchableRipple, useTheme } from 'react-native-paper'
 import { StyleSheet, View } from 'react-native'
 import DayRange from './DayRange'
 import { daySize } from './dateUtils'
-import { useTextColorOnPrimary } from '../utils'
 
 function EmptyDayPure() {
   return <View style={styles.empty} />
 }
 export const EmptyDay = React.memo(EmptyDayPure)
 
 function Day(props: {
+  textColorOnPrimary: string
   day: number
   month: number
   year: number
@@ -39,16 +39,21 @@ function Day(props: {
     isToday,
     disabled,
     excluded,
+    textColorOnPrimary,
   } = props
   const theme = useTheme()
   const onPress = React.useCallback(() => {
     onPressDate(new Date(year, month, day))
   }, [onPressDate, year, month, day])
-  const color = useTextColorOnPrimary()
 
   const borderColor =
-    selected || (inRange && theme.dark) ? color : theme.dark ? '#fff' : '#000'
-  const textColor = selected || (inRange && theme.dark) ? color : undefined
+    selected || (inRange && theme.dark)
+      ? textColorOnPrimary
+      : theme.dark
+      ? '#fff'
+      : '#000'
+  const textColor =
+    selected || (inRange && theme.dark) ? textColorOnPrimary : undefined
 
   return (
     <View style={[styles.root, disabled && styles.disabled]}>
@@ -78,6 +83,7 @@ function Day(props: {
           <Text
             style={[
               excluded && styles.excludedText,
+              // @ts-ignore
               textColor && { color: textColor },
             ]}
             selectable={false}