Update localization docs and examples

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({