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:

• React Native
• React Native State
• React Native Props

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: