seconds and minutes not in the right order in RTL languages(like hebarw and Arabic)

[Eliav2]

I using your component in Hebrew project language. in Hebrew, the elements are printed from right to left(RTL) in the order you specify them in the React Tree(not like English which prints the elements from left to right). this causes the seconds to be on the right instead of the left (meaning if the time that reminded is 12 minutes and 50 seconds it will be printed 50:12 instead of 12:50)

it could be very nice if there was an option to print elements from right to left. (in the term of your components instead of using flexDirection row using row-reversed)

you can also just add a containerStyle property chich will enable the user to override your default style(which currently always use flexDirection="row")

[jeffelector]

Same Problem here !
need to change the render method on renderCountDown to this:
{
I18nManager.isRTL?
<View style={{flexDirection:'row'}}>
{showSeparator && timeToShow.includes('M') && timeToShow.includes('S') ? this.renderSeparator() : null}
{timeToShow.includes('S') ? this.renderDoubleDigits(timeLabels.s, newTime[3]) : null}
{showSeparator && timeToShow.includes('H') && timeToShow.includes('M') ? this.renderSeparator() : null}
{timeToShow.includes('M') ? this.renderDoubleDigits(timeLabels.m, newTime[2]) : null}
{showSeparator && timeToShow.includes('D') && timeToShow.includes('H') ? this.renderSeparator() : null}
{timeToShow.includes('H') ? this.renderDoubleDigits(timeLabels.h, newTime[1]) : null}
{timeToShow.includes('D') ? this.renderDoubleDigits(timeLabels.d, newTime[0]) : null}

:
<View style={{flexDirection:'row'}}>
{timeToShow.includes('D') ? this.renderDoubleDigits(timeLabels.d, newTime[0]) : null}
{showSeparator && timeToShow.includes('D') && timeToShow.includes('H') ? this.renderSeparator() : null}
{timeToShow.includes('H') ? this.renderDoubleDigits(timeLabels.h, newTime[1]) : null}
{showSeparator && timeToShow.includes('H') && timeToShow.includes('M') ? this.renderSeparator() : null}
{timeToShow.includes('M') ? this.renderDoubleDigits(timeLabels.m, newTime[2]) : null}
{showSeparator && timeToShow.includes('M') && timeToShow.includes('S') ? this.renderSeparator() : null}
{timeToShow.includes('S') ? this.renderDoubleDigits(timeLabels.s, newTime[3]) : null}

          </View>
    }

this is a temp solution.. hope he will fix the problem asap.

[jeffelector]

@talalmajali

[Eliav2]

hey @jeffelector ,
i solved this by just copying the index.js file into local component file and changed timeCont style:

import { I18nManager } from "react-native";
 timeCont: {
    flexDirection: I18nManager.isRTL ? "row-reverse" : "row",
    justifyContent: "center",
  },