Create Timeline App using React-Native
A Timeline App is a software application designed to display events in chronological order. The primary purpose of this timeline app is to present a visual representation of a sequence of events. In this article, we are going to implement a TimeLine App using React Native. It allows users to easily understand the chronological order and relationships between different points in time.
Prerequisite:
Preview of final output: Let us have a look at how the final output will look like.
Steps to Create React Native Application:
Step 1: Create a react native application by using this command in the command prompt
React-native init TimelineApp
Project Structure:
Example: Write the below source code into the App.js file.
Javascript
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; |
Step to run the Project:
- For android:
React-native run-android
- For IOS:
React-native run-ios
Output: