Create Timeline App using React-Native

import React, { useState } from "react";
import {
	View,
	Text,
	StyleSheet,
	FlatList,
	ScrollView,
	TouchableOpacity,
} from "react-native";

const timelineData = [
	{
		year: 1857,
		event: "A significant uprising against British rule in India, involving widespread Indian participation, marking a pivotal moment in the struggle for independence.",
		color: "red",
	},
	{
		year: 1885,
		event: "The establishment of the Indian National Congress, a political party that played a key role in the Indian independence movement, advocating for self-rule and representing diverse Indian interests.",
		color: "green",
	},
	{
		year: 1919,
		event: "A tragic incident where British troops opened fire on a peaceful gathering in Amritsar, causing numerous casualties and sparking outrage, contributing to the demand for self-governance.",
		color: "blue",
	},
	{
		year: 1920,
		event: "Mahatma Gandhi launched a nationwide movement urging Indians to non-violently resist British rule, emphasizing non-cooperation with colonial authorities.",
		color: "orange",
	},
	{
		year: 1930,
		event: "Mahatma Gandhi symbolic act of civil disobedience, marching to the Arabian Sea to produce salt in defiance of British salt taxes, highlighting the unjust colonial policies.",
		color: "purple",
	},
	{
		year: 1942,
		event: "A mass protest against British rule, calling for an end to colonialism. It played a crucial role in India s journey toward independence.",
		color: "brown",
	},
	{
		year: 1947,
		event: "The year India gained independence from British rule, accompanied by the partition, creating India and Pakistan as separate nations. This event marked the end of British colonialism in the region.",
		color: "indigo",
	},
];

const Timeline = () => {
	const [expandedYears, setExpandedYears] = useState([]);

	const toggleYearExpansion = (year) => {
		setExpandedYears((prevExpandedYears) =>
			prevExpandedYears.includes(year)
				? prevExpandedYears.filter((y) => y !== year)
				: [...prevExpandedYears, year]
		);
	};

	return (
		<ScrollView contentContainerStyle={styles.container}>
			<View>
				<Text
					style={{
						fontSize: 40,
						marginLeft: 23,
						fontWeight: "bold",
						color: "green",
					}}
				>
					{" "}
					Timeline App{" "}
				</Text>
				<Text
					style={{
						fontSize: 20,
						marginLeft: 20,
						marginTop: 10,
						fontWeight: "bold",
						color: "green",
					}}
				>
					{" "}
					Indian independence era{" "}
				</Text>
				<Text
					style={{
						fontSize: 20,
						marginLeft: 75,
						marginBottom: 20,
						fontWeight: "bold",
						color: "green",
					}}
				>
					{" "}
					Timeline{" "}
				</Text>
			</View>
			<View style={styles.timeline}>
				<View style={styles.verticalLine} />
				<FlatList
					data={timelineData}
					keyExtractor={(item) => item.year.toString()}
					renderItem={({ item }) => (
						<TouchableOpacity
							onPress={() => toggleYearExpansion(item.year)}
						>
							<View
								style={[
									styles.timelineItem,
									{ borderLeftColor: item.color || "gray" },
								]}
							>
								<View
									style={[
										styles.circle,
										{
											backgroundColor:
												item.color || "gray",
										},
									]}
								>
									<Text style={styles.yearText}>
										{item.year}
									</Text>
								</View>
								<View style={styles.content}>
									{expandedYears.includes(item.year) && (
										<Text
											style={{
												color: item.color || "black",
												fontSize: 16,
											}}
										>
											{item.event}
										</Text>
									)}
								</View>
							</View>
						</TouchableOpacity>
					)}
				/>
			</View>
		</ScrollView>
	);
};

const styles = StyleSheet.create({
	container: {
		flexGrow: 1,
		paddingTop: 40,
		paddingBottom: 20,
		paddingHorizontal: 20,
	},
	timeline: {
		position: "relative",
	},
	verticalLine: {
		position: "absolute",
		backgroundColor: "black",
		width: 2,
		height: "100%",
		left: 40,
		zIndex: -1,
	},
	timelineItem: {
		flexDirection: "row",
		alignItems: "center",
		marginBottom: 20,
		marginLeft: 10,
		paddingLeft: 10,
	},
	circle: {
		width: 40,
		height: 40,
		borderRadius: 20,
		backgroundColor: "gray",
		justifyContent: "center",
		alignItems: "center",
		marginRight: 15,
	},
	yearText: {
		color: "white",
		fontWeight: "bold",
	},
	content: {
		flex: 1,
		flexDirection: "row",
		alignItems: "center",
	},
});

export default Timeline;