From 789c27ef48c3324f574029223b75987af5dc508e Mon Sep 17 00:00:00 2001
From: Tymoteusz Boba <Tymoteusz.Boba@gmail.com>
Date: Tue, 14 May 2024 13:34:41 +0200
Subject: [PATCH] chore: Prevent setting RTL mode in test examples (#2130)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description

This PR is a follow-up to #2084 that fixes setting incorrect RTL mode in
our example apps.
The reason why it is being forced is that `I18nManager.forceRTL(true)`
is being called from the global scope, which causes to force RTL, even
if we're only importing the component **from file**.

## Changes

- Moved `I18nManager.forceRTL(true);` to inner scope of App components.

## Test code and steps to reproduce

Just run TestsExample & FabricTestExample ¯\_(ツ)_/¯

## Checklist

- [X] Ensured that CI passes
---
 FabricTestExample/src/Test654.js  | 10 ++++++++--
 FabricTestExample/src/Test831.tsx | 10 ++++++++--
 TestsExample/src/Test654.js       | 10 ++++++++--
 TestsExample/src/Test831.tsx      | 10 ++++++++--
 4 files changed, 32 insertions(+), 8 deletions(-)

diff --git a/FabricTestExample/src/Test654.js b/FabricTestExample/src/Test654.js
index dd83d66259..0cc5c3b060 100644
--- a/FabricTestExample/src/Test654.js
+++ b/FabricTestExample/src/Test654.js
@@ -5,9 +5,15 @@ import { createNativeStackNavigator } from '@react-navigation/native-stack';
 
 const Stack = createNativeStackNavigator();
 
-I18nManager.forceRTL(true);
-
 export default function App() {
+  React.useEffect(() => {
+    I18nManager.forceRTL(true);
+
+    return () => {
+      I18nManager.forceRTL(false);
+    };
+  }, []);
+
   return (
     <NavigationContainer>
       <Stack.Navigator>
diff --git a/FabricTestExample/src/Test831.tsx b/FabricTestExample/src/Test831.tsx
index 2e3cb4ef95..dfea229bd9 100644
--- a/FabricTestExample/src/Test831.tsx
+++ b/FabricTestExample/src/Test831.tsx
@@ -12,9 +12,15 @@ type Props = {
 
 const Stack = createNativeStackNavigator();
 
-I18nManager.forceRTL(true);
-
 export default function App(): JSX.Element {
+  React.useEffect(() => {
+    I18nManager.forceRTL(true);
+
+    return () => {
+      I18nManager.forceRTL(false);
+    };
+  }, []);
+
   return (
     <NavigationContainer>
       <Stack.Navigator screenOptions={{ headerShown: false }}>
diff --git a/TestsExample/src/Test654.js b/TestsExample/src/Test654.js
index dd83d66259..0cc5c3b060 100644
--- a/TestsExample/src/Test654.js
+++ b/TestsExample/src/Test654.js
@@ -5,9 +5,15 @@ import { createNativeStackNavigator } from '@react-navigation/native-stack';
 
 const Stack = createNativeStackNavigator();
 
-I18nManager.forceRTL(true);
-
 export default function App() {
+  React.useEffect(() => {
+    I18nManager.forceRTL(true);
+
+    return () => {
+      I18nManager.forceRTL(false);
+    };
+  }, []);
+
   return (
     <NavigationContainer>
       <Stack.Navigator>
diff --git a/TestsExample/src/Test831.tsx b/TestsExample/src/Test831.tsx
index 2e3cb4ef95..dfea229bd9 100644
--- a/TestsExample/src/Test831.tsx
+++ b/TestsExample/src/Test831.tsx
@@ -12,9 +12,15 @@ type Props = {
 
 const Stack = createNativeStackNavigator();
 
-I18nManager.forceRTL(true);
-
 export default function App(): JSX.Element {
+  React.useEffect(() => {
+    I18nManager.forceRTL(true);
+
+    return () => {
+      I18nManager.forceRTL(false);
+    };
+  }, []);
+
   return (
     <NavigationContainer>
       <Stack.Navigator screenOptions={{ headerShown: false }}>