mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
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:
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
|
||||
|
||||
Reference in New Issue
Block a user