thegamenicorus / react-native-timeline-listview Goto Github PK

I'm having this problem on my android/ios, when I create a timeline with more than 10 elements the 'dots' start not showing up

I've already tried setting up minWidth on timeContainerStyle

When the parent's containers props change, the ListView does not update

how to use horizontal react-native timeline listView

I can see, it has lineColor and lineWidth properties, but I would like to have some lines dotted. Is there a way to have custom lineStyle?

Hi,
I am trying to implement this project on another project.
I added this project with the refresh option but when I try to refresh, it is not working. If I do some modification to it the listview refresher activate itself and doesn't stop when hot reload is activated.

On the link on top you can find a sample of the project with a listview and they use the renderScrollComponent argument to add the project. So what I am asking is can I use the "options" option from the timeline-listview and use it at renderScrollComponent ? ( I already tried but no results)

Thank you

ListView is deprecated now, can you update it to Flatlist?

thanks for your lib, just a little question:
what would you suggest to do if implement the feature like onPress the data to edit them?

popup or navigate another view?
and after that dynamically change the data set?

finally would you provide the example in readme?

appreciate about your work again.

Hello,

It´s possible to add the date also?

@thegamenicorus Thanks a lot for the nice library

Can you please provide some hint about getting two column timeline as in https://dribbble.com/shots/600575-Timeline or https://dribbble.com/shots/1085018-Today

TIA

Im trying to display a custom view for the circle in the middle of the two column timeline. I use the renderCircle method and i can see that my custom view is being rendered. THe only issue is that the custom circle is being rendered to the far right of the screen instead of down the middle line that is rendered. Do i maybe need to change more styles or is this a bug?

can we show the time top of titile?

I want to use this library to one of my project that when user swipe to the top of the timeline, it can show a loading indicator and then update the timeline, and when the user swipe to near the end of the timeline, the timeline will automatically update more data and append to the timeline

I have this code :

class Medicine extends Component {
  constructor(){
    super()
    this.onEventPress = this.onEventPress.bind(this)
    this.renderSelected = this.renderSelected.bind(this)
    this.renderDetail = this.renderDetail.bind(this)
    this.state = {selected: '', visible:false}
  }

  onEventPress(data){
    this.setState({selected: data, visible:true})
  }

  renderImage(){
    console.log(this.state.selected)
    return <Image style={{width:DeviceWidth*0.3, height:DeviceWidth*0.3}} source={{uri: this.state.selected.url}}/>
  }

  renderDetail(rowData, sectionID, rowID){
    let title = <Text style={[global.global.SubHeaderText, {color:'green'}]}>{rowData.time}</Text>
    var desc = (
      <View>
        <View style={{flexDirection:'row'}}>
          <Text style={[global.global.TextBold, {width:DeviceWidth*0.17}]}>Radiology </Text>
          <Text style={[global.global.Text, {flexWrap:'wrap', width:DeviceWidth*0.7}]}>{rowData.cat}</Text>
        </View>
        <View style={{flexDirection:'row'}}>
          <Text style={[global.global.TextBold, {width:DeviceWidth*0.17}]}>Description </Text>      
          <Text style={[global.global.Text, {flexWrap:'wrap', width:DeviceWidth*0.7}]}>{rowData.description == null ? '-' : rowData.description}</Text>      
        </View>
        {this.renderImage()}
      </View>
    )
    return (
      <View style={{flex:1}}>
        {title}
        {desc}
      </View>
    )
  }

  render() {
    return (
      <View style={{flex:1}}>
        <Timeline 
          style={{flex: 1, marginTop:20}}
          showTime={false}
          separator={true}
          renderFullLine={true}
          circleColor={'green'}
          lineColor={'green'}
          data={this.data}
          onEventPress={this.onEventPress}
          renderDetail={this.renderDetail}
        />
      </View>
    );
  }
}

I want to show image on specific listview, but everytime I pressed an object of Listview, the image showing on all listview with the same image I've pressed,

How to displaying only one image while onPressed triggered?

The renderTime, renderCircle and renderDetail that you can override do not bound this to the component instance itself. This makes a reuse of the original render functions impossiblen which is useful if you want to add conditional rendering. Also, you cannot reach this.state, which, for instance, causes issues with positioning the circle.

I propose to use

this.renderTime = (this.props.renderTime?this.props.renderTime:this._renderTime).bind(this)
this.renderDetail = (this.props.renderDetail?this.props.renderDetail:this._renderDetail).bind(this)
this.renderCircle = (this.props.renderCircle?this.props.renderCircle:this._renderCircle).bind(this)

