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
This commit is contained in:
Genki Kondo
2022-05-25 13:24:13 -07:00
committed by Facebook GitHub Bot
parent 40a86b0650
commit 27bbb5ef37
@@ -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