diff --git a/packages/rn-tester/js/examples/FlatList/FlatList-inverted.js b/packages/rn-tester/js/examples/FlatList/FlatList-inverted.js
index 6ff870f5cc6f4c..7e0f4540865008 100644
--- a/packages/rn-tester/js/examples/FlatList/FlatList-inverted.js
+++ b/packages/rn-tester/js/examples/FlatList/FlatList-inverted.js
@@ -8,128 +8,190 @@
* @format
*/
+import * as React from 'react';
+import {useState} from 'react';
import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
-import BaseFlatListExample from './BaseFlatListExample';
import {
- FlatList,
- Text,
+ SafeAreaView,
View,
+ FlatList,
StyleSheet,
- ScrollView,
- Dimensions,
+ Text,
+ StatusBar,
Button,
} from 'react-native';
-import * as React from 'react';
-const DATA_SHORT = [
- {title: 'first item'},
- {title: 'second item'},
- {title: 'third item'},
+const DATA = [
+ {
+ id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
+ title: 'First Item',
+ },
+ {
+ id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
+ title: 'Second Item',
+ },
+ {
+ id: '58694a0f-3da1-471f-bd96-145571e29d72',
+ title: 'Third Item',
+ },
+ {
+ id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb8bbb',
+ title: 'Fourth Item',
+ },
+ {
+ id: '3ac68afc-c605-48d3-a4f8-fbd91aa97676',
+ title: 'Fifth Item',
+ },
+ {
+ id: '58694a0f-3da1-471f-bd96-145571e27234',
+ title: 'Sixth Item',
+ },
+ {
+ id: '58694a0f-3da1-471f-bd96-145571e29234',
+ title: 'Seven Item',
+ },
+ {
+ id: '58694a0f-3da1-471f-bd96-145571429234',
+ title: 'Eight Item',
+ },
+ {
+ id: '58694a0f-3da1-471f-bd96-115571429234',
+ title: 'Nine Item',
+ },
+ {
+ id: '58694a0f-3da1-471f-bd96-1155h1429234',
+ title: 'Ten Item',
+ },
];
-const DATA_LONG = [
- {title: 'first item'},
- {title: 'second item'},
- {title: 'third item'},
- {title: 'fourth item'},
- {title: 'sixth item'},
- {title: 'eight item'},
- {title: 'ninth item'},
- {title: 'tenth item'},
- {title: 'tenth item'},
- {title: 'tenth item'},
- {title: 'tenth item'},
- {title: 'tenth item'},
- {title: 'tenth item'},
- {title: 'tenth item'},
- {title: 'tenth item'},
- {title: 'tenth item'},
- {title: 'tenth item'},
- {title: 'tenth item'},
- {title: 'tenth item'},
- {title: 'tenth item'},
- {title: 'tenth item'},
- {title: 'tenth item'},
- {title: 'tenth item'},
- {title: 'tenth item'},
- {title: 'tenth item'},
- {title: 'tenth item'},
- {title: 'tenth item'},
- {title: 'tenth item'},
- {title: 'tenth item'},
- {title: 'tenth item'},
- {title: 'tenth item'},
- {title: 'tenth item'},
- {title: 'tenth item'},
- {title: 'tenth item'},
- {title: 'tenth item'},
- {title: 'tenth item'},
- {title: 'before last item'},
- {title: 'last item'},
-];
+function Item({title}) {
+ const [pressed, setPressed] = useState(false);
+ return (
+ setPressed(pressed => !pressed)}
+ style={[styles.item, styles.title]}>
+ {title}
+ {` ${pressed ? 'pressed' : ''}`}
+
+ );
+}
-// For this example we mock this value
-// Test the example with talkback enabled, otherwise se this value to false
-const TALKBACK_ENABLED = true;
+const renderItem = ({item}) => ;
+const ITEM_HEIGHT = 50;
-export function FlatList_inverted(): React.Node {
- const [flatlistHeight, setFlatlistHeight] = React.useState(null);
- const [contentHeight, setContentHeight] = React.useState(null);
- const [items, setItems] = React.useState(DATA_SHORT);
- const renderItem = ({item}) => {
- return (
-
- {item.title}
-
- );
- };
- let flatlistStyle = {};
- if (flatlistHeight !== null && contentHeight !== null && TALKBACK_ENABLED) {
- const diff = flatlistHeight - contentHeight;
- if (diff > 0) {
- // flatlistStyle = {position: 'relative', top: diff};
- flatlistStyle = {flexDirection: 'column-reverse'};
+const renderFlatList = ({item}) => ;
+
+const NEW_ITEMS = [
+ {title: '11 Item'},
+ {title: '12 Item'},
+ {title: '13 Item'},
+ {title: '14 Item'},
+ {title: '15 Item'},
+ {title: '16 Item'},
+ {title: '17 Item'},
+ {title: '18 Item'},
+];
+function NestedFlatList(props) {
+ TAG = 'Example ';
+ const [items, setItems] = useState(DATA);
+ const [disabled, setDisabled] = useState(false);
+ const [index, setIndex] = useState(DATA.length + 1);
+ const [counter, setCounter] = useState(0);
+ const getNewItems = startIndex => {
+ let newItems = [];
+ for (let i = startIndex; i < startIndex + 11; i++) {
+ newItems.push({title: `${i} Item`});
}
- }
- console.log('TESTING:: ' + 'flatlistStyle', flatlistStyle);
+ return newItems;
+ };
+ let flatlist = React.useRef(null);
+ console.log(TAG + 'items:', JSON.stringify(items));
return (
- <>
+
+
);
}
+const FlatList_nested = (): React.Node => {
+ return ;
+};
+
const styles = StyleSheet.create({
- contentContainerStyle: {
- flexDirection: 'column-reverse',
+ item: {
+ backgroundColor: '#f9c2ff',
+ padding: 20,
+ marginVertical: 8,
+ marginHorizontal: 16,
+ },
+ title: {
+ fontSize: 16,
},
});
export default ({
- title: 'Inverted',
- name: 'inverted',
+ title: 'Inverted (Talkback)',
+ name: 'inverted (Talkback)',
description: 'Test inverted prop on FlatList',
- render: () => ,
+ render: () => ,
}: RNTesterModuleExample);