Fix issue with reversed scroll offset values on Android RTL

geraldlee2001 · Mar 24, 2021 · 6fdd21e · 6fdd21e
1 parent 66f1eff
commit 6fdd21e
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 13 deletions.
diff --git a/example/src/app.js b/example/src/app.js
@@ -1,9 +1,11 @@
 import './wdyr'; // <--- must be first import
 
 import {Navigation} from 'react-native-navigation';
+// import {I18nManager} from 'react-native'; // <--- In order to test RTL
 import {LocaleConfig} from 'react-native-calendars';
 import {registerScreens} from './screens';
 
+// I18nManager.forceRTL(true); // <--- In order to test RTL
 registerScreens();
 // eslint-disable-next-line no-console
 console.ignoredYellowBox = ['Remote debugger'];

diff --git a/src/expandableCalendar/weekCalendar.js b/src/expandableCalendar/weekCalendar.js
@@ -11,10 +11,10 @@ import Week from '../expandableCalendar/week';
 import asCalendarConsumer from './asCalendarConsumer';
 import {weekDayNames} from '../dateutils';
 
-
 const commons = require('./commons');
 const UPDATE_SOURCES = commons.UPDATE_SOURCES;
 const NUMBER_OF_PAGES = 2; // must be a positive number
+const applyAndroidRtlFix = commons.isAndroid && commons.isRTL;
 
 /**
  * @description: Week calendar component
@@ -37,7 +37,7 @@ class WeekCalendar extends Component {
   static defaultProps = {
     firstDay: 0,
     allowShadow: true
-  }
+  };
 
   constructor(props) {
     super(props);
@@ -46,6 +46,8 @@ class WeekCalendar extends Component {
 
     this.list = React.createRef();
     this.page = NUMBER_OF_PAGES;
+    // On Android+RTL there's an initial scroll that cause issues
+    this.firstAndroidRTLScrollIgnored = !applyAndroidRtlFix;
 
     this.state = {
       items: this.getDatesArray()
@@ -86,7 +88,7 @@ class WeekCalendar extends Component {
     // leave the current date in the visible week as is
     const dd = weekIndex === 0 ? d : d.addDays(firstDay - dayOfTheWeek);
     const newDate = dd.addWeeks(weekIndex);
-    return  newDate.toString('yyyy-MM-dd');
+    return newDate.toString('yyyy-MM-dd');
   }
 
   getMarkedDates() {
@@ -105,11 +107,27 @@ class WeekCalendar extends Component {
     return {[context.date]: {selected: true}};
   }
 
-  onDayPress = (value) => {
+  onDayPress = value => {
     _.invoke(this.props.context, 'setDate', value.dateString, UPDATE_SOURCES.DAY_PRESS);
-  }
+  };
+
+  onScroll = ({
+    nativeEvent: {
+      contentOffset: {x}
+    }
+  }) => {
+    if (!this.firstAndroidRTLScrollIgnored) {
+      this.firstAndroidRTLScrollIgnored = true;
+      return;
+    }
+
+    // Fix reversed offset on Android+RTL
+    if (applyAndroidRtlFix) {
+      const numOfPages = this.state.items.length - 1;
+      const overallWidth = numOfPages * this.containerWidth;
+      x = overallWidth - x;
+    }
 
-  onScroll = ({nativeEvent: {contentOffset: {x}}}) => {
     const newPage = Math.round(x / this.containerWidth);
 
     if (this.page !== newPage) {
@@ -130,7 +148,7 @@ class WeekCalendar extends Component {
         this.setState({items: [...items]});
       }
     }
-  }
+  };
 
   onMomentumScrollEnd = () => {
     const {items} = this.state;
@@ -156,7 +174,7 @@ class WeekCalendar extends Component {
         this.setState({items: [...items]});
       }, 100);
     }
-  }
+  };
 
   renderItem = ({item}) => {
     const {calendarWidth, style, onDayPress, ...others} = this.props;
@@ -171,15 +189,15 @@ class WeekCalendar extends Component {
         onDayPress={onDayPress || this.onDayPress}
       />
     );
-  }
+  };
 
   getItemLayout = (data, index) => {
     return {
       length: this.containerWidth,
       offset: this.containerWidth * index,
       index
     };
-  }
+  };
 
   keyExtractor = (item, index) => index.toString();
 
@@ -193,8 +211,11 @@ class WeekCalendar extends Component {
       firstDay
     });
     return (
-      <View testID={this.props.testID} style={[allowShadow && this.style.containerShadow, !hideDayNames && {paddingBottom: 6}]}>
-        {!hideDayNames &&
+      <View
+        testID={this.props.testID}
+        style={[allowShadow && this.style.containerShadow, !hideDayNames && {paddingBottom: 6}]}
+      >
+        {!hideDayNames && (
           <View style={[this.style.week, {marginTop: 12, marginBottom: -2}]}>
             {/* {this.props.weekNumbers && <Text allowFontScaling={false} style={this.style.dayHeader}></Text>} */}
             {weekDaysNames.map((day, idx) => (
@@ -210,7 +231,8 @@ class WeekCalendar extends Component {
                 {day}
               </Text>
             ))}
-          </View>}
+          </View>
+        )}
         <FlatList
           ref={this.list}
           data={items}