react-native-timeline-theme ★25 - Collection of TimeLine theme. This package only use flexbox(without absolute) & FlatList

Overview

React Native TimeLine Theme

Collection of TimeLine theme. This package only use flexbox(without absolute) & FlatList

Get Started

Inspired by react-native-timeline-listview

Installation

npm i react-native-dash && npm i react-native-timeline-theme --save

or

yarn add react-native-dash && yarn add react-native-timeline-theme

That's all!

Usage

Simple

const data = [
  {
    title: 'Wake up',
    description: 'Remember tooth brushing and read notes on the tablet',
    time: new Date("March 6, 2018 6:15:00"),
  },
  {
    title: 'Eatting',
    description: 'Eat breakfast: bread and drink milk',
    time: new Date("March 6, 2018 7:00:00"),
  },
  {
    title: 'Working',
    description: 'Go to ABX Company and working react-native',
    time: new Date("March 6, 2018 7:35:00"),
  },
  {
    title: 'Relax',
    description: 'Listen to music "Hello Vietnam" song',
    time: new Date("March 6, 2018 14:15:00"),
  },
]
...
 <TimeLine
  data={data}
  isRenderSeperator
  columnFormat={'two-column'}
/>

Add icon into timeline

import Icon from 'react-native-vector-icons/MaterialIcons';
import IconFont from 'react-native-vector-icons/FontAwesome';

const data = [
  {
    title: 'Wake up',
    description: 'Remember tooth brushing and read notes on the tablet',
    time: new Date("March 6, 2018 6:15:00"),
    renderIcon: () => <Icon name={'alarm'} size={40} color={'#304ffe'}/>,
    lineColor: '#304ffe',
    titleStyle: {color: '#304ffe'},
    renderTimeBottom: () => (<View style={{ alignItems: 'flex-end', flex: 1, backgroundColor: 'white', borderRadius: 6, padding: 3 }}> <Text>(06.30)</Text></View>)
  },
  {
    title: 'Eatting',
    description: 'Eat breakfast: bread and drink milk',
    time: new Date("March 6, 2018 7:00:00"),
    renderIcon: () => <IconFont name={'coffee'} size={20} color={'#546e7a'}/>,
    lineColor: '#546e7a',
    titleStyle: {color: '#546e7a'},
  },
  {
    title: 'Working',
    description: 'Go to ABX Company and working react-native',
    time: new Date("March 6, 2018 7:35:00"),
    renderIcon: () => <IconFont name={'briefcase'} size={20} color={'#dd2c00'} />,
    lineColor: '#dd2c00',
    titleStyle: {color: '#dd2c00'},

  },
  {
    title: 'Relax',
    description: 'Listen to music "Hello Vietnam" song',
    time: new Date("March 6, 2018 14:15:00"),
    renderIcon: () => <IconFont name={'headphones'} size={20} color={'#006064'}/>,
    lineColor: '#006064',
    titleStyle: {color: '#006064'},

  },
]
...
 <TimeLine
  data={data}
  isRenderSeperator
  widthLineContainer={65}
  style={{margin: 16}}
/>

Render Different Detail

import { View, Text, StyleSheet, Image } from 'react-native';
import TimeLine from '../lib/index'
import Icon from 'react-native-vector-icons/MaterialIcons';
import IconFont from 'react-native-vector-icons/FontAwesome';

