[FlatList] Scrolling issues with FlatList when rows are variable height

[giladno]

I'm using a FlatList where each row can be of different height (and may contain a mix of both text and zero or more images from a remote server).

I cannot use getItemLayout because I don't know the height of each row (nor the previous ones) to be able to calculate.

The problem I'm facing is that I cannot scroll to the end of the list (it jumps back few rows when I try) and I'm having issues when trying to use scrollToIndex (I'm guessing due to the fact I'm missing getItemLayout).

I wrote a sample project to demonstrate the problem (simply try to scroll to the end with your finger - it won't allow you)

import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View, Image, FlatList } from 'react-native';
import autobind from 'autobind-decorator';

const items = count => [...Array(count)].map((v, i) => ({
    key: i,
    index: i,
    image: 'https://dummyimage.com/600x' + (((i % 4) + 1) * 50) + '/000/fff',
}));

class RemoteImage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            style: { flex: 1, height: 0 },
        };
    }

    componentDidMount() {
        Image.getSize(this.props.src, (width, height) => {
            this.image = { width, height };
            this.onLayout();
        });
    }

    @autobind
    onLayout(event) {
        if (event) {
            this.layout = {
                width: event.nativeEvent.layout.width,
                height: event.nativeEvent.layout.height,
            };
        }
        if (!this.layout || !this.image || !this.image.width)
            return;
        this.setState({
            style: {
                flex: 1,
                height: Math.min(this.image.height,
                    Math.floor(this.layout.width * this.image.height / this.image.width)),
            },
        });
    }
    render() {
        return (
            <Image
                onLayout={this.onLayout}
                source={{ uri: this.props.src }}
                style={this.state.style}
                resizeMode='contain'
            />
        );
    }
}

class Row extends Component {
    @autobind
    onLayout({ nativeEvent }) {
        let { index, item, onItemLayout } = this.props;
        let height = Math.max(nativeEvent.layout.height, item.height || 0);
        if (height != item.height)
            onItemLayout(index, { height });
    }

    render() {
        let { index, image } = this.props.item;
        return (
            <View style={[styles.row, this.props.style]}>
                <Text>Header {index}</Text>
                <RemoteImage src = { image } />
                <Text>Footer {index}</Text>
            </View>
        );
    }
}

export default class FlatListTest extends Component {
    constructor(props) {
        super(props);
        this.state = { items: items(50) };
    }

    @autobind
    renderItem({ item, index }) {
        return <Row
        item={item}
        style={index&1 && styles.row_alternate || null}
        onItemLayout={this.onItemLayout}
        />;
    }

    @autobind
    onItemLayout(index, props) {
        let items = [...this.state.items];
        let item = { ...items[index], ...props };
        items[index] = { ...item, key: [item.height, item.index].join('_') };
        this.setState({ items });
    }

    render() {
        return (
            <FlatList
                    ref={ref => this.list = ref}
                    data={this.state.items}
                    renderItem={this.renderItem}
                />
        );
    }
}

const styles = StyleSheet.create({
    row: {
        padding: 5,
    },
    row_alternate: {
        backgroundColor: '#bbbbbb',
    },
});

AppRegistry.registerComponent('FlatListTest', () => FlatListTest);

[leonidkuznetsov18]

@giladno why you use @autoBind? maybe => its very simple js binding!

[giladno]

@MrChe Arrow functions are bad for performances: https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md

[ugiacoman]

@giladno I'm facing the same issue. Any fixes?

Example: https://gfycat.com/SaltyBitterGermanspitz

[leonidkuznetsov18]

@giladno Very interesting information! Thk)

[giladno]

@ugiacoman no fix for me yet. I want to try the new 0.44 version to compare with.

[ugiacoman]

@giladno v0.44 Partially fixed it for me :)

[giladno]

@ugiacoman please explain "partially" :)

[ugiacoman]

@giladno So the FlatList correctly calculates the viewport so I can scroll all the way down. However if I add another component within the same Flexbox, it simply pushes it down and I end up not being able to scroll all the way. Now that I think about it, that may not be a bug. I need to do more testing to figure out the precise requirements so that I can ensure it renders correctly.

[ariona]

Hi @giladno any update for this? I am kinda facing the same problem, the current solution is to init the initialNumToRender to number of the item index i want to reach. and scrollToIndex when componentDidmounted. But it's kinda slow

[giladno]

@ariona Sadly, no solution yet for me :(

[Ashoat]

I have this problem on a project of mine. My solution has been to dynamically calculate the height of each cell as a function of the data it contains, and to include the height information in the data blob I pass to the list so that I can implement getItemLayout. I block the rendering of the list on height calculation for literally every cell, which may be prohibitive for some folks depending on list length. The hardest part has been calculating the height of text, since that can depend on font, word wrapping, etc. On iOS native this can be achieved via the sizeWithAttributes: method, but there's no equivalent in React Native, so I pulled together a higher-order component that invisibly renders Text with a given style to the screen in batches, waits for onLayout to get the height, and then returns the text height via a callback prop.

[giladno]

@Ashoat Could you please share the code where you render the component and calculate its height? Thanks.

[Ashoat]

@Gildano: np, here you go - https://gist.github.com/Ashoat/c283a40b052ae1e4571e944abcef0fd1

It's a React component called TextHeightMeasurer. You hand it:

• textToMeasure - an array of strings whose heights you want to measure
• allHeightsMeasuredCallback - a callback to call when measurement is completed
• style - the font (size, style, decoration, etc.) and content width should be the same as it will be when rendered in the list

Besides text, it should be possible to identify the height of everything else programmatically.

[giladno]

@Ashoat much appreciated buddy!!

[giladno]

@Ashoat Could you please contact me in private (check my profile page)? I have a consulting job for you.