added independent rtl support

Author: rghorbani

README.md

@@ -80,6 +80,7 @@ const styles = StyleSheet.create({
 ## PersianCalendarPicker props
 | Prop | Type | Description |
 :------------ |:---------------| :-----|
+| **`rtl`** | `Boolean` | Optional. Force layout to be rtl. Default is `false` |
 | **`weekdays`** | `Array` | Optional. List of week days. Eg. `['Sat', 'Sun', ...]` Must be 7 days |
 | **`months`** | `Array` | Optional. List of months names. Eg. `['Farvardin', 'Ordibehesht', ...]` Must be 12 months |
 | **`allowRangeSelection`** | `Boolean` | Optional. Allow to select date ranges. Default is `false` |

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-persian-calendar-picker",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "Persian (Jalaali) Calendar Picker Component for React Native",
   "main": "src/index.js",
   "scripts": {

src/index.js

@@ -27,6 +27,14 @@ const _swipeConfig = {
 };
 
 class PersianCalendarPicker extends React.Component {
+  static defaultProps = {
+    rtl: false,
+    initialDate: jMoment.utc(),
+    scaleFactor: 375,
+    enableSwipe: true,
+    onDateChange: () => console.log('onDateChange() not provided'),
+  };
+
   constructor(props) {
     super(props);
     this.state = {
@@ -46,13 +54,6 @@ class PersianCalendarPicker extends React.Component {
     this.onSwipe = this.onSwipe.bind(this);
   }
 
-  static defaultProps = {
-    initialDate: jMoment.utc(),
-    scaleFactor: 375,
-    enableSwipe: true,
-    onDateChange: () => console.log('onDateChange() not provided'),
-  };
-
   componentDidUpdate(prevProps, prevState) {
     let newStyles = {};
     let doStateUpdate = false;
@@ -89,6 +90,7 @@ class PersianCalendarPicker extends React.Component {
 
   updateScaledStyles(props) {
     const {
+      rtl,
       scaleFactor,
       selectedDayColor,
       selectedDayTextColor,
@@ -100,7 +102,7 @@ class PersianCalendarPicker extends React.Component {
     const containerWidth = width ? width : Dimensions.get('window').width;
     const containerHeight = height ? height : Dimensions.get('window').height;
     const initialScale = Math.min(containerWidth, containerHeight) / scaleFactor;
-    return {styles: makeStyles(initialScale, selectedDayColor, selectedDayTextColor, todayBackgroundColor)};
+    return {styles: makeStyles({rtl, initialScale, selectedDayColor, selectedDayTextColor, todayBackgroundColor})};
   }
 
   updateMonthYear(initialDate = this.props.initialDate) {

src/style.js

@@ -13,7 +13,7 @@ const DEFAULT_SELECTED_BACKGROUND_COLOR = '#5ce600';
 const DEFAULT_SELECTED_TEXT_COLOR = '#000000';
 const DEFAULT_TODAY_BACKGROUD_COLOR = '#CCCCCC';
 
-function makeStyles(scaler, backgroundColor, textColor, todayBackgroundColor) {
+function makeStyles({rtl, initialScale: scaler, backgroundColor, textColor, todayBackgroundColor}) {
   const SELECTED_BG_COLOR = backgroundColor ? backgroundColor : DEFAULT_SELECTED_BACKGROUND_COLOR;
   const SELECTED_TEXT_COLOR = textColor ? textColor : DEFAULT_SELECTED_TEXT_COLOR;
   const TODAY_BG_COLOR = todayBackgroundColor ? todayBackgroundColor : DEFAULT_TODAY_BACKGROUD_COLOR;
@@ -43,7 +43,7 @@ function makeStyles(scaler, backgroundColor, textColor, todayBackgroundColor) {
     },
 
     dayLabelsWrapper: {
-      flexDirection: 'row',
+      flexDirection: rtl ? 'row-reverse' : 'row',
       borderBottomWidth: 1,
       borderTopWidth: 1,
       paddingTop: 10 * scaler,
@@ -133,7 +133,7 @@ function makeStyles(scaler, backgroundColor, textColor, todayBackgroundColor) {
 
     headerWrapper: {
       alignItems: 'center',
-      flexDirection: 'row',
+      flexDirection: rtl ? 'row-reverse' : 'row',
       alignSelf: 'center',
       padding: 5 * scaler,
       paddingBottom: 3 * scaler,
@@ -147,11 +147,11 @@ function makeStyles(scaler, backgroundColor, textColor, todayBackgroundColor) {
     },
 
     prev: {
-      textAlign: 'left',
+      textAlign: rtl ? 'right' : 'left',
     },
 
     next: {
-      textAlign: 'right',
+      textAlign: rtl ? 'left' : 'right',
     },
 
     yearLabel: {
@@ -166,7 +166,7 @@ function makeStyles(scaler, backgroundColor, textColor, todayBackgroundColor) {
     },
 
     weekRow: {
-      flexDirection: 'row',
+      flexDirection: rtl ? 'row-reverse' : 'row',
     },
 
     disabledText: {