Installation
Add the dependency:
npm i react-native-beautiful-timelinePeer 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
}
]
}Basic Usage
Please take a look at above data formatting. Library itself solves everything for you if the data format is correct.
<Timeline data={data} />Configuration - Props
Coming Soon !
Future Plans
-
LICENSE -
README: Better Example Image -
README: GIF Asset -
README: Data Formatting - Configuration: Props
- Without Card Feature Data Formatting Implementation (Coming soon!)
- Write an article about the lib on Medium
Credits
Thank you for this awesome inspiration. Designed by Kamil Janus
Author
FreakyCoder, [email protected]
License
React Native Beautiful Timeline is available under the MIT license. See the LICENSE file for more info.