From 27bbb5ef37390fdef087327181cf5daaaf7f13f2 Mon Sep 17 00:00:00 2001
From: Genki Kondo <gkondo@fb.com>
Date: Wed, 25 May 2022 13:24:13 -0700
Subject: [PATCH] Add RTL option to FlatList example

Summary:
Followup task for S271544.

There were no tests covering RTL on FlatLists, which would have prevented the above SEV. Adding an RNTester example for this.

Changelog:
[Internal] - Added RNTester example FlatList with RTL

Reviewed By: lunaleaps, javache

Differential Revision: D36601583

fbshipit-source-id: 054ac4eee876a514152f83ecc0522c62337cfea5
---
 .../js/examples/FlatList/FlatList-basic.js    | 21 +++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/packages/rn-tester/js/examples/FlatList/FlatList-basic.js b/packages/rn-tester/js/examples/FlatList/FlatList-basic.js
index 259daccc7b4..e222efbd0d7 100644
--- a/packages/rn-tester/js/examples/FlatList/FlatList-basic.js
+++ b/packages/rn-tester/js/examples/FlatList/FlatList-basic.js
@@ -18,6 +18,7 @@ import * as React from 'react';
 import {
   Alert,
   Animated,
+  I18nManager,
   Platform,
   StyleSheet,
   TextInput,
@@ -63,8 +64,11 @@ type State = {|
   fadingEdgeLength: number,
   onPressDisabled: boolean,
   textSelectable: boolean,
+  isRTL: boolean,
 |};
 
+const IS_RTL = I18nManager.isRTL;
+
 class FlatListExample extends React.PureComponent<Props, State> {
   state: State = {
     data: genItemData(100),
@@ -80,6 +84,7 @@ class FlatListExample extends React.PureComponent<Props, State> {
     fadingEdgeLength: 0,
     onPressDisabled: false,
     textSelectable: true,
+    isRTL: IS_RTL,
   };
 
   _onChangeFilterText = filterText => {
@@ -107,6 +112,17 @@ class FlatListExample extends React.PureComponent<Props, State> {
   _setBooleanValue: string => boolean => void = key => value =>
     this.setState({[key]: value});
 
+  _setIsRTL: boolean => void = value => {
+    I18nManager.forceRTL(value);
+    this.setState({isRTL: value});
+    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.',
+    );
+  };
+
   render(): React.Node {
     const filterRegex = new RegExp(String(this.state.filterText), 'i');
     const filter = (item: Item) =>
@@ -182,6 +198,11 @@ class FlatListExample extends React.PureComponent<Props, State> {
                 this.state.useFlatListItemComponent,
                 this._setBooleanValue('useFlatListItemComponent'),
               )}
+              {renderSmallSwitchOption(
+                'Is RTL',
+                this.state.isRTL,
+                this._setIsRTL,
+              )}
               {Platform.OS === 'android' && (
                 <View>
                   <TextInput