Content showing above the header part

[devWaleed]

Content is showing above header. Here is my code in functional component:

const SECTIONS = [
    {
        title: 'First Header',
        content: 'First content text',
    },
    {
        title: 'Second Header',
        content: 'Second content text',
    },
];

export default function Step1() {
    const [activeSections, setActiveSections] = useState([]);

    const _renderSectionTitle = (section) => {
        return (
            <View style={styles.content}>
                <Text>{section.content}</Text>
            </View>
        );
    };

    const _renderHeader = (section) => {
        return (
            <View style={styles.header}>
                <Text style={styles.headerText}>{section.title}</Text>
            </View>
        );
    };

    const _renderContent = (section) => {
        return (
            <View style={styles.content}>
                <Text>{section.content}</Text>
            </View>
        );
    };

    const _updateSections = (activeSections) => {
        console.log('activeSections', activeSections);
        setActiveSections(activeSections);
    };

    return (
        <View style={{ paddingVertical: 25, paddingHorizontal: 20 }}>
            <Text style={{ fontFamily: Fonts.paragraph }}>This is some text above accordian</Text>

            <Accordion
                sections={SECTIONS}
                activeSections={activeSections}
                renderSectionTitle={_renderSectionTitle}
                renderHeader={_renderHeader}
                renderContent={_renderContent}
                onChange={_updateSections}
                renderAsFlatList={false}
            />

            <Text style={{ fontFamily: Fonts.paragraph }}>This is some text below accordian</Text>
        </View>
    );
}

const styles = StyleSheet.create({
    header: {
        backgroundColor: '#efc',
        height: 50,
    },
    headerText: {
        color: 'red',
    },
    content: {
        marginVertical: 10,
        height: 50,
        backgroundColor: '#ef0',
        overflow: 'hidden',
    },
});

[jacklj]

Your _renderSectionTitle function is also rendering the section content (in addition to _renderContent):

    const _renderSectionTitle = (section) => {
        return (
            <View style={styles.content}>
                <Text>{section.content}</Text>
            </View>
        );
    }

This is copied from the example in the Readme (it's a bit of an odd example, but shows that the section title can also be rendered dynamically from the sections list).