diff --git a/InvertibleScrollView.js b/InvertibleScrollView.js index db1ba0f..94b4fa9 100644 --- a/InvertibleScrollView.js +++ b/InvertibleScrollView.js @@ -7,6 +7,7 @@ import { ScrollView, StyleSheet, View, + I18nManager, } from 'react-native'; import ScrollableMixin from 'react-native-scrollable-mixin'; @@ -46,14 +47,20 @@ let InvertibleScrollView = React.createClass({ ...props, } = this.props; - if (inverted) { - if (this.props.horizontal) { + if (this.props.horizontal) { + if (inverted && I18nManager.isRTL) { + props.style = [styles.rtl, props.style]; + props.children = this._renderInvertedChildren(props.children, null, true); + } else if (inverted) { props.style = [styles.horizontallyInverted, props.style]; props.children = this._renderInvertedChildren(props.children, styles.horizontallyInverted); - } else { - props.style = [styles.verticallyInverted, props.style]; - props.children = this._renderInvertedChildren(props.children, styles.verticallyInverted); + } else if (I18nManager.isRTL) { + props.style = [styles.horizontallyInverted, props.style, styles.rtl]; + props.children = this._renderInvertedChildren(props.children, styles.horizontallyInverted, true); } + } else if (inverted) { + props.style = [styles.verticallyInverted, props.style]; + props.children = this._renderInvertedChildren(props.children, styles.verticallyInverted); } return cloneReferencedElement(renderScrollComponent(props), { @@ -61,14 +68,23 @@ let InvertibleScrollView = React.createClass({ }); }, - _renderInvertedChildren(children, inversionStyle) { - return React.Children.map(children, child => { + _renderInvertedChildren(children, inversionStyle, reverse) { + let mapped = React.Children.map(children, child => { return child ? {child} : child; }); + + if (reverse) { + return mapped.reverse(); + } + + return mapped; }, }); let styles = StyleSheet.create({ + rtl: { + flexDirection: I18nManager.isRTL ? 'row-reverse' : 'row', + }, verticallyInverted: { transform: [ { scaleY: -1 },