Skip to content

Conversation

@lidio601
Copy link

@lidio601 lidio601 commented Feb 4, 2019

Use case:

const data = [
      {key: 1, title: '123 Napier Road', description: 'Walk 400 m (1 min)'},
      {key: 2, time: 'at 1:09 PM', title: 'St Patrick', description: '2 stops  (20 min)', lineColor: LIGHT_BLUE, circleColor: LIGHT_BLUE, dotColor: WHITE, lineWidth: 12 },
      {key: 3, time: 'at 2:09 PM', title: 'Toronto Eaton Centre', description: '2 stops  (20 min)', lineColor: BLUE, circleColor: BLUE, dotColor: WHITE, lineWidth: 12 },
      {key: 4, title: 'Union Station', description: 'Walk 100 m (1 min)'},
      {key: 5, title: 'Auckland ', description: 'Auckland'},
    ]

<Timeline
            data={data}

            circleSize={18}
            circleColor={TRANSPARENT}
            innerCircleType="dot"
            dotColor={DARK_GRAY}

            lineColor={GRAY}
            lineWidth={1}

            timeContainerStyle={{
              width: 70,
            }}
            timeStyle={{
              textAlign: 'center',
              paddingTop: 10,
            }}

            titleStyle={{
              top: -30,
            }}
            descriptionStyle={{
              color: 'gray',
              top: -30,
            }}

            flatListProps={{
              style: {
                paddingTop: 50,
              }
            }}

            endWithCircle
            renderFullLine

            keyExtractor={item => `row${item.key}`}

            centerLineAndCircle
          />

When having different line width the timeline is not centered:

schermata 2019-02-05 alle 11 02 36

After this fix, it looks like this:

schermata 2019-02-05 alle 10 57 28

@lidio601
Copy link
Author

lidio601 commented Feb 4, 2019

hi there, sorry I re-used the same PR to upload another fix: this is to center the circle in the middle of the two segments like this:

schermata 2019-02-05 alle 11 40 00

@Johan-dutoit
Copy link
Owner

Johan-dutoit commented Feb 7, 2019

Hey, I'll take a look at this soon.
I like the idea, I'm just not fully convinced it should be the default, especially with no way to undo it.

@lidio601
Copy link
Author

lidio601 commented May 7, 2019

Hi @Johan-dutoit I've updated the PR with an extra parameter centerLineAndCircle to enable this alignment.
Otherwise it should work as before.

@lidio601
Copy link
Author

@Johan-dutoit if you are interested in this one I can port this one to the 2.0

@Johan-dutoit
Copy link
Owner

@lidio601 Definitely interested in this one. What's your thinking around it? perhaps making it a preset?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants