Update localization docs and examples

packages/docs/src/pages/docs/apis/i18n-manager.md

@@ -35,10 +35,6 @@ Force the application to display in RTL mode.
 Determine how the application is handling bidi layout.
 {% endcall %}
 
-{% call macro.prop('swapLeftAndRightInRTL', '(boolean) => void') %}
-Control whether the application swaps `left`/`right` styles in RTL mode. It is recommended that applications rely on `start`/`end` styles and disable automatic BiDi-flipping of `left`/`right` styles.
-{% endcall %}
-
 {% call macro.prop('setPreferredLanguageRTL', '(boolean) => void') %}
 Set the application's preferred writing direction to RTL. You may need to infer the user's preferred locale on the server (from HTTP headers) and decide whether it's an RTL language. (Web-only)
 {% endcall %}
@@ -51,10 +47,6 @@ The object returned by `I18nManager.getConstants()`.
 Whether the application is currently in RTL mode.
 {% endcall %}
 
-{% call macro.prop('doLeftAndRightSwapInRTL', 'boolean = true') %}
-Whether the application swaps left/right styles in RTL mode.
-{% endcall %}
-
 ---
 
 ## Examples

packages/docs/src/pages/docs/concepts/localization.md

@@ -30,7 +30,7 @@ return (
 );
 ```
 
-The non-standard [direction-independent style properties]({{ '/docs/styling/#non-standard-properties' | url }}) should also be used as much as possible. {{ site.name }} will automatically flip the direction of these properties when the application is re-rendered after using `I18nManager` to enable RTL mode.
+The non-standard [direction-independent style properties]({{ '/docs/styling/#non-standard-properties' | url }}) should also be used as much as possible. {{ site.name }} will automatically flip the direction of these properties within subtrees based on the value of the `dir` prop on `View` or `Text` elements in the ancestral hierarchy.
 
 ```jsx
 // "start" is "left" for LTR and "right" for RTL

packages/examples/pages/app-registry/index.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import { AppRegistry, Text, StyleSheet } from 'react-native';
+import Example from '../../shared/example';
+
+function App() {
+  return <Text style={styles.text}>Should be red and bold</Text>;
+}
+
+const styles = StyleSheet.create({
+  text: {
+    color: 'red',
+    fontWeight: 'bold'
+  }
+});
+
+AppRegistry.registerComponent('App', () => App);
+
+export default function AppStatePage() {
+  const iframeRef = React.useRef(null);
+  const shadowRef = React.useRef(null);
+
+  React.useEffect(() => {
+    const iframeElement = iframeRef.current;
+    const iframeBody = iframeElement.contentWindow.document.body;
+    const iframeRootTag = document.createElement('div');
+    iframeRootTag.id = 'iframe-root';
+    iframeBody.appendChild(iframeRootTag);
+    AppRegistry.runApplication('App', { rootTag: iframeRootTag });
+
+    const shadowElement = shadowRef.current;
+    const shadowRoot = shadowElement.attachShadow({ mode: 'open' });
+    const shadowRootTag = document.createElement('div');
+    shadowRootTag.id = 'shadow-root';
+    shadowRoot.appendChild(shadowRootTag);
+    AppRegistry.runApplication('App', { rootTag: shadowRootTag });
+
+    return () => {
+      AppRegistry.unmountApplicationComponentAtRootTag(iframeRootTag);
+      AppRegistry.unmountApplicationComponentAtRootTag(shadowRootTag);
+    };
+  }, []);
+
+  return (
+    <Example title="AppRegistry">
+      <Text>Styles in iframe</Text>
+      <iframe ref={iframeRef} />
+      <Text>Styles in ShadowRoot</Text>
+      <div ref={shadowRef} />
+    </Example>
+  );
+}

packages/examples/pages/i18n-manager/index.js

@@ -14,7 +14,6 @@
 import React from 'react';
 import {
   Button,
-  I18nManager,
   Image,
   PixelRatio,
   Platform,
@@ -81,7 +80,7 @@ function withRTLState(Component) {
     }
 
     render() {
-      const isRTL = Platform === 'ios' ? this.state.isRTL : I18nManager.isRTL;
+      const isRTL = this.state.isRTL;
       const setRTL = (isRTL) => this.setState({ isRTL: isRTL });
       return <Component isRTL={isRTL} setRTL={setRTL} />;
     }
@@ -375,28 +374,18 @@ class LayoutRTLExample extends React.Component {
   constructor(props) {
     super(props);
 
-    const { doLeftAndRightSwapInRTL, isRTL } = I18nManager;
-
     this.state = {
       toggleStatus: {},
-      isRTL,
-      doLeftAndRightSwapInRTL,
+      isRTL: false,
       containerWidth: 0
     };
 
     this._onDirectionChange = this._onDirectionChange.bind(this);
-    this._onSwapChange = this._onSwapChange.bind(this);
   }
 
   render() {
     return (
-      <ScrollView
-        style={[
-          styles.container,
-          // `direction` property is not supported on Android.
-          Platform.OS !== 'android' ? { direction: this.state.isRTL ? 'rtl' : 'ltr' } : null
-        ]}
-      >
+      <ScrollView dir={this.state.isRTL ? 'rtl' : 'ltr'} style={[styles.container]}>
         <Block title={'Current layout direction'}>
           <View style={styles.directionBox}>
             <Text style={styles.directionText}>
@@ -405,21 +394,12 @@ class LayoutRTLExample extends React.Component {
           </View>
         </Block>
         <Block title={'Quickly test RTL layout'}>
-          <View style={[styles.flexDirectionRow, styles.switchRow]}>
+          <View dir="ltr" style={[styles.flexDirectionRow, styles.switchRow]}>
             <Text style={{ fontWeight: 'bold' }}>forceRTL</Text>
             <View>
               <Switch onValueChange={this._onDirectionChange} value={this.state.isRTL} />
             </View>
           </View>
-          <View style={[styles.flexDirectionRow, styles.switchRow]}>
-            <Text style={{ fontWeight: 'bold' }}>swapLeftAndRightInRTL</Text>
-            <View>
-              <Switch
-                onValueChange={this._onSwapChange}
-                value={this.state.doLeftAndRightSwapInRTL}
-              />
-            </View>
-          </View>
         </Block>
         <TextAlignmentExample
           description={'Depends on the text content.'}
@@ -476,16 +456,8 @@ class LayoutRTLExample extends React.Component {
   }
 
   _onDirectionChange() {
-    I18nManager.forceRTL(!this.state.isRTL);
     this.setState({ isRTL: !this.state.isRTL });
   }
-
-  _onSwapChange() {
-    I18nManager.swapLeftAndRightInRTL(!this.state.doLeftAndRightSwapInRTL);
-    this.setState({
-      doLeftAndRightSwapInRTL: !this.state.doLeftAndRightSwapInRTL
-    });
-  }
 }
 
 const styles = StyleSheet.create({