diff --git a/packages/rn-tester/js/components/ListExampleShared.js b/packages/rn-tester/js/components/ListExampleShared.js
index 522d72e3d93..84ca599630e 100644
--- a/packages/rn-tester/js/components/ListExampleShared.js
+++ b/packages/rn-tester/js/components/ListExampleShared.js
@@ -240,19 +240,20 @@ function pressItem(context: Object, key: string) {
}
function renderSmallSwitchOption(
- context: Object,
- key: string,
+ label: string,
+ value: boolean,
+ setValue: boolean => void,
): null | React.Node {
if (Platform.isTV) {
return null;
}
return (
- {key}:
+ {label}:
context.setState({[key]: value})}
+ value={value}
+ onValueChange={setValue}
/>
);
diff --git a/packages/rn-tester/js/examples/FlatList/FlatListExample.js b/packages/rn-tester/js/examples/FlatList/FlatListExample.js
index 4dec5886a01..95185e3112b 100644
--- a/packages/rn-tester/js/examples/FlatList/FlatListExample.js
+++ b/packages/rn-tester/js/examples/FlatList/FlatListExample.js
@@ -98,6 +98,9 @@ class FlatListExample extends React.PureComponent {
this._listRef.recordInteraction(); // e.g. flipping logViewable switch
}
+ _setBooleanValue: string => boolean => void = key => value =>
+ this.setState({[key]: value});
+
render(): React.Node {
const filterRegex = new RegExp(String(this.state.filterText), 'i');
const filter = item =>
@@ -123,14 +126,46 @@ class FlatListExample extends React.PureComponent {
/>
- {renderSmallSwitchOption(this, 'virtualized')}
- {renderSmallSwitchOption(this, 'horizontal')}
- {renderSmallSwitchOption(this, 'fixedHeight')}
- {renderSmallSwitchOption(this, 'log')}
- {renderSmallSwitchOption(this, 'inverted')}
- {renderSmallSwitchOption(this, 'empty')}
- {renderSmallSwitchOption(this, 'debug')}
- {renderSmallSwitchOption(this, 'useFlatListItemComponent')}
+ {renderSmallSwitchOption(
+ 'Virtualized',
+ this.state.virtualized,
+ this._setBooleanValue('virtualized'),
+ )}
+ {renderSmallSwitchOption(
+ 'Horizontal',
+ this.state.horizontal,
+ this._setBooleanValue('horizontal'),
+ )}
+ {renderSmallSwitchOption(
+ 'Fixed Height',
+ this.state.fixedHeight,
+ this._setBooleanValue('fixedHeight'),
+ )}
+ {renderSmallSwitchOption(
+ 'Log Viewable',
+ this.state.logViewable,
+ this._setBooleanValue('logViewable'),
+ )}
+ {renderSmallSwitchOption(
+ 'Inverted',
+ this.state.inverted,
+ this._setBooleanValue('inverted'),
+ )}
+ {renderSmallSwitchOption(
+ 'Empty',
+ this.state.empty,
+ this._setBooleanValue('empty'),
+ )}
+ {renderSmallSwitchOption(
+ 'Debug',
+ this.state.debug,
+ this._setBooleanValue('debug'),
+ )}
+ {renderSmallSwitchOption(
+ 'Use FlatListItemComponent',
+ this.state.useFlatListItemComponent,
+ this._setBooleanValue('useFlatListItemComponent'),
+ )}
{Platform.OS === 'android' && (
{
this.setState(() => ({numColumns: Number(numColumns)}));
};
+
+ _setBooleanValue: string => boolean => void = key => value =>
+ this.setState({[key]: value});
+
render(): React.Node {
const filterRegex = new RegExp(String(this.state.filterText), 'i');
const filter = item =>
@@ -81,9 +85,21 @@ class MultiColumnExample extends React.PureComponent<
/>
- {renderSmallSwitchOption(this, 'virtualized')}
- {renderSmallSwitchOption(this, 'fixedHeight')}
- {renderSmallSwitchOption(this, 'logViewable')}
+ {renderSmallSwitchOption(
+ 'Virtualized',
+ this.state.virtualized,
+ this._setBooleanValue('virtualized'),
+ )}
+ {renderSmallSwitchOption(
+ 'Fixed Height',
+ this.state.fixedHeight,
+ this._setBooleanValue('fixedHeight'),
+ )}
+ {renderSmallSwitchOption(
+ 'Log Viewable',
+ this.state.logViewable,
+ this._setBooleanValue('logViewable'),
+ )}
diff --git a/packages/rn-tester/js/examples/SectionList/SectionListExample.js b/packages/rn-tester/js/examples/SectionList/SectionListExample.js
index 239372b5749..64a8de09718 100644
--- a/packages/rn-tester/js/examples/SectionList/SectionListExample.js
+++ b/packages/rn-tester/js/examples/SectionList/SectionListExample.js
@@ -108,6 +108,9 @@ class SectionListExample extends React.PureComponent<{...}, $FlowFixMeState> {
this._sectionListRef.scrollToLocation({sectionIndex, itemIndex});
}
+ _setBooleanValue: string => boolean => void = key => value =>
+ this.setState({[key]: value});
+
render(): React.Node {
const filterRegex = new RegExp(String(this.state.filterText), 'i');
const filter = item =>
@@ -136,10 +139,26 @@ class SectionListExample extends React.PureComponent<{...}, $FlowFixMeState> {
value={this.state.filterText}
/>
- {renderSmallSwitchOption(this, 'virtualized')}
- {renderSmallSwitchOption(this, 'logViewable')}
- {renderSmallSwitchOption(this, 'debug')}
- {renderSmallSwitchOption(this, 'inverted')}
+ {renderSmallSwitchOption(
+ 'virtualized',
+ this.state.virtualized,
+ this._setBooleanValue('virtualized'),
+ )}
+ {renderSmallSwitchOption(
+ 'Log Viewable',
+ this.state.logViewable,
+ this._setBooleanValue('logViewable'),
+ )}
+ {renderSmallSwitchOption(
+ 'Debug',
+ this.state.debug,
+ this._setBooleanValue('debug'),
+ )}
+ {renderSmallSwitchOption(
+ 'Inverted',
+ this.state.inverted,
+ this._setBooleanValue('inverted'),
+ )}