React-native-beautiful-timeline-emir NPM

Installation

Add the dependency:

npm i react-native-beautiful-timeline

Peer Dependencies

IMPORTANT! You need install them

"react": ">= 16.x.x",
"react-native": ">= 0.55.x",
"moment": ">= 2.24.0",
"react-native-dash": ">= 0.0.11",
"react-native-androw" : ">= 0.0.34",
"@freakycoder/react-native-helpers": ">= 0.1.0",

Usage

Import

import Timeline from "react-native-beautiful-timeline";

Basic Usage

Data Format

The data format MUST like this example.

[
  {
    "date": 1574342522000,
    "data": [
      {
        "title": "React Native Beautiful Timeline",
        "subtitle": "Sed at justo eros. Phasellus.",
        "date": 1574342522000
      },
      {
        "title": "React Native",
        "subtitle": "Sed viverra. Nam sagittis.",
        "date": 1574342501000
      }
    ]
  },
  {
    "date": 1574248261000,
    "data": [
      {
        "title": "Timeline",
        "subtitle": "Morbi magna orci, consequat in.",
        "date": 1574248261000
      }
    ]
  },
  {
    "date": 1574125621000,
    "data": [
      {
        "title": "Beauty Timeline",
        "subtitle": "Nulla a eleifend urna. Morbi. Praesent.",
        "date": 1574125621000
      }
    ]
  }
]

Let's take a look a bit closer:

For each day & there would be limitless objects(Cards) for each day something like this example: Each card comes from data array and each day comes from each object from main array.

{
  "date": 1574342522000,
  "data": [
    {
      "title": "React Native Beautiful Timeline",
      "subtitle": "Sed at justo eros. Phasellus.",
      "date": 1574342522000
    },
    {
      "title": "React Native",
      "subtitle": "Sed viverra. Nam sagittis.",
      "date": 1574342501000
    }
  ]
}