const data = [
  {
    title: 'Wake up',
    description: 'Remember tooth brushing and read notes on the tablet',
    time: new Date("March 6, 2018 6:15:00"),
    renderIcon: () => <Icon name={'alarm'} size={40} color={'#304ffe'}/>,
    lineColor: '#304ffe',
    titleStyle: {color: '#304ffe'},
    renderTimeBottom: () => (<View style={{ alignItems: 'flex-end', flex: 1, backgroundColor: 'white', borderRadius: 6, padding: 3 }}> <Text style={{fontSize: 8, fontWeight: 'bold'}}>Important</Text>
    <Text style={{fontSize: 8, fontWeight: 'bold', color: '#b40000'}}>Lazy time</Text><Text style={{fontSize: 8, fontWeight: 'bold', textAlign: 'right'}}>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text</Text></View>),
    renderDetail: ({title, description, titleStyle}, index) => <View><Text style={{ fontSize: 20, fontWeight: 'bold'}}>{title}</Text><Image style={{width: 200, height: 150}} source={require('./assets/wake.gif')} /><Text>{description}</Text></View>
  },
  {
    title: 'Eatting',
    description: 'Eat breakfast: bread and drink milk',
    time: new Date("March 6, 2018 7:00:00"),
    renderIcon: () => <IconFont name={'coffee'} size={20} color={'#546e7a'}/>,
    lineColor: '#546e7a',
    titleStyle: {color: '#546e7a'},
    renderDetail: ({title, description, titleStyle}, index) => <View><Text style={[titleStyle, { fontWeight: 'bold'}]}>{title}</Text><Image style={{width: 200, height: 150}} source={require('./assets/eat.gif')} /><Text>{description}</Text> </View>
  },
  {
    title: 'Working',
    description: 'Go to ABX Company and working react-native',
    time: new Date("March 6, 2018 7:35:00"),
    renderIcon: () => <IconFont name={'briefcase'} size={20} color={'#dd2c00'} />,
    lineColor: '#dd2c00',
    titleStyle: {color: '#dd2c00'},

  },
  {
    title: 'Relax',
    description: 'Listen to music "Hello Vietnam" song',
    time: new Date("March 6, 2018 14:15:00"),
    renderIcon: () => <IconFont name={'headphones'} size={20} color={'#006064'}/>,
    lineColor: '#006064',
    titleStyle: {color: '#006064'},

  },
]

More Detail see this

Props

This package is used FlatList, therefore you can override all the props at this

Prop Description Type Default
data Data of timeline array []
styleContainer Styles applied to the container StyleSheet object {flex: 1}
columnFormat Format of column timeline: 'single-column-left', 'single-column-right', 'two-column' string 'single-column-left'
renderIcon Render icon of timeLine function null
renderDetail Render Detail(Event) of timeline function null
isRenderSeperator Render Seperate line boolean false
widthLineContainer Width of Line Container number 30
showAmPm Show AM or PM boolean true
timeFormat Time format, please read this string 'hh.mm'
innerCircleType Type of inner circle: 'dot' string none
spacingDot Spacing around dot number 4
dotColor The color of dot string 'white'
dotSize Size of dot number 4
marginTopCircle You can marginTop alignTop to adjust the line number number 8
circleColor Color of circle string #37474f
circleSize Size of circle number 8
renderTimeBottom Render Component Below Time function null
renderTimeBottom Render Component Below Time function null
lineWidth With of line number 0.75
lineColor Color of line string #909090
dashLine style of line: dash bool false
renderSeperateTotal vertical line in the bottom of event bool false

Todos

  • Add icon for line event
  • Add dash line
  • Add dark, light theme
  • Add theme seperator

Contribute

Any help this module will be approciate!

License

MIT

You might also like...
React Native's customizable, RTL-supported, elegant, lazy-loading-ready Timeline component
React Native's customizable, RTL-supported, elegant, lazy-loading-ready Timeline component

react-native-just-timeline React Native's customizable, RTL-supported, elegant, lazy-loading-ready Timeline component Overview React Native Just Timel

Get thumbnail from local media. Currently, it only supports for video.

react-native-thumbnail Get thumbnail from local media. Currently, it only supports for video. Getting started $ npm install react-native-thumbnail --s

MindInventory react-native-awesome-clock package can be used to show this awesome Clock UI in your react-native projects
MindInventory react-native-awesome-clock package can be used to show this awesome Clock UI in your react-native projects

AwesomeClockView MindInventory react-native-awesome-clock package can be used to show this awesome Clock UI in your react-native projects. Installatio

:package: Android Native Kit for React-Native
:package: Android Native Kit for React-Native

