From be9484ec7cdd29023a24657e7ca89a1b6464f8e2 Mon Sep 17 00:00:00 2001
From: Josh Justice <me@codingitwrong.com>
Date: Fri, 8 Feb 2019 16:06:59 -0500
Subject: [PATCH 01/17] Switch Simple list item example to use local instead of
 screen-wide RTL setting

---
 RNTester/js/RTLExample.js | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/RNTester/js/RTLExample.js b/RNTester/js/RTLExample.js
index 96fe2fc8a2ac24..0c456765ff7685 100644
--- a/RNTester/js/RTLExample.js
+++ b/RNTester/js/RTLExample.js
@@ -137,6 +137,18 @@ const RTLToggler = ({isRTL, setRTL}) => {
   );
 };
 
+const SimpleListItemExample = withRTLState(({isRTL, setRTL}) => {
+  return (
+    <RNTesterBlock title={'A Simple List Item Layout'}>
+      <RTLToggler setRTL={setRTL} isRTL={isRTL} />
+      <View style={[styles.list, {direction: isRTL ? 'rtl' : 'ltr'}]}>
+        <ListItem imageSource={require('./Thumbnails/like.png')} />
+        <ListItem imageSource={require('./Thumbnails/poke.png')} />
+      </View>
+    </RNTesterBlock>
+  );
+});
+
 const PaddingExample = withRTLState(({isRTL, setRTL}) => {
   const color = 'teal';
 
@@ -426,12 +438,7 @@ class RTLExample extends React.Component<any, State> {
               </View>
             </View>
           </RNTesterBlock>
-          <RNTesterBlock title={'A Simple List Item Layout'}>
-            <View style={styles.list}>
-              <ListItem imageSource={require('./Thumbnails/like.png')} />
-              <ListItem imageSource={require('./Thumbnails/poke.png')} />
-            </View>
-          </RNTesterBlock>
+          <SimpleListItemExample />
           <TextAlignmentExample
             title={'Default Text Alignment'}
             description={

From dca79ad8beb8baad381f629ce7287105ba7b9d96 Mon Sep 17 00:00:00 2001
From: Josh Justice <me@codingitwrong.com>
Date: Fri, 8 Feb 2019 16:16:36 -0500
Subject: [PATCH 02/17] Switch TextAlignmentExample to use local RTL state

---
 RNTester/js/RTLExample.js | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/RNTester/js/RTLExample.js b/RNTester/js/RTLExample.js
index 0c456765ff7685..9a307b033216f3 100644
--- a/RNTester/js/RTLExample.js
+++ b/RNTester/js/RTLExample.js
@@ -65,10 +65,11 @@ function ListItem(props) {
   );
 }
 
-function TextAlignmentExample(props) {
+const TextAlignmentExample = withRTLState(({isRTL, setRTL, ...props}) => {
   return (
     <RNTesterBlock title={props.title} description={props.description}>
-      <View>
+      <RTLToggler setRTL={setRTL} isRTL={isRTL} />
+      <View style={{direction: isRTL ? 'rtl' : 'ltr'}}>
         <Text style={props.style}>
           Left-to-Right language without text alignment.
         </Text>
@@ -86,7 +87,7 @@ function TextAlignmentExample(props) {
       </View>
     </RNTesterBlock>
   );
-}
+});
 
 function AnimationBlock(props) {
   return (
@@ -116,7 +117,9 @@ function withRTLState(Component) {
 
     render() {
       const setRTL = isRTL => this.setState({isRTL: isRTL});
-      return <Component isRTL={this.state.isRTL} setRTL={setRTL} />;
+      return (
+        <Component isRTL={this.state.isRTL} setRTL={setRTL} {...this.props} />
+      );
     }
   };
 }

From ce18cb9838a8bb98495afbe203bef0a7f9364f16 Mon Sep 17 00:00:00 2001
From: Josh Justice <me@codingitwrong.com>
Date: Fri, 8 Feb 2019 16:19:28 -0500
Subject: [PATCH 03/17] Switch IconsExample to use local RTL state

---
 RNTester/js/RTLExample.js | 52 ++++++++++++++++++++++-----------------
 1 file changed, 30 insertions(+), 22 deletions(-)

diff --git a/RNTester/js/RTLExample.js b/RNTester/js/RTLExample.js
index 9a307b033216f3..baa88a0644b94d 100644
--- a/RNTester/js/RTLExample.js
+++ b/RNTester/js/RTLExample.js
@@ -89,6 +89,35 @@ const TextAlignmentExample = withRTLState(({isRTL, setRTL, ...props}) => {
   );
 });
 
+const IconsExample = withRTLState(({isRTL, setRTL}) => {
+  return (
+    <RNTesterBlock title={'Working With Icons'}>
+      <RTLToggler setRTL={setRTL} isRTL={isRTL} />
+      <View
+        style={[styles.flexDirectionRow, {direction: isRTL ? 'rtl' : 'ltr'}]}>
+        <View>
+          <Image
+            source={require('./Thumbnails/like.png')}
+            style={styles.image}
+          />
+          <Text style={styles.fontSizeExtraSmall}>
+            Without directional meaning
+          </Text>
+        </View>
+        <View style={styles.rightAlignStyle}>
+          <Image
+            source={require('./Thumbnails/poke.png')}
+            style={[styles.image, styles.withRTLStyle]}
+          />
+          <Text style={styles.fontSizeExtraSmall}>
+            With directional meaning
+          </Text>
+        </View>
+      </View>
+    </RNTesterBlock>
+  );
+});
+
 function AnimationBlock(props) {
   return (
     <View style={styles.block}>
@@ -466,28 +495,7 @@ class RTLExample extends React.Component<any, State> {
             }
             style={[styles.fontSizeSmall, styles.textAlignRight]}
           />
-          <RNTesterBlock title={'Working With Icons'}>
-            <View style={styles.flexDirectionRow}>
-              <View>
-                <Image
-                  source={require('./Thumbnails/like.png')}
-                  style={styles.image}
-                />
-                <Text style={styles.fontSizeExtraSmall}>
-                  Without directional meaning
-                </Text>
-              </View>
-              <View style={styles.rightAlignStyle}>
-                <Image
-                  source={require('./Thumbnails/poke.png')}
-                  style={[styles.image, styles.withRTLStyle]}
-                />
-                <Text style={styles.fontSizeExtraSmall}>
-                  With directional meaning
-                </Text>
-              </View>
-            </View>
-          </RNTesterBlock>
+          <IconsExample />
           <RNTesterBlock
             title={'Controlling Animation'}
             description={'Animation direction according to layout'}>

From 06228306aa0c7c1cd08296646b27252fb4c1643d Mon Sep 17 00:00:00 2001
From: Josh Justice <me@codingitwrong.com>
Date: Fri, 8 Feb 2019 17:09:12 -0500
Subject: [PATCH 04/17] WIP

---
 RNTester/js/RTLExample.js | 45 ++++++++++++++++++++++++++-------------
 1 file changed, 30 insertions(+), 15 deletions(-)

diff --git a/RNTester/js/RTLExample.js b/RNTester/js/RTLExample.js
index baa88a0644b94d..7451800fcc9370 100644
--- a/RNTester/js/RTLExample.js
+++ b/RNTester/js/RTLExample.js
@@ -181,6 +181,32 @@ const SimpleListItemExample = withRTLState(({isRTL, setRTL}) => {
   );
 });
 
+class AnimationExample extends React.Component<any, State> {
+  constructor(props: Object) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <RNTesterBlock
+        title={'Controlling Animation'}
+        description={'Animation direction according to layout'}>
+        <View style={styles.view}>
+          <AnimationBlock
+            onPress={this.props.linearTap}
+            imgStyle={{
+              transform: [
+                {translateX: this.props.linear},
+                {scaleX: IS_RTL ? -1 : 1},
+              ],
+            }}
+          />
+        </View>
+      </RNTesterBlock>
+    );
+  }
+}
+
 const PaddingExample = withRTLState(({isRTL, setRTL}) => {
   const color = 'teal';
 
@@ -496,21 +522,10 @@ class RTLExample extends React.Component<any, State> {
             style={[styles.fontSizeSmall, styles.textAlignRight]}
           />
           <IconsExample />
-          <RNTesterBlock
-            title={'Controlling Animation'}
-            description={'Animation direction according to layout'}>
-            <View style={styles.view}>
-              <AnimationBlock
-                onPress={this._linearTap}
-                imgStyle={{
-                  transform: [
-                    {translateX: this.state.linear},
-                    {scaleX: IS_RTL ? -1 : 1},
-                  ],
-                }}
-              />
-            </View>
-          </RNTesterBlock>
+          <AnimationExample
+            linearTap={this._linearTap}
+            linear={this.state.linear}
+          />
           <PaddingExample />
           <MarginExample />
           <PositionExample />

From 4fec69baea2d8ecd15d985c9e90e4e5c9f19573e Mon Sep 17 00:00:00 2001
From: Josh Justice <me@codingitwrong.com>
Date: Fri, 8 Feb 2019 17:14:59 -0500
Subject: [PATCH 05/17] WIP reversed

---
 RNTester/js/RTLExample.js | 32 ++++++++++++++++++++++++++------
 1 file changed, 26 insertions(+), 6 deletions(-)

diff --git a/RNTester/js/RTLExample.js b/RNTester/js/RTLExample.js
index 7451800fcc9370..24ffb36f01bf49 100644
--- a/RNTester/js/RTLExample.js
+++ b/RNTester/js/RTLExample.js
@@ -184,6 +184,12 @@ const SimpleListItemExample = withRTLState(({isRTL, setRTL}) => {
 class AnimationExample extends React.Component<any, State> {
   constructor(props: Object) {
     super(props);
+
+    this.state = {
+      toggleStatus: {},
+      linear: new Animated.Value(0),
+      windowWidth: 0,
+    };
   }
 
   render() {
@@ -193,10 +199,10 @@ class AnimationExample extends React.Component<any, State> {
         description={'Animation direction according to layout'}>
         <View style={styles.view}>
           <AnimationBlock
-            onPress={this.props.linearTap}
+            onPress={this._linearTap}
             imgStyle={{
               transform: [
-                {translateX: this.props.linear},
+                {translateX: this.state.linear},
                 {scaleX: IS_RTL ? -1 : 1},
               ],
             }}
@@ -205,6 +211,23 @@ class AnimationExample extends React.Component<any, State> {
       </RNTesterBlock>
     );
   }
+
+  _linearTap = (e: Object) => {
+    this.setState({
+      toggleStatus: {
+        ...this.state.toggleStatus,
+        [e]: !this.state.toggleStatus[e],
+      },
+    });
+    const offset = IMAGE_SIZE[0] / SCALE / 2 + 10;
+    const toMaxDistance =
+      (IS_RTL ? -1 : 1) * (this.state.windowWidth / 2 - offset);
+    Animated.timing(this.state.linear, {
+      toValue: this.state.toggleStatus[e] ? toMaxDistance : 0,
+      duration: 2000,
+      useNativeDriver: true,
+    }).start();
+  };
 }
 
 const PaddingExample = withRTLState(({isRTL, setRTL}) => {
@@ -522,10 +545,7 @@ class RTLExample extends React.Component<any, State> {
             style={[styles.fontSizeSmall, styles.textAlignRight]}
           />
           <IconsExample />
-          <AnimationExample
-            linearTap={this._linearTap}
-            linear={this.state.linear}
-          />
+          <AnimationExample />
           <PaddingExample />
           <MarginExample />
           <PositionExample />

From 53dec6d97cd4b1c253a475179b8811488f743d61 Mon Sep 17 00:00:00 2001
From: Josh Justice <me@codingitwrong.com>
Date: Fri, 8 Feb 2019 17:15:32 -0500
Subject: [PATCH 06/17] Set window width

---
 RNTester/js/RTLExample.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/RNTester/js/RTLExample.js b/RNTester/js/RTLExample.js
index 24ffb36f01bf49..8eb9c47a15f0be 100644
--- a/RNTester/js/RTLExample.js
+++ b/RNTester/js/RTLExample.js
@@ -197,7 +197,7 @@ class AnimationExample extends React.Component<any, State> {
       <RNTesterBlock
         title={'Controlling Animation'}
         description={'Animation direction according to layout'}>
-        <View style={styles.view}>
+        <View style={styles.view} onLayout={this._onLayout}>
           <AnimationBlock
             onPress={this._linearTap}
             imgStyle={{
@@ -212,6 +212,12 @@ class AnimationExample extends React.Component<any, State> {
     );
   }
 
+  _onLayout = (e: Object) => {
+    this.setState({
+      windowWidth: e.nativeEvent.layout.width,
+    });
+  };
+
   _linearTap = (e: Object) => {
     this.setState({
       toggleStatus: {

From 2c51c43c17c65f2616f803953af13ff2910476b7 Mon Sep 17 00:00:00 2001
From: Josh Justice <me@codingitwrong.com>
Date: Fri, 8 Feb 2019 17:19:04 -0500
Subject: [PATCH 07/17] Remove unnecessary code from parent

---
 RNTester/js/RTLExample.js | 30 +-----------------------------
 1 file changed, 1 insertion(+), 29 deletions(-)

diff --git a/RNTester/js/RTLExample.js b/RNTester/js/RTLExample.js
index 8eb9c47a15f0be..38c70262420cd1 100644
--- a/RNTester/js/RTLExample.js
+++ b/RNTester/js/RTLExample.js
@@ -36,7 +36,6 @@ type State = {
   pan: Object,
   linear: Object,
   isRTL: boolean,
-  windowWidth: number,
 };
 
 const SCALE = PixelRatio.get();
@@ -486,11 +485,8 @@ class RTLExample extends React.Component<any, State> {
     });
 
     this.state = {
-      toggleStatus: {},
       pan,
-      linear: new Animated.Value(0),
       isRTL: IS_RTL,
-      windowWidth: 0,
     };
   }
 
@@ -503,8 +499,7 @@ class RTLExample extends React.Component<any, State> {
           Platform.OS === 'ios'
             ? {direction: this.state.isRTL ? 'rtl' : 'ltr'}
             : null,
-        ]}
-        onLayout={this._onLayout}>
+        ]}>
         <RNTesterPage title={'Right-to-Left (RTL) UI Layout'}>
           <RNTesterBlock title={'Current Layout Direction'}>
             <View style={styles.directionBox}>
@@ -564,12 +559,6 @@ class RTLExample extends React.Component<any, State> {
     );
   }
 
-  _onLayout = (e: Object) => {
-    this.setState({
-      windowWidth: e.nativeEvent.layout.width,
-    });
-  };
-
   _onDirectionChange = () => {
     I18nManager.forceRTL(!this.state.isRTL);
     this.setState({isRTL: !this.state.isRTL});
@@ -581,23 +570,6 @@ class RTLExample extends React.Component<any, State> {
     );
   };
 
-  _linearTap = (e: Object) => {
-    this.setState({
-      toggleStatus: {
-        ...this.state.toggleStatus,
-        [e]: !this.state.toggleStatus[e],
-      },
-    });
-    const offset = IMAGE_SIZE[0] / SCALE / 2 + 10;
-    const toMaxDistance =
-      (IS_RTL ? -1 : 1) * (this.state.windowWidth / 2 - offset);
-    Animated.timing(this.state.linear, {
-      toValue: this.state.toggleStatus[e] ? toMaxDistance : 0,
-      duration: 2000,
-      useNativeDriver: true,
-    }).start();
-  };
-
   _onPanResponderGrant = (e: Object, gestureState: Object) => {
     this.state.pan.stopAnimation(value => {
       this.state.pan.setOffset(value);

From 78200e69a22db8a6c9bd48816adc59bd009d7a0f Mon Sep 17 00:00:00 2001
From: Josh Justice <me@codingitwrong.com>
Date: Fri, 8 Feb 2019 17:19:56 -0500
Subject: [PATCH 08/17] Wrap animation example

---
 RNTester/js/RTLExample.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/RNTester/js/RTLExample.js b/RNTester/js/RTLExample.js
index 38c70262420cd1..52fd8112c79f90 100644
--- a/RNTester/js/RTLExample.js
+++ b/RNTester/js/RTLExample.js
@@ -180,6 +180,10 @@ const SimpleListItemExample = withRTLState(({isRTL, setRTL}) => {
   );
 });
 
+const AnimationContainer = withRTLState(({isRTL, setRTL}) => {
+  return <AnimationExample />;
+});
+
 class AnimationExample extends React.Component<any, State> {
   constructor(props: Object) {
     super(props);
@@ -546,7 +550,7 @@ class RTLExample extends React.Component<any, State> {
             style={[styles.fontSizeSmall, styles.textAlignRight]}
           />
           <IconsExample />
-          <AnimationExample />
+          <AnimationContainer />
           <PaddingExample />
           <MarginExample />
           <PositionExample />

From 1ecd9b8d0423f12eb2e2d56312304f3a5d95d95a Mon Sep 17 00:00:00 2001
From: Josh Justice <me@codingitwrong.com>
Date: Fri, 8 Feb 2019 17:21:36 -0500
Subject: [PATCH 09/17] Make animation direction controlled by local RTL
 setting

---
 RNTester/js/RTLExample.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/RNTester/js/RTLExample.js b/RNTester/js/RTLExample.js
index 52fd8112c79f90..9ad7a6636ba15a 100644
--- a/RNTester/js/RTLExample.js
+++ b/RNTester/js/RTLExample.js
@@ -181,7 +181,7 @@ const SimpleListItemExample = withRTLState(({isRTL, setRTL}) => {
 });
 
 const AnimationContainer = withRTLState(({isRTL, setRTL}) => {
-  return <AnimationExample />;
+  return <AnimationExample isRTL={isRTL} setRTL={setRTL} />;
 });
 
 class AnimationExample extends React.Component<any, State> {
@@ -200,13 +200,14 @@ class AnimationExample extends React.Component<any, State> {
       <RNTesterBlock
         title={'Controlling Animation'}
         description={'Animation direction according to layout'}>
+        <RTLToggler setRTL={this.props.setRTL} isRTL={this.props.isRTL} />
         <View style={styles.view} onLayout={this._onLayout}>
           <AnimationBlock
             onPress={this._linearTap}
             imgStyle={{
               transform: [
                 {translateX: this.state.linear},
-                {scaleX: IS_RTL ? -1 : 1},
+                {scaleX: this.props.isRTL ? -1 : 1},
               ],
             }}
           />
@@ -230,7 +231,7 @@ class AnimationExample extends React.Component<any, State> {
     });
     const offset = IMAGE_SIZE[0] / SCALE / 2 + 10;
     const toMaxDistance =
-      (IS_RTL ? -1 : 1) * (this.state.windowWidth / 2 - offset);
+      (this.props.isRTL ? -1 : 1) * (this.state.windowWidth / 2 - offset);
     Animated.timing(this.state.linear, {
       toValue: this.state.toggleStatus[e] ? toMaxDistance : 0,
       duration: 2000,

From 6ad635914fc71abf267f59bb29fbffe00d5aebae Mon Sep 17 00:00:00 2001
From: Josh Justice <me@codingitwrong.com>
Date: Fri, 8 Feb 2019 17:25:18 -0500
Subject: [PATCH 10/17] Remove unneeded page-wide state and examples

---
 RNTester/js/RTLExample.js | 40 +--------------------------------------
 1 file changed, 1 insertion(+), 39 deletions(-)

diff --git a/RNTester/js/RTLExample.js b/RNTester/js/RTLExample.js
index 9ad7a6636ba15a..7efacddd82ff51 100644
--- a/RNTester/js/RTLExample.js
+++ b/RNTester/js/RTLExample.js
@@ -491,40 +491,13 @@ class RTLExample extends React.Component<any, State> {
 
     this.state = {
       pan,
-      isRTL: IS_RTL,
     };
   }
 
   render() {
     return (
-      <ScrollView
-        style={[
-          styles.container,
-          // `direction` property is supported only on iOS now.
-          Platform.OS === 'ios'
-            ? {direction: this.state.isRTL ? 'rtl' : 'ltr'}
-            : null,
-        ]}>
+      <ScrollView style={styles.container}>
         <RNTesterPage title={'Right-to-Left (RTL) UI Layout'}>
-          <RNTesterBlock title={'Current Layout Direction'}>
-            <View style={styles.directionBox}>
-              <Text style={styles.directionText}>
-                {this.state.isRTL ? 'Right-to-Left' : 'Left-to-Right'}
-              </Text>
-            </View>
-          </RNTesterBlock>
-          <RNTesterBlock title={'Quickly Test RTL Layout'}>
-            <View style={styles.flexDirectionRow}>
-              <Text style={styles.switchRowTextView}>forceRTL</Text>
-              <View style={styles.switchRowSwitchView}>
-                <Switch
-                  onValueChange={this._onDirectionChange}
-                  style={styles.rightAlignStyle}
-                  value={this.state.isRTL}
-                />
-              </View>
-            </View>
-          </RNTesterBlock>
           <SimpleListItemExample />
           <TextAlignmentExample
             title={'Default Text Alignment'}
@@ -564,17 +537,6 @@ class RTLExample extends React.Component<any, State> {
     );
   }
 
-  _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.',
-    );
-  };
-
   _onPanResponderGrant = (e: Object, gestureState: Object) => {
     this.state.pan.stopAnimation(value => {
       this.state.pan.setOffset(value);

From 92eef58ddef0a7b23f576300b9bb3a87b703fbd2 Mon Sep 17 00:00:00 2001
From: Josh Justice <me@codingitwrong.com>
Date: Fri, 8 Feb 2019 17:26:00 -0500
Subject: [PATCH 11/17] Remove unused pan responder

---
 RNTester/js/RTLExample.js | 36 ------------------------------------
 1 file changed, 36 deletions(-)

diff --git a/RNTester/js/RTLExample.js b/RNTester/js/RTLExample.js
index 7efacddd82ff51..f026daeb2262a9 100644
--- a/RNTester/js/RTLExample.js
+++ b/RNTester/js/RTLExample.js
@@ -475,25 +475,6 @@ const BorderExample = withRTLState(({isRTL, setRTL}) => {
 });
 
 class RTLExample extends React.Component<any, State> {
-  _panResponder: Object;
-
-  constructor(props: Object) {
-    super(props);
-    const pan = new Animated.ValueXY();
-
-    this._panResponder = PanResponder.create({
-      onStartShouldSetPanResponder: () => true,
-      onPanResponderGrant: this._onPanResponderGrant,
-      onPanResponderMove: Animated.event([null, {dx: pan.x, dy: pan.y}]),
-      onPanResponderRelease: this._onPanResponderEnd,
-      onPanResponderTerminate: this._onPanResponderEnd,
-    });
-
-    this.state = {
-      pan,
-    };
-  }
-
   render() {
     return (
       <ScrollView style={styles.container}>
@@ -536,23 +517,6 @@ class RTLExample extends React.Component<any, State> {
       </ScrollView>
     );
   }
-
-  _onPanResponderGrant = (e: Object, gestureState: Object) => {
-    this.state.pan.stopAnimation(value => {
-      this.state.pan.setOffset(value);
-    });
-  };
-
-  _onPanResponderEnd = (e: Object, gestureState: Object) => {
-    this.state.pan.flattenOffset();
-    Animated.sequence([
-      Animated.decay(this.state.pan, {
-        velocity: {x: gestureState.vx, y: gestureState.vy},
-        deceleration: 0.995,
-      }),
-      Animated.spring(this.state.pan, {toValue: {x: 0, y: 0}}),
-    ]).start();
-  };
 }
 
 const styles = StyleSheet.create({

From abf6eaf864cf64fa27f372e4befb7e2e630ce544 Mon Sep 17 00:00:00 2001
From: Josh Justice <me@codingitwrong.com>
Date: Fri, 8 Feb 2019 17:27:12 -0500
Subject: [PATCH 12/17] Separate examples

---
 RNTester/js/RTLExample.js | 185 +++++++++++++++++++++++---------------
 1 file changed, 114 insertions(+), 71 deletions(-)

diff --git a/RNTester/js/RTLExample.js b/RNTester/js/RTLExample.js
index f026daeb2262a9..28d85305b3f5a9 100644
--- a/RNTester/js/RTLExample.js
+++ b/RNTester/js/RTLExample.js
@@ -66,7 +66,7 @@ function ListItem(props) {
 
 const TextAlignmentExample = withRTLState(({isRTL, setRTL, ...props}) => {
   return (
-    <RNTesterBlock title={props.title} description={props.description}>
+    <View>
       <RTLToggler setRTL={setRTL} isRTL={isRTL} />
       <View style={{direction: isRTL ? 'rtl' : 'ltr'}}>
         <Text style={props.style}>
@@ -84,13 +84,13 @@ const TextAlignmentExample = withRTLState(({isRTL, setRTL, ...props}) => {
             '\u05D9\u05D9\u05E9\u05D5\u05E8 \u05D8\u05E7\u05E1\u05D8'}
         </Text>
       </View>
-    </RNTesterBlock>
+    </View>
   );
 });
 
 const IconsExample = withRTLState(({isRTL, setRTL}) => {
   return (
-    <RNTesterBlock title={'Working With Icons'}>
+    <View>
       <RTLToggler setRTL={setRTL} isRTL={isRTL} />
       <View
         style={[styles.flexDirectionRow, {direction: isRTL ? 'rtl' : 'ltr'}]}>
@@ -113,7 +113,7 @@ const IconsExample = withRTLState(({isRTL, setRTL}) => {
           </Text>
         </View>
       </View>
-    </RNTesterBlock>
+    </View>
   );
 });
 
@@ -170,13 +170,13 @@ const RTLToggler = ({isRTL, setRTL}) => {
 
 const SimpleListItemExample = withRTLState(({isRTL, setRTL}) => {
   return (
-    <RNTesterBlock title={'A Simple List Item Layout'}>
+    <View>
       <RTLToggler setRTL={setRTL} isRTL={isRTL} />
       <View style={[styles.list, {direction: isRTL ? 'rtl' : 'ltr'}]}>
         <ListItem imageSource={require('./Thumbnails/like.png')} />
         <ListItem imageSource={require('./Thumbnails/poke.png')} />
       </View>
-    </RNTesterBlock>
+    </View>
   );
 });
 
@@ -197,9 +197,7 @@ class AnimationExample extends React.Component<any, State> {
 
   render() {
     return (
-      <RNTesterBlock
-        title={'Controlling Animation'}
-        description={'Animation direction according to layout'}>
+      <View>
         <RTLToggler setRTL={this.props.setRTL} isRTL={this.props.isRTL} />
         <View style={styles.view} onLayout={this._onLayout}>
           <AnimationBlock
@@ -212,7 +210,7 @@ class AnimationExample extends React.Component<any, State> {
             }}
           />
         </View>
-      </RNTesterBlock>
+      </View>
     );
   }
 
@@ -244,7 +242,7 @@ const PaddingExample = withRTLState(({isRTL, setRTL}) => {
   const color = 'teal';
 
   return (
-    <RNTesterBlock title={'Padding Start/End'}>
+    <View>
       <Text style={styles.bold}>Styles</Text>
       <Text>paddingStart: 50,</Text>
       <Text>paddingEnd: 10</Text>
@@ -272,13 +270,13 @@ const PaddingExample = withRTLState(({isRTL, setRTL}) => {
           <RTLToggler setRTL={setRTL} isRTL={isRTL} />
         </View>
       </View>
-    </RNTesterBlock>
+    </View>
   );
 });
 
 const MarginExample = withRTLState(({isRTL, setRTL}) => {
   return (
-    <RNTesterBlock title={'Margin Start/End'}>
+    <View>
       <Text style={styles.bold}>Styles</Text>
       <Text>marginStart: 50,</Text>
       <Text>marginEnd: 10</Text>
@@ -306,13 +304,13 @@ const MarginExample = withRTLState(({isRTL, setRTL}) => {
           <RTLToggler setRTL={setRTL} isRTL={isRTL} />
         </View>
       </View>
-    </RNTesterBlock>
+    </View>
   );
 });
 
 const PositionExample = withRTLState(({isRTL, setRTL}) => {
   return (
-    <RNTesterBlock title={'Position Start/End'}>
+    <View>
       <Text style={styles.bold}>Styles</Text>
       <Text>start: 50</Text>
       <Text />
@@ -356,13 +354,13 @@ const PositionExample = withRTLState(({isRTL, setRTL}) => {
           <RTLToggler setRTL={setRTL} isRTL={isRTL} />
         </View>
       </View>
-    </RNTesterBlock>
+    </View>
   );
 });
 
 const BorderWidthExample = withRTLState(({isRTL, setRTL}) => {
   return (
-    <RNTesterBlock title={'Border Width Start/End'}>
+    <View>
       <Text style={styles.bold}>Styles</Text>
       <Text>borderStartWidth: 10,</Text>
       <Text>borderEndWidth: 50</Text>
@@ -379,13 +377,13 @@ const BorderWidthExample = withRTLState(({isRTL, setRTL}) => {
           </View>
         </View>
       </View>
-    </RNTesterBlock>
+    </View>
   );
 });
 
 const BorderColorExample = withRTLState(({isRTL, setRTL}) => {
   return (
-    <RNTesterBlock title={'Border Color Start/End'}>
+    <View>
       <Text style={styles.bold}>Styles</Text>
       <Text>borderStartColor: 'red',</Text>
       <Text>borderEndColor: 'green',</Text>
@@ -405,13 +403,13 @@ const BorderColorExample = withRTLState(({isRTL, setRTL}) => {
           </View>
         </View>
       </View>
-    </RNTesterBlock>
+    </View>
   );
 });
 
 const BorderRadiiExample = withRTLState(({isRTL, setRTL}) => {
   return (
-    <RNTesterBlock title={'Border Radii Start/End'}>
+    <View>
       <Text style={styles.bold}>Styles</Text>
       <Text>borderTopStartRadius: 10,</Text>
       <Text>borderTopEndRadius: 20,</Text>
@@ -434,13 +432,13 @@ const BorderRadiiExample = withRTLState(({isRTL, setRTL}) => {
           </View>
         </View>
       </View>
-    </RNTesterBlock>
+    </View>
   );
 });
 
 const BorderExample = withRTLState(({isRTL, setRTL}) => {
   return (
-    <RNTesterBlock title={'Border '}>
+    <View>
       <Text style={styles.bold}>Styles</Text>
       <Text>borderStartColor: 'red',</Text>
       <Text>borderEndColor: 'green',</Text>
@@ -470,55 +468,10 @@ const BorderExample = withRTLState(({isRTL, setRTL}) => {
           </View>
         </View>
       </View>
-    </RNTesterBlock>
+    </View>
   );
 });
 
-class RTLExample extends React.Component<any, State> {
-  render() {
-    return (
-      <ScrollView style={styles.container}>
-        <RNTesterPage title={'Right-to-Left (RTL) UI Layout'}>
-          <SimpleListItemExample />
-          <TextAlignmentExample
-            title={'Default Text Alignment'}
-            description={
-              'In iOS, it depends on active language. ' +
-              'In Android, it depends on the text content.'
-            }
-            style={styles.fontSizeSmall}
-          />
-          <TextAlignmentExample
-            title={"Using textAlign: 'left'"}
-            description={
-              'In iOS/Android, text alignment flips regardless of ' +
-              'languages or text content.'
-            }
-            style={[styles.fontSizeSmall, styles.textAlignLeft]}
-          />
-          <TextAlignmentExample
-            title={"Using textAlign: 'right'"}
-            description={
-              'In iOS/Android, text alignment flips regardless of ' +
-              'languages or text content.'
-            }
-            style={[styles.fontSizeSmall, styles.textAlignRight]}
-          />
-          <IconsExample />
-          <AnimationContainer />
-          <PaddingExample />
-          <MarginExample />
-          <PositionExample />
-          <BorderWidthExample />
-          <BorderColorExample />
-          <BorderRadiiExample />
-          <BorderExample />
-        </RNTesterPage>
-      </ScrollView>
-    );
-  }
-}
-
 const styles = StyleSheet.create({
   container: {
     backgroundColor: '#e9eaed',
@@ -641,9 +594,99 @@ exports.title = 'RTLExample';
 exports.description = 'Examples to show how to apply components to RTL layout.';
 exports.examples = [
   {
-    title: 'Simple RTL',
+    title: 'A Simple List Item Layout',
+    render: function(): React.Element<typeof RTLExample> {
+      return <SimpleListItemExample />;
+    },
+  },
+  {
+    title: 'Default Text Alignment',
+    description:
+      'In iOS, it depends on active language. ' +
+      'In Android, it depends on the text content.',
+    render: function(): React.Element<typeof RTLExample> {
+      return <TextAlignmentExample style={styles.fontSizeSmall} />;
+    },
+  },
+  {
+    title: "Using textAlign: 'left'",
+    description:
+      'In iOS/Android, text alignment flips regardless of ' +
+      'languages or text content.',
+    render: function(): React.Element<typeof RTLExample> {
+      return (
+        <TextAlignmentExample
+          style={[styles.fontSizeSmall, styles.textAlignLeft]}
+        />
+      );
+    },
+  },
+  {
+    title: "Using textAlign: 'right'",
+    description:
+      'In iOS/Android, text alignment flips regardless of ' +
+      'languages or text content.',
+    render: function(): React.Element<typeof RTLExample> {
+      return (
+        <TextAlignmentExample
+          style={[styles.fontSizeSmall, styles.textAlignRight]}
+        />
+      );
+    },
+  },
+  {
+    title: 'Working With Icons',
+    render: function(): React.Element<typeof RTLExample> {
+      return <IconsExample />;
+    },
+  },
+  {
+    title: 'Controlling Animation',
+    description: 'Animation direction according to layout',
+    render: function(): React.Element<typeof RTLExample> {
+      return <AnimationContainer />;
+    },
+  },
+  {
+    title: 'Padding Start/End',
+    render: function(): React.Element<typeof RTLExample> {
+      return <PaddingExample />;
+    },
+  },
+  {
+    title: 'Margin Start/End',
+    render: function(): React.Element<typeof RTLExample> {
+      return <MarginExample />;
+    },
+  },
+  {
+    title: 'Position Start/End',
+    render: function(): React.Element<typeof RTLExample> {
+      return <PositionExample />;
+    },
+  },
+  {
+    title: 'Border Width Start/End',
+    render: function(): React.Element<typeof RTLExample> {
+      return <BorderWidthExample />;
+    },
+  },
+  {
+    title: 'Border Color Start/End',
+    render: function(): React.Element<typeof RTLExample> {
+      return <BorderColorExample />;
+    },
+  },
+  {
+    title: 'Border Radii Start/End',
+    render: function(): React.Element<typeof RTLExample> {
+      return <BorderRadiiExample />;
+    },
+  },
+  {
+    title: 'Border',
     render: function(): React.Element<typeof RTLExample> {
-      return <RTLExample />;
+      return <BorderExample />;
     },
   },
 ];

From e65365e83ff5be2b42d833531813607d6f1928fc Mon Sep 17 00:00:00 2001
From: Josh Justice <me@codingitwrong.com>
Date: Sat, 9 Feb 2019 07:44:00 -0500
Subject: [PATCH 13/17] Add setting switch back in

---
 RNTester/js/RTLExample.js | 42 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 42 insertions(+)

diff --git a/RNTester/js/RTLExample.js b/RNTester/js/RTLExample.js
index 28d85305b3f5a9..1ce636d530332b 100644
--- a/RNTester/js/RTLExample.js
+++ b/RNTester/js/RTLExample.js
@@ -168,6 +168,42 @@ const RTLToggler = ({isRTL, setRTL}) => {
   );
 };
 
+class ForceRTLExample extends React.Component {
+  constructor(props: Object) {
+    super(props);
+
+    this.state = {
+      isRTL: IS_RTL,
+    };
+  }
+
+  render() {
+    return (
+      <View style={styles.flexDirectionRow}>
+        <Text style={styles.switchRowTextView}>forceRTL</Text>
+        <View style={styles.switchRowSwitchView}>
+          <Switch
+            onValueChange={this._onDirectionChange}
+            style={styles.rightAlignStyle}
+            value={this.state.isRTL}
+          />
+        </View>
+      </View>
+    );
+  }
+
+  _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.',
+    );
+  };
+}
+
 const SimpleListItemExample = withRTLState(({isRTL, setRTL}) => {
   return (
     <View>
@@ -593,6 +629,12 @@ const styles = StyleSheet.create({
 exports.title = 'RTLExample';
 exports.description = 'Examples to show how to apply components to RTL layout.';
 exports.examples = [
+  {
+    title: 'Quickly Test RTL Layout',
+    render: function(): React.Element<typeof RTLExample> {
+      return <ForceRTLExample />;
+    },
+  },
   {
     title: 'A Simple List Item Layout',
     render: function(): React.Element<typeof RTLExample> {

From 3e4ae5fce45ff30d7523a328af84d81f1ca0ec62 Mon Sep 17 00:00:00 2001
From: Josh Justice <me@codingitwrong.com>
Date: Sat, 9 Feb 2019 07:47:03 -0500
Subject: [PATCH 14/17] Remove unused imports

---
 RNTester/js/RTLExample.js | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/RNTester/js/RTLExample.js b/RNTester/js/RTLExample.js
index 1ce636d530332b..9a6343e5b1feac 100644
--- a/RNTester/js/RTLExample.js
+++ b/RNTester/js/RTLExample.js
@@ -16,9 +16,7 @@ const {
   Animated,
   I18nManager,
   Image,
-  PanResponder,
   PixelRatio,
-  ScrollView,
   StyleSheet,
   Text,
   TouchableWithoutFeedback,
@@ -28,9 +26,6 @@ const {
 } = ReactNative;
 const Platform = require('Platform');
 
-const RNTesterPage = require('./RNTesterPage');
-const RNTesterBlock = require('./RNTesterBlock');
-
 type State = {
   toggleStatus: any,
   pan: Object,

From db6d43913fcf86a856c23b43bcbc6ffcd3762f80 Mon Sep 17 00:00:00 2001
From: Josh Justice <me@codingitwrong.com>
Date: Sat, 9 Feb 2019 07:53:03 -0500
Subject: [PATCH 15/17] Fix prop types

---
 RNTester/js/RTLExample.js | 44 ++++++++++++++++++++++++---------------
 1 file changed, 27 insertions(+), 17 deletions(-)

diff --git a/RNTester/js/RTLExample.js b/RNTester/js/RTLExample.js
index 9a6343e5b1feac..911aca56048888 100644
--- a/RNTester/js/RTLExample.js
+++ b/RNTester/js/RTLExample.js
@@ -33,6 +33,16 @@ type State = {
   isRTL: boolean,
 };
 
+type RTLToggleState = {
+  isRTL: boolean,
+};
+
+type AnimationState = {
+  toggleStatus: any,
+  linear: Object,
+  windowWidth: number,
+};
+
 const SCALE = PixelRatio.get();
 const IMAGE_DIMENSION = 100 * SCALE;
 const IMAGE_SIZE = [IMAGE_DIMENSION, IMAGE_DIMENSION];
@@ -163,7 +173,7 @@ const RTLToggler = ({isRTL, setRTL}) => {
   );
 };
 
-class ForceRTLExample extends React.Component {
+class RTLToggleExample extends React.Component<any, RTLToggleState> {
   constructor(props: Object) {
     super(props);
 
@@ -215,7 +225,7 @@ const AnimationContainer = withRTLState(({isRTL, setRTL}) => {
   return <AnimationExample isRTL={isRTL} setRTL={setRTL} />;
 });
 
-class AnimationExample extends React.Component<any, State> {
+class AnimationExample extends React.Component<any, AnimationState> {
   constructor(props: Object) {
     super(props);
 
@@ -626,13 +636,13 @@ exports.description = 'Examples to show how to apply components to RTL layout.';
 exports.examples = [
   {
     title: 'Quickly Test RTL Layout',
-    render: function(): React.Element<typeof RTLExample> {
-      return <ForceRTLExample />;
+    render: function(): React.Element<any> {
+      return <RTLToggleExample />;
     },
   },
   {
     title: 'A Simple List Item Layout',
-    render: function(): React.Element<typeof RTLExample> {
+    render: function(): React.Element<any> {
       return <SimpleListItemExample />;
     },
   },
@@ -641,7 +651,7 @@ exports.examples = [
     description:
       'In iOS, it depends on active language. ' +
       'In Android, it depends on the text content.',
-    render: function(): React.Element<typeof RTLExample> {
+    render: function(): React.Element<any> {
       return <TextAlignmentExample style={styles.fontSizeSmall} />;
     },
   },
@@ -650,7 +660,7 @@ exports.examples = [
     description:
       'In iOS/Android, text alignment flips regardless of ' +
       'languages or text content.',
-    render: function(): React.Element<typeof RTLExample> {
+    render: function(): React.Element<any> {
       return (
         <TextAlignmentExample
           style={[styles.fontSizeSmall, styles.textAlignLeft]}
@@ -663,7 +673,7 @@ exports.examples = [
     description:
       'In iOS/Android, text alignment flips regardless of ' +
       'languages or text content.',
-    render: function(): React.Element<typeof RTLExample> {
+    render: function(): React.Element<any> {
       return (
         <TextAlignmentExample
           style={[styles.fontSizeSmall, styles.textAlignRight]}
@@ -673,56 +683,56 @@ exports.examples = [
   },
   {
     title: 'Working With Icons',
-    render: function(): React.Element<typeof RTLExample> {
+    render: function(): React.Element<any> {
       return <IconsExample />;
     },
   },
   {
     title: 'Controlling Animation',
     description: 'Animation direction according to layout',
-    render: function(): React.Element<typeof RTLExample> {
+    render: function(): React.Element<any> {
       return <AnimationContainer />;
     },
   },
   {
     title: 'Padding Start/End',
-    render: function(): React.Element<typeof RTLExample> {
+    render: function(): React.Element<any> {
       return <PaddingExample />;
     },
   },
   {
     title: 'Margin Start/End',
-    render: function(): React.Element<typeof RTLExample> {
+    render: function(): React.Element<any> {
       return <MarginExample />;
     },
   },
   {
     title: 'Position Start/End',
-    render: function(): React.Element<typeof RTLExample> {
+    render: function(): React.Element<any> {
       return <PositionExample />;
     },
   },
   {
     title: 'Border Width Start/End',
-    render: function(): React.Element<typeof RTLExample> {
+    render: function(): React.Element<any> {
       return <BorderWidthExample />;
     },
   },
   {
     title: 'Border Color Start/End',
-    render: function(): React.Element<typeof RTLExample> {
+    render: function(): React.Element<any> {
       return <BorderColorExample />;
     },
   },
   {
     title: 'Border Radii Start/End',
-    render: function(): React.Element<typeof RTLExample> {
+    render: function(): React.Element<any> {
       return <BorderRadiiExample />;
     },
   },
   {
     title: 'Border',
-    render: function(): React.Element<typeof RTLExample> {
+    render: function(): React.Element<any> {
       return <BorderExample />;
     },
   },

From 3502b6a9a44cff144cb7b1a9b3c2089df4df126d Mon Sep 17 00:00:00 2001
From: Josh Justice <me@codingitwrong.com>
Date: Sat, 9 Feb 2019 08:06:00 -0500
Subject: [PATCH 16/17] Add direction indicator

---
 RNTester/js/RTLExample.js | 26 +++++++++++++++++---------
 1 file changed, 17 insertions(+), 9 deletions(-)

diff --git a/RNTester/js/RTLExample.js b/RNTester/js/RTLExample.js
index 911aca56048888..ea06e96d34c586 100644
--- a/RNTester/js/RTLExample.js
+++ b/RNTester/js/RTLExample.js
@@ -184,14 +184,21 @@ class RTLToggleExample extends React.Component<any, RTLToggleState> {
 
   render() {
     return (
-      <View style={styles.flexDirectionRow}>
-        <Text style={styles.switchRowTextView}>forceRTL</Text>
-        <View style={styles.switchRowSwitchView}>
-          <Switch
-            onValueChange={this._onDirectionChange}
-            style={styles.rightAlignStyle}
-            value={this.state.isRTL}
-          />
+      <View>
+        <View style={styles.directionBox}>
+          <Text style={styles.directionText}>
+            {this.state.isRTL ? 'Right-to-Left' : 'Left-to-Right'}
+          </Text>
+        </View>
+        <View style={styles.flexDirectionRow}>
+          <Text style={styles.switchRowTextView}>forceRTL</Text>
+          <View style={styles.switchRowSwitchView}>
+            <Switch
+              onValueChange={this._onDirectionChange}
+              style={styles.rightAlignStyle}
+              value={this.state.isRTL}
+            />
+          </View>
         </View>
       </View>
     );
@@ -523,6 +530,7 @@ const styles = StyleSheet.create({
     backgroundColor: '#f8f8f8',
     borderWidth: 0.5,
     borderColor: 'black',
+    marginBottom: 15,
   },
   directionText: {
     padding: 10,
@@ -635,7 +643,7 @@ exports.title = 'RTLExample';
 exports.description = 'Examples to show how to apply components to RTL layout.';
 exports.examples = [
   {
-    title: 'Quickly Test RTL Layout',
+    title: 'Current Layout Direction',
     render: function(): React.Element<any> {
       return <RTLToggleExample />;
     },

From 3a62b6fdae6ddc5709290e581e22f8602c57e300 Mon Sep 17 00:00:00 2001
From: Josh Justice <me@codingitwrong.com>
Date: Sat, 9 Feb 2019 08:11:53 -0500
Subject: [PATCH 17/17] Make direction style conditional on platform

---
 RNTester/js/RTLExample.js | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/RNTester/js/RTLExample.js b/RNTester/js/RTLExample.js
index ea06e96d34c586..a58b744709ab46 100644
--- a/RNTester/js/RTLExample.js
+++ b/RNTester/js/RTLExample.js
@@ -73,7 +73,7 @@ const TextAlignmentExample = withRTLState(({isRTL, setRTL, ...props}) => {
   return (
     <View>
       <RTLToggler setRTL={setRTL} isRTL={isRTL} />
-      <View style={{direction: isRTL ? 'rtl' : 'ltr'}}>
+      <View style={directionStyle(isRTL)}>
         <Text style={props.style}>
           Left-to-Right language without text alignment.
         </Text>
@@ -97,8 +97,7 @@ const IconsExample = withRTLState(({isRTL, setRTL}) => {
   return (
     <View>
       <RTLToggler setRTL={setRTL} isRTL={isRTL} />
-      <View
-        style={[styles.flexDirectionRow, {direction: isRTL ? 'rtl' : 'ltr'}]}>
+      <View style={[styles.flexDirectionRow, directionStyle(isRTL)]}>
         <View>
           <Image
             source={require('./Thumbnails/like.png')}
@@ -220,7 +219,7 @@ const SimpleListItemExample = withRTLState(({isRTL, setRTL}) => {
   return (
     <View>
       <RTLToggler setRTL={setRTL} isRTL={isRTL} />
-      <View style={[styles.list, {direction: isRTL ? 'rtl' : 'ltr'}]}>
+      <View style={[styles.list, directionStyle(isRTL)]}>
         <ListItem imageSource={require('./Thumbnails/like.png')} />
         <ListItem imageSource={require('./Thumbnails/poke.png')} />
       </View>
@@ -414,7 +413,7 @@ const BorderWidthExample = withRTLState(({isRTL, setRTL}) => {
       <Text>borderEndWidth: 50</Text>
       <Text />
       <Text style={styles.bold}>Demo: </Text>
-      <View style={{direction: isRTL ? 'rtl' : 'ltr'}}>
+      <View style={directionStyle(isRTL)}>
         <View
           style={{
             borderStartWidth: 10,
@@ -437,7 +436,7 @@ const BorderColorExample = withRTLState(({isRTL, setRTL}) => {
       <Text>borderEndColor: 'green',</Text>
       <Text />
       <Text style={styles.bold}>Demo: </Text>
-      <View style={{direction: isRTL ? 'rtl' : 'ltr'}}>
+      <View style={directionStyle(isRTL)}>
         <View
           style={{
             borderStartColor: 'red',
@@ -465,7 +464,7 @@ const BorderRadiiExample = withRTLState(({isRTL, setRTL}) => {
       <Text>borderBottomEndRadius: 40</Text>
       <Text />
       <Text style={styles.bold}>Demo: </Text>
-      <View style={{direction: isRTL ? 'rtl' : 'ltr'}}>
+      <View style={directionStyle(isRTL)}>
         <View
           style={{
             borderWidth: 10,
@@ -498,7 +497,7 @@ const BorderExample = withRTLState(({isRTL, setRTL}) => {
       <Text>borderBottomEndRadius: 40</Text>
       <Text />
       <Text style={styles.bold}>Demo: </Text>
-      <View style={{direction: isRTL ? 'rtl' : 'ltr'}}>
+      <View style={directionStyle(isRTL)}>
         <View
           style={{
             borderStartColor: 'red',
@@ -520,6 +519,9 @@ const BorderExample = withRTLState(({isRTL, setRTL}) => {
   );
 });
 
+const directionStyle = isRTL =>
+  Platform.OS === 'ios' ? {direction: isRTL ? 'rtl' : 'ltr'} : null;
+
 const styles = StyleSheet.create({
   container: {
     backgroundColor: '#e9eaed',