I recently used this component, which is displayed on ios, but cannot be displayed on android

This library is awesome, thanks.

I noticed that sometimes, my icon does not render, leaving the icon and the circle completely empty, they show up after re-rendering the screen...

I am setting the icon in the following way, in the Timeline props:
icon = {require('./path_to_icon.png'}

I will try setting the icon in the data object...
Sorry if i am missing something.

Hi, i can add multi description in one date like
18 Aug 2017 - To Destination one
- To Destination Two
19 Aug 2017 - To Cafe
- To Office

I needed a FlatList version of this great repo (thanks @thegamenicorus).
I was going to create a fork and then merge in, but unfortunately this repo has been dormant for ~7months.

For that reason, I've created a new repo called react-native-timeline-feed, which is entirely based off this repo with the exception of using a FlatList instead (and other things like flow).

I'll also be going through the issues listed here and see if they apply (and potentially fix) on the new repo.

Cheers!

I dynamically set the this.data array, however some icons are shown and first 11 ones are not.
I tried to check the data array and the data looks correct.

[{"time":"April 10, 2018","title":"Pill Cycle Start","description":"","lineColor":"#009688","icon":30},{"time":"May 3, 2018","title":"Today","description":"","lineColor":"#009688","icon":31},{"time":"May 6, 2018","title":"Pill Cycle End","description":"","lineColor":"#009688","icon":32},{"time":"May 8, 2018","title":"Pill Cycle Start","description":"","lineColor":"#009688","icon":30},{"time":"June 3, 2018","title":"Pill Cycle End","description":"","lineColor":"#009688","icon":32},{"time":"June 5, 2018","title":"Pill Cycle Start","description":"","lineColor":"#009688","icon":30},{"time":"July 1, 2018","title":"Pill Cycle End","description":"","lineColor":"#009688","icon":32},{"time":"July 3, 2018","title":"Pill Cycle Start","description":"","lineColor":"#009688","icon":30},{"time":"July 29, 2018","title":"Pill Cycle End","description":"","lineColor":"#009688","icon":32},{"time":"July 31, 2018","title":"Pill Cycle Start","description":"","lineColor":"#009688","icon":30},{"time":"August 26, 2018","title":"Pill Cycle End","description":"","lineColor":"#009688","icon":32},{"time":"August 28, 2018","title":"Pill Cycle Start","description":"","lineColor":"#009688","icon":30},{"time":"September 23, 2018","title":"Pill Cycle End","description":"","lineColor":"#009688","icon":32},{"time":"September 25, 2018","title":"Pill Cycle Start","description":"","lineColor":"#009688","icon":30},{"time":"October 21, 2018","title":"Pill Cycle End","description":"","lineColor":"#009688","icon":32},{"time":"October 23, 2018","title":"Pill Cycle Start","description":"","lineColor":"#009688","icon":30},{"time":"November 18, 2018","title":"Pill Cycle End","description":"","lineColor":"#009688","icon":32},{"time":"November 20, 2018","title":"Pill Cycle Start","description":"","lineColor":"#009688","icon":30},{"time":"December 16, 2018","title":"Pill Cycle End","description":"","lineColor":"#009688","icon":32},{"time":"December 18, 2018","title":"Pill Cycle Start","description":"","lineColor":"#009688","icon":30},{"time":"January 13, 2019","title":"Pill Cycle End","description":"","lineColor":"#009688","icon":32},{"time":"January 15, 2019","title":"Pill Cycle Start","description":"","lineColor":"#009688","icon":30},{"time":"February 10, 2019","title":"Pill Cycle End","description":"","lineColor":"#009688","icon":32},{"time":"February 12, 2019","title":"Pill Cycle Start","description":"","lineColor":"#009688","icon":30},{"time":"March 10, 2019","title":"Pill Cycle End","description":"","lineColor":"#009688","icon":32},{"time":"March 12, 2019","title":"Pill Cycle Start","description":"","lineColor":"#009688","icon":30},{"time":"April 7, 2019","title":"Pill Cycle End","description":"","lineColor":"#009688","icon":32},{"time":"April 9, 2019","title":"Pill Cycle Start","description":"","lineColor":"#009688","icon":30},{"time":"May 5, 2019","title":"Pill Cycle End","description":"","lineColor":"#009688","icon":32},{"time":"May 7, 2019","title":"Pill Cycle Start","description":"","lineColor":"#009688","icon":30},{"time":"June 2, 2019","title":"Pill Cycle End","description":"","lineColor":"#009688","icon":32},{"time":"June 4, 2019","title":"Pill Cycle Start","description":"","lineColor":"#009688","icon":30},{"time":"June 30, 2019","title":"Pill Cycle End","description":"","lineColor":"#009688","icon":32},{"time":"July 2, 2019","title":"Pill Cycle Start","description":"","lineColor":"#009688","icon":30},{"time":"July 28, 2019","title":"Pill Cycle End","description":"","lineColor":"#009688","icon":32},{"time":"July 30, 2019","title":"Pill Cycle Start","description":"","lineColor":"#009688","icon":30},{"time":"August 25, 2019","title":"Pill Cycle End","description":"","lineColor":"#009688","icon":32},{"time":"August 27, 2019","title":"Pill Cycle Start","description":"","lineColor":"#009688","icon":30},{"time":"September 22, 2019","title":"Pill Cycle End","description":"","lineColor":"#009688","icon":32},{"time":"September 24, 2019","title":"Pill Cycle Start","description":"","lineColor":"#009688","icon":30},{"time":"October 20, 2019","title":"Pill Cycle End","description":"","lineColor":"#009688","icon":32},{"time":"October 22, 2019","title":"Pill Cycle Start","description":"","lineColor":"#009688","icon":30},{"time":"November 17, 2019","title":"Pill Cycle End","description":"","lineColor":"#009688","icon":32},{"time":"November 19, 2019","title":"Pill Cycle Start","description":"","lineColor":"#009688","icon":30},{"time":"December 15, 2019","title":"Pill Cycle End","description":"","lineColor":"#009688","icon":32},{"time":"December 17, 2019","title":"Pill Cycle Start","description":"","lineColor":"#009688","icon":30},{"time":"January 12, 2020","title":"Pill Cycle End","description":"","lineColor":"#009688","icon":32},{"time":"January 14, 2020","title":"Pill Cycle Start","description":"","lineColor":"#009688","icon":30},{"time":"February 9, 2020","title":"Pill Cycle End","description":"","lineColor":"#009688","icon":32},{"time":"February 11, 2020","title":"Pill Cycle Start","description":"","lineColor":"#009688","icon":30},{"time":"March 8, 2020","title":"Pill Cycle End","description":"","lineColor":"#009688","icon":32},{"time":"March 10, 2020","title":"Pill Cycle Start","description":"","lineColor":"#009688","icon":30},{"time":"April 5, 2020","title":"Pill Cycle End","description":"","lineColor":"#009688","icon":32},{"time":"April 7, 2020","title":"Pill Cycle Start","description":"","lineColor":"#009688","icon":30},{"time":"May 3, 2020","title":"Pill Cycle End","description":"","lineColor":"#009688","icon":32},{"time":"May 5, 2020","title":"Pill Cycle Start","description":"","lineColor":"#009688","icon":30},{"time":"May 31, 2020","title":"Pill Cycle End","description":"","lineColor":"#009688","icon":32},{"time":"June 2, 2020","title":"Pill Cycle Start","description":"","lineColor":"#009688","icon":30},{"time":"June 28, 2020","title":"Pill Cycle End","description":"","lineColor":"#009688","icon":32}]

With latest version of React Native 0.55 this yellow box appears.

Having some issues when trying to use data imported from another file
import { trainingData } from '../data/trainingData_en';
this.data = [
{ trainingData }
]

The data file is setup in exact same way as in the example but only works if the data is actually in same file

How to add button options for list item , so we can perform custom actions on event
https://ibb.co/ciDYg9

https://github.com/thegamenicorus/react-native-timeline-listview#override-render

It should be renderDetail, not renderEvent

icon: require('../../images/alert.png')

In android, icon does not appear. Is icon supported for android?
I have set data[0].icon require('../../img/dot-green.png'); and innerCircle={'icon'}
Still, icon not showing?

<Timeline
    data={transformedData}
    onEventPress={(e) => {
        console.log(e);                                                        
    }}
/>

Crashes app with Out of memory error.

I want to display the date and time as the time (e.g. 01/01/2018 10:09 AM instead of only 10:09 AM) but if I do that, the time column takes too much space (i.e. his width is too large).

So, is there a way to display the time in two rows?

What I want is the time to be displayed like:

01/01/2018
10:09 AM

Instead of being displayed like:

01/01/2018 10:09 AM

Is there anyway in which I can specify which side should the entries be(left or right side of line).

I have a requirement in which I want to show deposit and withdrawals from a bank account. I was thinking all withdrawals to be on the left side while all deposits on the right side of the line.

Any help here please?

l

innerCircle={'dot'} , dot , icon ,
can you add another propery : text

I overide source code

I have a timeline view after a normal view. However,the timeline can only be shown after i scroll the view a little bit. Situation is the same even i removed the upper view.

 constructor(props){
    super(props)
    this.state = {
      data: [
        {time: '09:00', title: 'Archery Training', description: 'The Beginner Archery and Beginner Crossbow course does not require you to bring any equipment, since everything you need will be provided for the course. ', circleColor: '#009688',lineColor:'#009688'},
        {time: '10:45', title: 'Play Badminton', description: 'Badminton is a racquet sport played using racquets to hit a shuttlecock across a net.'},
        {time: '12:00', title: 'Lunch'},
        {time: '14:00', title: 'Watch Soccer', description: 'Team sport played between two teams of eleven players with a spherical ball. ',lineColor:'#009688'},
        {time: '16:30', title: 'Go to Fitness center', description: 'Look out for the Best Gym & Fitness Centers around me :)', circleColor: '#009688'}
      ]
    };
  }

  renderTimeline(){

    return(
      <Timeline
      circleSize={20}
      circleColor='rgb(45,156,219)'
      lineColor='rgb(45,156,219)'
      timeContainerStyle={{minWidth:52, marginTop: -5}}
      timeStyle={{textAlign: 'center', backgroundColor:'#ff9797', color:'white', padding:5, borderRadius:13}}
      descriptionStyle={{color:'gray'}}
      options={{
        style:{flex: 1, paddingTop:5 }
      }}
      data={this.state.data}
      />
    )
  }


  render() {
    return(
      <Content style={styles.container} >

      <View style={styles.caseDetailBox}>
      <Text style={{textDecorationLine: 'underline',alignSelf: 'center' ,marginBottom: '5%'}}> Order Summary </Text>
      <Text style={styles.caseDetailText}> Time: </Text>
      <Text style={styles.caseDetailText}> Address: </Text>
      <Text style={styles.caseDetailText}> Category: </Text>
      </View>

      {this.renderTimeline()}

      </Content>
    )
  }
}