React Native Android Kit A set of native Android UI components and modules for React Native framework. The purpose of this kit is to offer to React Na

A android like toast for android and ios, android use native toast, ios use UIView+Toast

React Native Toast (remobile) A android like toast for react-native support for ios and android Installation npm install @remobile/react-native-toast

A collection of animated loading indicators for React Native
A collection of animated loading indicators for React Native

react-native-spinkit A collection of animated loading indicators React native port of SpinKit. Use your beautiful spinner to load your IAP 👇 Preview

React Native Grid/Collection View component
React Native Grid/Collection View component

react-native-grid-view THIS PROJECT IS NO LONGER MAINTAINED, PLEASE GRAB THE SOURCE CODE AND TAKE OWNERSHIP IN YOUR OWN PROJECT IF YOU FIND IT USEFUL.

A collection of common UI components for react native mobile apps.
A collection of common UI components for react native mobile apps.

React Native Toolkit Stay tuned! Feel adventurous? Check out examples and get started! :) Navigation bar Custom navigation bar style per scene, includ

A collection of useful units and a simple grid implementation for responsive layouts in React Native.
A collection of useful units and a simple grid implementation for responsive layouts in React Native.

react-native-units A collection of useful units and a simple grid implementation for responsive layouts in React Native. React Native uses density-ind

Comments
  • Cannot add a child that doesn't have a YogaNode...

    Cannot add a child that doesn't have a YogaNode...

    import React, { Component } from 'react';
    import { StyleSheet, Text, View, TouchableOpacity, Image } from 'react-native';
    import TimeLine from 'react-native-timeline-theme';
    import Icon from 'react-native-vector-icons/MaterialIcons';
    import IconFont from 'react-native-vector-icons/FontAwesome';
    
    const data = [
      {
        title: 'Wake up',
        description: 'Remember tooth brushing and read notes on the tablet',
        time: new Date("March 6, 2018 6:15:00"),
        renderIcon: () => <Icon name={'alarm'} size={40} color={'#304ffe'} />,
        lineColor: '#304ffe',
        titleStyle: { color: '#304ffe' },
        renderTimeBottom: () => (<View style={{ alignItems: 'flex-end', flex: 1, backgroundColor: 'white', borderRadius: 6, padding: 3 }}> <Text style={{ fontSize: 8, fontWeight: 'bold' }}>Important</Text>
          <Text style={{ fontSize: 8, fontWeight: 'bold', color: '#b40000' }}>Lazy time</Text><Text style={{ fontSize: 8, fontWeight: 'bold', textAlign: 'right' }}>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text</Text></View>),
        renderDetail: ({ title, description, titleStyle }, index) => <View><Text style={{ fontSize: 20, fontWeight: 'bold' }}>{title}</Text><Image style={{ width: 200, height: 150 }} source={'https://cdn-images-1.medium.com/max/1200/1*jDIj2SKAE-Bp32owLoHDjw.png'} /><Text>{description}</Text> </View>
      },
      {
        title: 'Eatting',
        description: 'Eat breakfast: bread and drink milk',
        time: new Date("March 6, 2018 7:00:00"),
        renderIcon: () => <IconFont name={'coffee'} size={20} color={'#546e7a'} />,
        lineColor: '#546e7a',
        titleStyle: { color: '#546e7a' },
        renderDetail: ({ title, description, titleStyle }, index) => <View><Text style={[titleStyle, { fontWeight: 'bold' }]}>{title}</Text><Image style={{ width: 200, height: 150 }} source={'https://cdn-images-1.medium.com/max/1200/1*jDIj2SKAE-Bp32owLoHDjw.png'} /><Text>{description}</Text> </View>
      },
      {
        title: 'Working',
        description: 'Go to ABX Company and working react-native',
        time: new Date("March 6, 2018 7:35:00"),
        renderIcon: () => <IconFont name={'briefcase'} size={20} color={'#dd2c00'} />,
        lineColor: '#dd2c00',
        titleStyle: { color: '#dd2c00' },
    
      },
      {
        title: 'Relax',
        description: 'Listen to music "Hello Vietnam" song',
        time: new Date("March 6, 2018 14:15:00"),
        renderIcon: () => <IconFont name={'headphones'} size={20} color={'#006064'} />,
        lineColor: '#006064',
        titleStyle: { color: '#006064' },
    
      },
    ]
    
    export  class TimelineView extends Component {
     
      constructor(props) {
        super(props)
        this.state = {
        }
      }
    
      render() {
        return (
          <View style={styles.container}>
            <TimeLine
              data={data}
              // isRenderSeperator
              widthLineContainer={65}
              style={{ margin: 16 }}
              detailContainerStyle={{ borderRadius: 5, borderWidth: 1, borderColor: '#aeaeae', padding: 6, marginBottom: 6, }}
            />
          </View>
        );
      }
    }
    
    const styles = StyleSheet.create({
      container: {
        flex: 1,
      },
    });
    

    @tomzaku this simple code gives me this error:

    "Cannot add a child that doesn't have a YogaNode to a parent without a measure function! (Trying to add a 'ReactVirtualTextShadowNode' to a 'LayoutShadowNode')"

    opened by rahultatvasoft 3
Owner
Zaku
I love doing magic but hate doing tricks
Zaku
Animated Flatlist for React-Native

React Native Animated Flatlist Animated Flatlist for React-Native View demo on Snack Install npm i -S react-native-animated-flatlist or yarn add react

vo[bi] - Decentralized software crafters. 56 Jul 21, 2022
This is a high performance list view for React Native with support for complex layouts using a similar FlatList usage to make easy the replacement

This is a high performance list view for React Native with support for complex layouts using a similar FlatList usage to make easy the replacement. This list implementation for big list rendering on React Native works with a recycler focused on performance and memory usage and so it permits processing thousands items on the list.

Marco Cesarato 415 Sep 30, 2022
☑ī¸ A customiseable FlatList that allows you to select multiple rows

react-native-select-multiple A customiseable FlatList that allows you to select multiple rows. Install npm install react-native-select-multiple Usage

TABLEFLIP 156 Sep 19, 2022
A theme friendly, easy to use react-native toast component built using styled-components and styled-system.

react-native-styled-toast Themeable react-native toast component built using styled-components & styled-system. Features Pure JS implementation Suppor

Jean Verster 274 Sep 15, 2022
An easy-to-use, highly customizable react-native package for searching and selecting from a list of gifs and/or stickers using the Tenor and/or the Giphy API

react-native-gif-search An easy-to-use, highly customizable react-native package for searching and selecting from a list of gifs and/or stickers using

null 29 Jul 30, 2022
Compress video for react native. Only for iOS, Android will be coming.

react-native-compress Compress local video for react native. Only for iOS, Android will be coming. Getting started $ npm install react-native-compress

Hau Vo 33 Nov 4, 2021
React Native Super Alert - 3 alerts in just only component

React Native Super Alert is a component where you can use various types of alerts and notifications without having to import the library on all screen

Alan Ribeiro 6 Aug 28, 2022
A marquee label for react-native(if you use js pure marquee, use remobile/react-native-marquee[ https://github.com/remobile/react-native-marquee ])

React Native MarqueeLabel (remobile) A marquee label for react-native if you use js pure marquee, use remobile/react-native-marquee[ https://github.co

YunJiang.Fang 114 Jul 18, 2022
Based on pure JS scripts, without relying on native, no need for react-native link, Title / Header / Tabs / Sticky / Screen components can be flexibly configured, among which Tabs / Sticky can slide When it reaches the top, it will be topped.

react-native-scrollable-tabview English | įŽ€äŊ“中文 Based on pure JS scripts, without relying on native, no need for react-native link,Title / Header / Tab

null 133 Sep 20, 2022
Timeline component for React Native App

React Native Timeline Listview Timeline component for React Native App work for Android and iOS Table of Contents Installation Usage Basic usage Custo

Watcharachai Kanjaikaew 1.1k Sep 24, 2022