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).