[change] I18nManager manages global writing direction

docs/apis/I18nManager.md

@@ -1,8 +1,6 @@
 # I18nManager
 
-Control and set the layout and writing direction of the application. You must
+Control and set the layout and writing direction of the application.
-set `dir="rtl"` (and should set `lang="${lang}"`) on the root element of your
-app.
 
 ## Properties
 
@@ -16,12 +14,12 @@ static **allowRTL**(allowRTL: bool)
 
 Allow the application to display in RTL mode.
 
-static **forceRTL**(allowRTL: bool)
+static **forceRTL**(forceRTL: bool)
 
 Force the application to display in RTL mode.
 
-static **setRTL**(allowRTL: bool)
+static **setPreferredLanguageRTL**(isRTL: bool)
 
-Set the application to display in RTL mode. You will need to determine the
+Set the application's preferred writing direction to RTL. You will need to
-user's preferred locale and if it is an RTL language. (This is best done on the
+determine the user's preferred locale server-side (from HTTP headers) and
-server as it is notoriously inaccurate to deduce client-side.)
+decide whether it's an RTL language.

src/apis/I18nManager/__tests__/index-test.js

@@ -6,32 +6,40 @@ import I18nManager from '..'
 suite('apis/I18nManager', () => {
   suite('when RTL not enabled', () => {
     setup(() => {
-      I18nManager.setRTL(false)
+      I18nManager.setPreferredLanguageRTL(false)
     })
 
     test('is "false" by default', () => {
       assert.equal(I18nManager.isRTL, false)
+      assert.equal(document.documentElement.getAttribute('dir'), 'ltr')
     })
 
     test('is "true" when forced', () => {
       I18nManager.forceRTL(true)
       assert.equal(I18nManager.isRTL, true)
+      assert.equal(document.documentElement.getAttribute('dir'), 'rtl')
       I18nManager.forceRTL(false)
     })
   })
 
   suite('when RTL is enabled', () => {
     setup(() => {
-      I18nManager.setRTL(true)
+      I18nManager.setPreferredLanguageRTL(true)
+    })
+
+    teardown(() => {
+      I18nManager.setPreferredLanguageRTL(false)
     })
 
     test('is "true" by default', () => {
       assert.equal(I18nManager.isRTL, true)
+      assert.equal(document.documentElement.getAttribute('dir'), 'rtl')
     })
 
     test('is "false" when not allowed', () => {
       I18nManager.allowRTL(false)
       assert.equal(I18nManager.isRTL, false)
+      assert.equal(document.documentElement.getAttribute('dir'), 'ltr')
       I18nManager.allowRTL(true)
     })
   })

src/apis/I18nManager/index.js

@@ -1,3 +1,5 @@
+import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment'
+
 type I18nManagerStatus = {
   allowRTL: (allowRTL: boolean) => {},
   forceRTL: (forceRTL: boolean) => {},
@@ -5,28 +7,38 @@ type I18nManagerStatus = {
   isRTL: boolean
 }
 
-let isApplicationLanguageRTL = false
+let isPreferredLanguageRTL = false
 let isRTLAllowed = true
 let isRTLForced = false
 
+const isRTL = () => {
+  if (isRTLForced) {
+    return true
+  }
+  return isRTLAllowed && isPreferredLanguageRTL
+}
+
+const onChange = () => {
+  if (ExecutionEnvironment.canUseDOM) {
+    document.documentElement.setAttribute('dir', isRTL() ? 'rtl' : 'ltr')
+  }
+}
+
 const I18nManager: I18nManagerStatus = {
   allowRTL(bool) {
     isRTLAllowed = bool
+    onChange()
   },
   forceRTL(bool) {
     isRTLForced = bool
+    onChange()
   },
-  setRTL(bool) {
+  setPreferredLanguageRTL(bool) {
-    isApplicationLanguageRTL = bool
+    isPreferredLanguageRTL = bool
+    onChange()
   },
   get isRTL() {
-    if (isRTLForced) {
+    return isRTL()
-      return true
-    }
-    if (isRTLAllowed && isApplicationLanguageRTL) {
-      return true
-    }
-    return false
   }
 }