From b5006f8887b2cb568c09ebb9836ff7e53b5963bd Mon Sep 17 00:00:00 2001
From: Abdullah Bamelhes <bamlhs@hotmail.com>
Date: Fri, 29 Mar 2019 13:24:45 +0300
Subject: [PATCH] RTL Support

---
 index.js | 51 ++++++++++++++++++++++++++-------------------------
 1 file changed, 26 insertions(+), 25 deletions(-)

diff --git a/index.js b/index.js
index 689d293..cd52b61 100644
--- a/index.js
+++ b/index.js
@@ -6,15 +6,16 @@ import {
   View,
   Text,
   TouchableOpacity,
-  AppState
+  AppState,
+  I18nManager
 } from 'react-native';
 import _ from 'lodash';
-import {sprintf} from 'sprintf-js';
+import { sprintf } from 'sprintf-js';
 
-const DEFAULT_DIGIT_STYLE = {backgroundColor: '#FAB913'};
-const DEFAULT_DIGIT_TXT_STYLE = {color: '#000'};
-const DEFAULT_TIME_LABEL_STYLE = {color: '#000'};
-const DEFAULT_SEPARATOR_STYLE = {color: '#000'};
+const DEFAULT_DIGIT_STYLE = { backgroundColor: '#FAB913' };
+const DEFAULT_DIGIT_TXT_STYLE = { color: '#000' };
+const DEFAULT_TIME_LABEL_STYLE = { color: '#000' };
+const DEFAULT_SEPARATOR_STYLE = { color: '#000' };
 const DEFAULT_TIME_TO_SHOW = ['D', 'H', 'M', 'S'];
 const DEFAULT_TIME_LABELS = {
   d: 'Days',
@@ -68,7 +69,7 @@ class CountDown extends React.Component {
   }
 
   _handleAppStateChange = currentAppState => {
-    const {until, wentBackgroundAt} = this.state;
+    const { until, wentBackgroundAt } = this.state;
     if (currentAppState === 'active' && wentBackgroundAt && this.props.running) {
       const diff = (Date.now() - wentBackgroundAt) / 1000.0;
       this.setState({
@@ -77,12 +78,12 @@ class CountDown extends React.Component {
       });
     }
     if (currentAppState === 'background') {
-      this.setState({wentBackgroundAt: Date.now()});
+      this.setState({ wentBackgroundAt: Date.now() });
     }
   }
 
   getTimeLeft = () => {
-    const {until} = this.state;
+    const { until } = this.state;
     return {
       seconds: until % 60,
       minutes: parseInt(until / 60, 10) % 60,
@@ -92,7 +93,7 @@ class CountDown extends React.Component {
   };
 
   updateTimer = () => {
-    const {lastUntil, until} = this.state;
+    const { lastUntil, until } = this.state;
 
     if (lastUntil === until || !this.props.running) {
       return;
@@ -107,26 +108,26 @@ class CountDown extends React.Component {
     }
 
     if (until === 0) {
-      this.setState({lastUntil: 0, until: 0});
+      this.setState({ lastUntil: 0, until: 0 });
     } else {
       if (this.props.onChange) {
         this.props.onChange();
       }
-      this.setState({lastUntil: until, until: until - 1});
+      this.setState({ lastUntil: until, until: until - 1 });
     }
   };
 
   renderDigit = (d) => {
-    const {digitStyle, digitTxtStyle, size} = this.props;
+    const { digitStyle, digitTxtStyle, size } = this.props;
     return (
       <View style={[
         styles.digitCont,
         digitStyle,
-        {width: size * 2.3, height: size * 2.6},
+        { width: size * 2.3, height: size * 2.6 },
       ]}>
         <Text style={[
           styles.digitTxt,
-          {fontSize: size},
+          { fontSize: size },
           digitTxtStyle,
         ]}>
           {d}
@@ -136,12 +137,12 @@ class CountDown extends React.Component {
   };
 
   renderLabel = label => {
-    const {timeLabelStyle, size} = this.props;
+    const { timeLabelStyle, size } = this.props;
     if (label) {
       return (
         <Text style={[
           styles.timeTxt,
-          {fontSize: size / 1.8},
+          { fontSize: size / 1.8 },
           timeLabelStyle,
         ]}>
           {label}
@@ -162,12 +163,12 @@ class CountDown extends React.Component {
   };
 
   renderSeparator = () => {
-    const {separatorStyle, size} = this.props;
+    const { separatorStyle, size } = this.props;
     return (
-      <View style={{justifyContent: 'center', alignItems: 'center'}}>
+      <View style={{ justifyContent: 'center', alignItems: 'center' }}>
         <Text style={[
           styles.separatorTxt,
-          {fontSize: size * 1.2},
+          { fontSize: size * 1.2 },
           separatorStyle,
         ]}>
           {':'}
@@ -177,9 +178,9 @@ class CountDown extends React.Component {
   };
 
   renderCountDown = () => {
-    const {timeToShow, timeLabels, showSeparator} = this.props;
-    const {until} = this.state;
-    const {days, hours, minutes, seconds} = this.getTimeLeft();
+    const { timeToShow, timeLabels, showSeparator } = this.props;
+    const { until } = this.state;
+    const { days, hours, minutes, seconds } = this.getTimeLeft();
     const newTime = sprintf('%02d:%02d:%02d:%02d', days, hours, minutes, seconds).split(':');
     const Component = this.props.onPress ? TouchableOpacity : View;
 
@@ -223,7 +224,7 @@ CountDown.defaultProps = {
 
 const styles = StyleSheet.create({
   timeCont: {
-    flexDirection: 'row',
+    flexDirection: (I18nManager.isRTL) ? 'row-reverse' : 'row',
     justifyContent: 'center',
   },
   timeTxt: {
@@ -232,7 +233,7 @@ const styles = StyleSheet.create({
     backgroundColor: 'transparent',
   },
   timeInnerCont: {
-    flexDirection: 'row',
+    flexDirection: (I18nManager.isRTL) ? 'row-reverse' : 'row',
     justifyContent: 'center',
     alignItems: 'center',
   },