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
}
]
}
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.
-
本人新手web前端程序员一枚，应公司要求学习react-native框架，作为博客萌新来讲讲我这一个月学习历程，新人和前端的朋友们可以一看，其他都可看，反正不用你掏钱啊。 首先当然还是介绍一下react-native这个框架： 他是我们大FaceBook公司推出的一款专门用于App的JS框架，号称“Learn once, write anywhere”。本意是想兼容ios和android系统，写一
-
1. error: bundling failed: "Unable to resolve module `AccessibilityInfo` from `/Users/apple/WebstormProjects/carracing2/node_modules/react-native/Libraries/react-native/react-native-implementation.js`
-
Flex所有属性如下 export interface FlexStyle { alignContent?: | 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'space-between' | 'space-around' | undefined
-
React Native 学习总结 1. 写在前面 本次学习笔记是在研究RN（ReactNative缩写）的时候得出的一些感想和使用感受，以一个iOS初级开发人员的角度来记录下来的一些经验。如果有什么不对的，请指正。 在我看来，一个简单的app开发出发需要的是ui，值传递，网络，数据存储，ReactNative在这几个方面的很简单都涉及到了。 2. 简单介绍 今年3月份的时候FB发布出来的RN确
-
虽然React提供一系列的渲染机制，但有些Render变量是HTML字符串，需要以innerHTML嵌入到React组件中，但由于在组件Render之前无法通过id或class获取目标标签，所以无法通过element.innerHTML进行赋值； React提供了一个dangerouslySetInnerHTML属性，可以实现inner赋值操作。 render(){ let compsData=
-
react-beautiful-dnd (rbd) 是一款美观且简单易用的 React 列表拖拽库。 在线体验：https://react-beautiful-dnd.netlify.app/iframe.html?id=board--simple 特性 动画效果自然 无障碍：强大的键盘和屏幕阅读器支持 性能优秀 简洁而强大的 API，易于上手 与标准浏览器的互动性非常好 Unopinionate
-
本文向大家介绍react-native 启动React Native Packager，包括了react-native 启动React Native Packager的使用技巧和注意事项，需要的朋友参考一下 示例 在最新版本的React Native上，无需运行打包程序。它将自动运行。 默认情况下，这将在端口8081上启动服务器。要指定服务器所在的端口
-
百度移动统计SDK支持使用react native框架的H5页面统计，封装好的插件已经在github上开源，相关用法具体请参考：https://github.com/BaiduMobileAnalysis/baidumobstat-react-native。
-
The React Native environment has a lot of little quirks, so this documentation is aimed at helping smooth those over. Please feel free to create issues on GitHub for recommendations and additions to t
-
React Native 可以基于目前大热的开源JavaScript库React.js来开发iOS和Android原生App。而且React Native已经用于生产环境——Facebook Groups iOS 应用就是基于它开发的。 React Native的原理是在JavaScript中用React抽象操作系统原生的UI组件，代替DOM元素来渲染，比如以<View>取代<div>，以<Ima
-
本文向大家介绍react-native setState，包括了react-native setState的使用技巧和注意事项，需要的朋友参考一下 示例 要在应用程序中更改视图，可以使用setState-这将重新渲染您的组件及其任何子组件。setState在新状态和先前状态之间执行浅表合并，并触发组件的重新呈现。 setState 接受键值对象或返回键值对象的函数 键值对象 功能 使用函数对于基于