React Native getting the top row in SectionList

Question

Is there a way to know the current top row in React Native's SectionList while scrolling? I would like to change another component according to the active section.

Answer 1

I have created an example. I don't know how you debug with react-native, but i use Reactotron for debugging. Here is the trick is to use onViewableItemsChanged. I have found and applied the solution getting help from here. When the view changes the list of visible items is kept on object info.viewableItems. The first item, is the visible item on the screen. And you may also get the item which section it belongs to. But you should be aware that, when the sticky section header changes, the first row will be the section data itself. I don't have so much experience with react-native but i hope this helps you.

import React, {
   Component,
} from 'react';

import {
   Text,
   View,
   StyleSheet,
   SectionList,
} from 'react-native';

import Reactotron from 'reactotron-react-native';

const leagues = [
   { title: 'LEAGUE 1', data: ['psg', 'caen', 'monaco',], key: 1 },
   { title: 'BUNDESLIGA', data: ['schalke', 'leverkusen', 'hannover'], key: 2 },
   { title: 'SERIE A', data: ['juventus', 'napoli', 'roma'], key: 3 },
   { title: 'Super Lig', data: ['galatasaray', 'fenerbahçe', 'beşiktaş'], key: 4 },
];


class SectionListExample extends Component {
    constructor(props) {
        super(props);
    }

    renderHeader(headerItem) {
        return (
            <View style={{ backgroundColor: '#000000' }}>
                <Text style={styles.headerText}>{headerItem.section.title}
                </Text>
            </View>
        );
    }

    onRenderSectionHeader({ section }) {
        return <Text style={{ padding: 5, color: 'blue' }}>{section.title}
          </Text>
    }

    _onViewableItemsChanged = (
        info = {
            viewableItems: {
                key,
                isViewable,
                item: { columns },
                index,
                section
            },
            changed: {
                key,
                isViewable,
                item: { columns },
                index,
                section
            }
        },
    ) => {
        // const reducer = (accumulator, currentValue) => {
        //     if (accumulator) {
        //         if (accumulator !== currentValue) {
        //             Reactotron.log(currentValue);
        //             // Reactotron.log(viewableItems)
        //         }
        //     }
        //     else {
        //         return false;
        //     }
        // }
        // info.changed.reduce(reducer);

        // you will see here the current visible items from top to bottom...
        Reactotron.log(info.viewableItems);
    };

    render() {
        return (
            <View style={{ flex: 1 }} >
                <SectionList
                    sections={leagues}
                    renderItem={
                        ({ item }) => {
                            return <Text style={{ padding: 40, color: 'red' 
                        }}>{item}</Text>
                        }
                    }
                    renderSectionHeader={
                        this.onRenderSectionHeader
                    }
                    stickySectionHeadersEnabled
                    onViewableItemsChanged={this._onViewableItemsChanged}
                />

            </View>
        );
    }

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        backgroundColor: '#FFFFFF',
    },
    text: {
        fontSize: 20,
        color: 'black',
    },
    headerText: {
        fontSize: 30,
        color: 'red'
    }

});


export { SectionListExample }