#StackBounty: #reactjs #react-native #react-native-flatlist #react-native-sectionlist How could I structure this React Native Section L…

Bounty: 300

So I want to use RN Section list in a sort of unorthodox way.

I want the section list to pass off rendering to a component as the renderings won’t be very uniform.

I want to use section list so as you scroll you still get to see the headers.

I made a component that takes in children and renders them in a section list like so:

class SomeSectionList extends Component {

    render() {
        let sections = React.Children.map(this.props.children, (Child, index) => {
            return {title: Child.type.title, data: [''], renderItem: () => Child, index }
    });

        return (
            <SectionList

                renderSectionHeader={({section}) => {
                    return <Text style={{ fontWeight: "bold" }}>{section.title}</Text>
        }}
                sections={sections}
                keyExtractor={(item, index) => item + index}
            />
        );
    }
}

And the usage would be something like:

                <SomeSectionList>
                    <Comp1 />
                    <Comp2 />
                </SomeSectionList>

However, my issue is. Say in this case Comp1 does not render anything from it’s component, I want to be able to hide it’s section from the section list.

How could the SomeSectionList component know that it didn’t render anything or didn’t have the data to render anything so it can hide it’s section and it’s header?

Any suggestions would be great. I feel like using SectionList for this is overkill (but it makes showing the headers nicer) so open to alternatives as well.


Get this bounty!!!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.