I put the url of the image and it does not appear

I always got error

TypeError : Object is not a function (near' ...)(_templateObject);...')

I think it have better performance.

Im having this issue. I've tried to add zIndex to iconStyle but it didnt work. Please help

I think there is a typo or something in the ReadMe, at the Override Render feature.

You suppose to use "renderDetail" props, NOT "renderEvent".

This took me 15' looking back and forth your documentation.

Can we animate the line from top to bottom by filling the line colour one by one?

There is a nice screenshot for "Time container hiding" example. It would be great if we could add the same to the examples directory(Like the other examples).

Instead of having some predefined data like title, description, etc, how can I have extra detail bcz it is something basic! but this component forces me to use the same rules. is there any way to customize it?

Hi.. i got problem when generating release apk.. the error say:

android/app/build/intermediates/res/merged/release/drawable-mdpi/node_modules_reactnativetimelinelistview_node_modules_reactnativeelements_src_rating_images_heart.png: error: Invalid filename.

Hi,
Can it auto-scroll to a specific item in list?
Thanks

Hi!
I'm having trouble adding a new event to the timeline. Here's my code:

When I click on the touchable highlight, a new event is created but with no additional data.

Your help would be very much appreciated!

I have used the Basic Usage timeline list view in my ract-native page. It worked for its default data.
But when i include data via componentWillMount()

componentWillMount(){
    var list = CustomerStore.usagelist;
    this.setState({data:list});
    console.log(JSON.stringify(list));
}

the log is printing the data before runnning the render() but the listview is not showing
instead it throws a warning

Warning: In next release empty section headers will be rendered. In this release you can use 'enableEmptySections' flag to render empty section headers.

I have also used the flag, but there is no use.
<Timeline data={this.state.data} enableEmptySections={true} />
anybody have a solution for this...
I am using React-Native :0.38

How to delete specific Timeline?

Hello,

i want to use vector icons instead of image. Is it possible ?

Thanks in advance.

hai .. i m new in react native ..
can you guys help me with my issue ..