Timeline now show until first scroll

[rayhk6]

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>
    )
  }
}

[luciluci]

since you made data a state you must set it as: this.setState({data: ...}) ... content will be a data array, you can define it separately

[marcoizzo]

same problem... nativebase?

[thegamenicorus]

@Hi all You can set removeClippedSubviews to false in options to fix this problem.

<Timeline 
options={{  
  ...
  removeClippedSubviews: false
}}
/>