How to get index of each item in header component of native-base accordion? (React-Native)

Question

I am using Accordion from native-base to render my list of FAQs from an array of objects. I was unable to get the index of each rendered item in the custom render method _renderHeader method. Here is the code which I am currently using.

class FAQs extends Component {
    constructor(props) {
        super(props)
        this.state = {
            faqs: [
                {
                    "title": "This is the first question",
                    "description": "Answer to the first question"
                },
                {
                    "title": "This is the second question",
                    "description": "Answer to the second question"
                },
                {
                    "title": "This is the third question",
                    "description": "Answer to the third question"
                },
                {
                    "title": "This is the fourth question",
                    "description": "Answer to the fourth question"
                }
            ]
        }
    }

    _renderHeader = (item, expanded) => {
        return (
            <View>
                <View style={{paddingHorizontal: 5}}>
                    <Text style={{ fontSize: 14, color: 'white' }}>
     ------------>    // want to add index of each item here
                    </Text>
                </View>
                <View style={{paddingHorizontal: 5}}>
                    {expanded
                        ? <Icon type={"AntDesign"} style={{ fontSize: 18, color: 'white' }} name="upcircleo" />
                        : <Icon type={"AntDesign"} style={{ fontSize: 18, color: 'white' }} name="downcircleo" />}
                </View>
            </View>
        );
    }
    _renderContent = (item) => {
        return (
            .....
        );
    }

    render() {
        return (
            <SafeAreaView style={[styles.container, { backgroundColor: '#517283' }]}>
                ........
                ........
                ........
                ........
                    <Accordion
                        style={{
                            borderWidth: 0
                        }}
                        dataArray={this.state.faqData}
                        animation={true}
                        expanded={true}
                        renderHeader={this._renderHeader}
                        renderContent={this._renderContent}
                    />
                ........
                ........
                ........
                ........
            </SafeAreaView>
        );
    }
}

Initially, I thought of checking if the native-base Accordion provides any index parameter. But, then I found out that it doesn't. Below is a snippet of the Accordion props which indicates that the renderHeader function has only 2 params item and an expandable boolean

interface Accordion extends Testable {
        dataArray: Array<any>;
        headerStyle?: RnViewStyleProp;
        contentStyle?: RnViewStyleProp;
        renderHeader?: (item: any, expanded: boolean) => React.ReactElement<any>;
        renderContent?: (item: any) => React.ReactElement<any>;
        expanded?: number;
        icon?: string;
        expandedIcon?: string;
        iconStyle?: RnTextStyleProp;
        expandedIconStyle?: RnTextStyleProp;
        style?: RnViewStyleProp;
}

Any help is appreciated. Thanks :)

Answer 1

Found this logic helpful from this GitHub issue from the official native-base repo

https://github.com/GeekyAnts/NativeBase/issues/2480#issuecomment-482956365

I modified my _renderHeader method accordingly and it worked.

 _renderHeader = (item, expanded) => {
        return (
            <View>
                <View style={{paddingHorizontal: 5}}>
                    <Text style={{ fontSize: 14, color: 'white' }}>
                      {this.state.faqData.findIndex(e=> e.faqid===item.faqid)+1)}
                    </Text>
                </View>
                <View style={{paddingHorizontal: 5}}>
                    {expanded
                        ? <Icon type={"AntDesign"} style={{ fontSize: 18, color: 'white' }} name="upcircleo" />
                        : <Icon type={"AntDesign"} style={{ fontSize: 18, color: 'white' }} name="downcircleo" />}
                </View>
            </View>
        );
    }