FlashList

High performance list powered by Shopify Flash List designed to work with high amount of items. Flash List reusing views that are no longer visible to render items instead of creating new view object.

Usage

import * as React from 'react';
import { App, FlashList, Pressable, Image, CreateListRenderItemInfo } from '@flexn/create';

const MyComponent = () => {
    const [data] = React.useState(generateData());

    const rowRenderer = ({ item, focusRepeatContext }: CreateListRenderItemInfo<any>) => {
        return (
            <Pressable
                style={styles.packshot}
                focusRepeatContext={focusRepeatContext}
                focusOptions={{
                    animator: {
                        type: 'border',
                        focus: {
                            borderColor: 'blue',
                            borderWidth: 5,
                        },
                    },
                }}
            >
                <Image source={{ uri: item.backgroundImage }} style={styles.image} />
            </Pressable>
        );
    };

    return (
        <App>
            <Screen style={styles.recyclerContainer}>
                <FlashList data={data} renderItem={rowRenderer} horizontal type="row" />
            </Screen>
        </App>
    );
};

export default MyComponent;

Props

It inherits all the properties from Shopify Flash List. However this version is optimized to work with multi platform environment and our Focus Manager so it has some API changes which is described below.

type

Android TV Fire TV Apple TV webOS Tizen

Type: grid | row

Describes type of list either is grid or row. It helps focus manager to navigate.

rowRenderer

Required

Type: CreateListRenderItemInfo

Method which returns component to be rendered. It's important to note that focusRepeatContext(last parameter of the function) always must be passed down to Pressable or TouchableOpacity component in your return.

<FlashList
    rowRenderer={({ item, focusRepeatContext }: CreateListRenderItemInfo<any>) => {
        return <TouchableOpacity repeatContext={repeatContext} />;
    }}
/>

focusOptions

Android TV Fire TV Apple TV webOS Tizen

Type: RecyclerFocusOptions

Property which holds following related properties:

forbiddenFocusDirections

Type: ForbiddenFocusDirections[]

Can contain one or more directions. When Flash List has focus and direction is set an example to down then Flash List will never lose focus despite the fact we're pressing down button on our remote.

focusOptions.nextFocusUp

Type: string | string[]

Forces next focus direction for component when user navigates up and end of up direction is reached in list. It accepts string with focus key or array with multiple focus keys. In that case first found is executed by focus engine.

focusOptions.nextFocusDown

Type: string | string[]

Forces next focus direction for component when user navigates down and end of down direction is reached in list. It accepts string with focus key or array with multiple focus keys. In that case first found is executed by focus engine.

focusOptions.nextFocusLeft

Type: string | string[]

Forces next focus direction for component when user navigates left and end of left direction is reached in list. It accepts string with focus key or array with multiple focus keys. In that case first found is executed by focus engine.

focusOptions.nextFocusRight

Type: string | string[]

Forces next focus direction for component when user navigates right and end of right direction is reached in list. It accepts string with focus key or array with multiple focus keys. In that case first found is executed by focus engine.

focusOptions.hasPreferredFocus