Circle animation with RTL locales

[Orijinn]

Hi,

the animation is broken when a device uses an RTL locale.

[MrToph]

Thanks for reporting.

[diamanthaxhimusa]

I'll try to add a PR for this issue, the solution is to import I18nManager, and then edit the following: Edit the StyleSheet, add right: 0 to both styles. leftWrap: { position: 'absolute', top: 0, left: 0, right: 0, }, halfCircle: { position: 'absolute', top: 0, left: 0, right: 0, borderTopRightRadius: 0, borderBottomRightRadius: 0, backgroundColor: '#f00', },

renderHalfCircle() function: renderHalfCircle({ rotate, backgroundColor }) { const { radius } = this.props return ( <View style={[ styles.leftWrap, { width: radius, height: radius * 2, }, ]} > <Animated.View style={[ styles.halfCircle, { width: radius, height: radius * 2, borderRadius: radius, backgroundColor, transform: [ { translateX: I18nManager.isRTL ? -radius / 2 : radius / 2 }, { rotate }, { translateX: I18nManager.isRTL ? radius / 2 : -radius / 2 }, ], }, ]} /> </View> ) } PR: #12