diff --git a/RNTester/js/RTLExample.js b/RNTester/js/RTLExample.js
index cde83d090..c7cf4930b 100644
--- a/RNTester/js/RTLExample.js
+++ b/RNTester/js/RTLExample.js
@@ -7,6 +7,7 @@
* of patent rights can be found in the PATENTS file in the same directory.
*
* @flow
+ * @format
* @providesModule RTLExample
*/
'use strict';
@@ -26,10 +27,10 @@ const {
TouchableWithoutFeedback,
Switch,
View,
+ Button,
} = ReactNative;
const Platform = require('Platform');
-
const RNTesterPage = require('./RNTesterPage');
const RNTesterBlock = require('./RNTesterBlock');
@@ -48,57 +49,46 @@ const IMAGE_SIZE = [IMAGE_DIMENSION, IMAGE_DIMENSION];
const IS_RTL = I18nManager.isRTL;
function ListItem(props) {
- return (
+ return (
-
-
-
-
-
-
- Text
- Text
- Text
-
-
-
-
-
-
- Button
-
-
-
-
- );
+
+
+
+
+
+ Text Text Text
+
+
+
+
+ Button
+
+
+
+ );
}
function TextAlignmentExample(props) {
return (
-
-
-
- Left-to-Right language without text alignment.
-
-
- {'\u0645\u0646 \u0627\u0644\u064A\u0645\u064A\u0646 ' +
- '\u0625\u0644\u0649 \u0627\u0644\u064A\u0633\u0627\u0631 ' +
- '\u0627\u0644\u0644\u063A\u0629 \u062F\u0648\u0646 ' +
- '\u0645\u062D\u0627\u0630\u0627\u0629 \u0627\u0644\u0646\u0635'}
-
-
- {'\u05DE\u05D9\u05DE\u05D9\u05DF \u05DC\u05E9\u05DE\u05D0\u05DC ' +
- '\u05D4\u05E9\u05E4\u05D4 \u05D1\u05DC\u05D9 ' +
- '\u05D9\u05D9\u05E9\u05D5\u05E8 \u05D8\u05E7\u05E1\u05D8'}
-
-
-
- );
+
+
+
+ Left-to-Right language without text alignment.
+
+
+ {'\u0645\u0646 \u0627\u0644\u064A\u0645\u064A\u0646 ' +
+ '\u0625\u0644\u0649 \u0627\u0644\u064A\u0633\u0627\u0631 ' +
+ '\u0627\u0644\u0644\u063A\u0629 \u062F\u0648\u0646 ' +
+ '\u0645\u062D\u0627\u0630\u0627\u0629 \u0627\u0644\u0646\u0635'}
+
+
+ {'\u05DE\u05D9\u05DE\u05D9\u05DF \u05DC\u05E9\u05DE\u05D0\u05DC ' +
+ '\u05D4\u05E9\u05E4\u05D4 \u05D1\u05DC\u05D9 ' +
+ '\u05D9\u05D9\u05E9\u05D5\u05E8 \u05D8\u05E7\u05E1\u05D8'}
+
+
+
+ );
}
function AnimationBlock(props) {
@@ -114,6 +104,276 @@ function AnimationBlock(props) {
);
}
+type RTLSwitcherComponentState = {|
+ isRTL: boolean,
+|};
+
+function withRTLState(Component) {
+ return class extends React.Component<*, RTLSwitcherComponentState> {
+ constructor(...args) {
+ super(...args);
+ this.state = {
+ isRTL: IS_RTL,
+ };
+ }
+
+ render() {
+ const setRTL = isRTL => this.setState({isRTL: isRTL});
+ return ;
+ }
+ };
+}
+
+const RTLToggler = ({isRTL, setRTL}) => {
+ if (Platform.OS === 'android') {
+ return {isRTL ? 'RTL' : 'LTR'};
+ }
+
+ const toggleRTL = () => setRTL(!isRTL);
+ return (
+
+ );
+};
+
+const PaddingExample = withRTLState(({isRTL, setRTL}) => {
+ const color = 'teal';
+
+ return (
+
+ Styles
+ paddingStart: 50,
+ paddingEnd: 10
+
+ Demo:
+ The {color} is padding.
+
+
+
+
+
+
+ );
+});
+
+const MarginExample = withRTLState(({isRTL, setRTL}) => {
+ return (
+
+ Styles
+ marginStart: 50,
+ marginEnd: 10
+
+ Demo:
+ The green is margin.
+
+
+
+
+
+
+ );
+});
+
+const PositionExample = withRTLState(({isRTL, setRTL}) => {
+ return (
+
+ Styles
+ start: 50
+
+ Demo:
+ The orange is position.
+
+
+
+
+
+
+ Styles
+ end: 50
+
+ Demo:
+ The orange is position.
+
+
+
+
+
+
+ );
+});
+
+const BorderWidthExample = withRTLState(({isRTL, setRTL}) => {
+ return (
+
+ Styles
+ borderStartWidth: 10,
+ borderEndWidth: 50
+
+ Demo:
+
+
+
+
+
+
+
+
+ );
+});
+
+const BorderColorExample = withRTLState(({isRTL, setRTL}) => {
+ return (
+
+ Styles
+ borderStartColor: 'red',
+ borderEndColor: 'green',
+
+ Demo:
+
+
+
+
+
+
+
+
+ );
+});
+
+const BorderRadiiExample = withRTLState(({isRTL, setRTL}) => {
+ return (
+
+ Styles
+ borderTopStartRadius: 10,
+ borderTopEndRadius: 20,
+ borderBottomStartRadius: 30,
+ borderBottomEndRadius: 40
+
+ Demo:
+
+
+
+
+
+
+
+
+ );
+});
+
+const BorderExample = withRTLState(({isRTL, setRTL}) => {
+ return (
+
+ Styles
+ borderStartColor: 'red',
+ borderEndColor: 'green',
+ borderStartWidth: 10,
+ borderEndWidth: 50,
+ borderTopStartRadius: 10,
+ borderTopEndRadius: 20,
+ borderBottomStartRadius: 30,
+ borderBottomEndRadius: 40
+
+ Demo:
+
+
+
+
+
+
+
+
+ );
+});
+
class RTLExample extends React.Component {
static title = 'RTLExample';
static description = 'Examples to show how to apply components to RTL layout.';
@@ -127,9 +387,7 @@ class RTLExample extends React.Component {
this._panResponder = PanResponder.create({
onStartShouldSetPanResponder: () => true,
onPanResponderGrant: this._onPanResponderGrant,
- onPanResponderMove: Animated.event([
- null, {dx: pan.x, dy: pan.y},
- ]),
+ onPanResponderMove: Animated.event([null, {dx: pan.x, dy: pan.y}]),
onPanResponderRelease: this._onPanResponderEnd,
onPanResponderTerminate: this._onPanResponderEnd,
});
@@ -149,9 +407,9 @@ class RTLExample extends React.Component {
style={[
styles.container,
// `direction` property is supported only on iOS now.
- Platform.OS === 'ios' ?
- {direction: this.state.isRTL ? 'rtl' : 'ltr'} :
- null
+ Platform.OS === 'ios'
+ ? {direction: this.state.isRTL ? 'rtl' : 'ltr'}
+ : null,
]}
onLayout={this._onLayout}>
@@ -164,21 +422,20 @@ class RTLExample extends React.Component {
-
- forceRTL
-
+ forceRTL
+ value={this.state.isRTL}
+ />
-
-
+
+
{
imgStyle={{
transform: [
{translateX: this.state.linear},
- {scaleX: IS_RTL ? -1 : 1}
- ]
+ {scaleX: IS_RTL ? -1 : 1},
+ ],
}}
/>
+
+
+
+
+
+
+
);
@@ -256,10 +520,11 @@ class RTLExample extends React.Component {
_onDirectionChange = () => {
I18nManager.forceRTL(!this.state.isRTL);
this.setState({isRTL: !this.state.isRTL});
- Alert.alert('Reload this page',
- 'Please reload this page to change the UI direction! ' +
- 'All examples in this app will be affected. ' +
- 'Check them out to see what they look like in RTL layout.'
+ Alert.alert(
+ 'Reload this page',
+ 'Please reload this page to change the UI direction! ' +
+ 'All examples in this app will be affected. ' +
+ 'Check them out to see what they look like in RTL layout.',
);
};
@@ -272,7 +537,7 @@ class RTLExample extends React.Component {
});
const offset = IMAGE_SIZE[0] / SCALE / 2 + 10;
const toMaxDistance =
- (IS_RTL ? -1 : 1) * (this.state.windowWidth / 2 - offset);
+ (IS_RTL ? -1 : 1) * (this.state.windowWidth / 2 - offset);
Animated.timing(this.state.linear, {
toValue: this.state.toggleStatus[refName] ? toMaxDistance : 0,
duration: 2000,
@@ -387,10 +652,10 @@ const styles = StyleSheet.create({
justifyContent: 'center',
alignItems: 'center',
},
- fontSizeSmall:{
+ fontSizeSmall: {
fontSize: 10,
},
- fontSizeExtraSmall:{
+ fontSizeExtraSmall: {
fontSize: 8,
},
textAlignLeft: {
@@ -405,6 +670,15 @@ const styles = StyleSheet.create({
flexDirectionRow: {
flexDirection: 'row',
},
+ bold: {
+ fontWeight: 'bold',
+ },
+ rtlToggler: {
+ color: 'gray',
+ padding: 8,
+ textAlign: 'center',
+ fontWeight: '500',
+ },
});
module.exports = RTLExample;