RecyclableList
High performance list view designed to work with high amount of items. RecyclableList reusing views that are no longer visible to render items instead of creating new view object.
Usage
import * as React from 'react';
import { Dimensions } from 'react-native';
import {
App,
Screen,
Image,
Text,
Pressable,
RecyclableList,
RecyclableListDataProvider,
RecyclableListLayoutProvider,
StyleSheet,
} from '@flexn/create';
const MARGIN_GUTTER = 20;
const ITEMS_IN_VIEWPORT = 3;
const { width } = Dimensions.get('window');
const dimensions = {
layout: { width: width / ITEMS_IN_VIEWPORT, height: 270 },
item: { width: width / ITEMS_IN_VIEWPORT - MARGIN_GUTTER, height: 250 },
};
function generateData(items = 50) {
const data: { backgroundImage: string, title: string }[] = [];
for (let index = 0; index < items; index++) {
data.push({
backgroundImage: `https://placekitten.com/${dimensions.item.width}/${dimensions.item.height + index}`,
title: 'Kitten name',
});
}
return data;
}
const MyComponent = () => {
const [dataProvider] = React.useState(
new RecyclableListDataProvider((r1, r2) => r1 !== r2).cloneWithRows(generateData())
);
const layoutProvider = React.useRef(
new RecyclableListLayoutProvider(
() => '_',
(_: string | number, dim: { width: number, height: number }) => {
dim.width = dimensions.layout.width;
dim.height = dimensions.layout.height;
}
)
).current;
return (
<App>
<Screen style={styles.recyclerContainer}>
<RecyclableList
dataProvider={dataProvider}
layoutProvider={layoutProvider}
rowRenderer={(_type: string | number, data: any, index: number, repeatContext: any) => {
return (
<Pressable
style={[
styles.recyclerItem,
{
width: dimensions.item.width,
height: dimensions.item.height,
},
]}
repeatContext={repeatContext}
onPress={() => {
console.log('Pressed!');
}}
>
<Image
source={{ uri: data.backgroundImage }}
style={{ width: '100%', height: '80%' }}
/>
<Text style={styles.recyclerItemText} numberOfLines={1}>
{data.title}
</Text>
</Pressable>
);
}}
horizontal
isHorizontal
style={styles.recycler}
scrollViewProps={{
showsHorizontalScrollIndicator: false,
}}
/>
</Screen>
</App>
);
};
const styles = StyleSheet.create({
recyclerContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
recycler: {
width: '100%',
height: 270,
},
recyclerItem: {
margin: 5,
justifyContent: 'flex-end',
alignItems: 'center',
},
recyclerItemText: {
color: '#000000',
fontSize: 14,
},
});
export default MyComponent;
Props
Since as core of RecyclableList Flexn Create using open source library, full API reference can be found at https://github.com/Flipkart/recyclerlistview#props. However this version is optimized to work with multiplatform environment and our Focus Manager so it has some API changes which is described below.
rowRenderer
Type: (type: string | number, data: any, index: number, repeatContext: any) => JSX.Element | JSX.Element[] | null
Method which returns component to be rendered. It's important to note that repeatContext
(last parameter of the function) always must be passed down to
Pressable or TouchableOpacity component in your return.
<RecyclableList
rowRenderer={(_type: string | number, data: any, index: number, repeatContext: any) => {
return <TouchableOpacity repeatContext={repeatContext} />;
}}}
/>
focusOptions
Type: RecyclerFocusOptions
Property which holds following related properties:
forbiddenFocusDirections
Type: ForbiddenFocusDirections[]
Can contain one or more directions. When RecyclableList has focus and direction is set an example to down
then RecyclableList will never lose focus despite the fact we're pressing
down button on our remote.