Package Exports
- react-native-beautiful-timeline
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-beautiful-timeline) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
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, kurayogun@gmail.com
License
React Native Beautiful Timeline is available under the MIT license. See the LICENSE file for more info.