Eugnis / react-native-timeline-flatlist

FlatList based timeline component for React Native for iOS and Android
https://www.npmjs.com/package/react-native-timeline-flatlist
MIT License
478 stars 69 forks source link

Is there a way to modifiy the starting point of event line ? #16

Open ramisalem opened 4 years ago

ramisalem commented 4 years ago

I am trying to align the circle to be in the center of each and every event, I tried to change potion of circleStyle but I could not find a way to move its line, as shown in the follwing screenshopts the line do not start from center and it do not reach the last event

circleStyle={ { alignSelf: 'center' } }

Screen Shot 1441-08-05 at 6 04 41 PM Screen Shot 1441-08-05 at 6 05 09 PM

Eugnis commented 4 years ago

Since line is drawn as border there's no easy way to put circle in center of event if you need that line to start from circle. You can try to use Timeline prop renderFullLine={true} alongside with circleStyle={ { alignSelf: 'center' } } then circle will be on center of event but line will be full including last event. Also you can set custom styles to line by using Timeline prop eventContainerStyle or custom style of each event's line segment by passing eventContainerStyle to event data objects (from version 0.7.1)

ramisalem commented 4 years ago

Hi thanks, for the response I have added the following style to TimeLine

eventContainerStyle: {
    height: '145%',
    paddingHorizontal: 15 ,
    marginTop: 18  
  }

alnog side with
circleStyle={ { alignSelf: 'center' } }

but the issue now is that the line do not fit btween the two circels as shown Screen Shot 1441-08-06 at 7 43 30 PM

vi1199 commented 3 years ago

Since line is drawn as border there's no easy way to put circle in center of event if you need that line to start from circle. You can try to use Timeline prop renderFullLine={true} alongside with circleStyle={ { alignSelf: 'center' } } then circle will be on center of event but line will be full including last event. Also you can set custom styles to line by using Timeline prop eventContainerStyle or custom style of each event's line segment by passing eventContainerStyle to event data objects (from version 0.7.1)

this helped me with border and card horizotal alignment , thanks

gaabrielricci commented 2 years ago

hi @ramisalem, how you can put your own custom card into timepoints?

jeferson-sb commented 2 years ago

I'm also trying to align the circle but also keep aligned with the start of the line, how do you manage to do that? renderFullLine does not seem to do anything at start of the border @Eugnis