Skip to content

How to change the position of the line and the dot? #15

Description

@carmenmitru

Hello,

I have a timeline component where I want to setup a margin to the VerticalSeparator :

 <Timeline
              data={data}
              endWithCircle
              renderItem={this.renderItem}
            />
 <Timeline.Row key="origin">
        <Timeline.VerticalSeparator  style={{marginTop:40}}>
          <Timeline.Circle color={theme.COLORS.NEUTRAL}>
            <Gradient
              start={[0.45, 0.45]}
              end={[0.8, 0.8]}
              colors={GRADIENT_PINK}
              style={[styles.circleGradient, styles.dotStyle]}
            />
          </Timeline.Circle>
          <Timeline.Line color={LINE_COLOR} />
        </Timeline.VerticalSeparator>
        <Timeline.Event
          style={styles.event}
        >
          <View style={[styles.card, styles.titleAndTimeContainer]}>
            <Timeline.Title textStyle={styles.title}>
              {item.title}
            </Timeline.Title>

            <Timeline.Description textStyle={styles.description}>
              {item.description}
            </Timeline.Description>
          </View>
        </Timeline.Event>
      </Timeline.Row>

The problem is that some parts line is missing.
IMG_1428

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions