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

Timeline not rendered #27

Closed Manfrin92 closed 4 years ago

Manfrin92 commented 4 years ago

Hello, I'm trying a simple example, but I noticed that when I use the Timeline component inside two consecutives Views Timeline doesn't get rendered. I don't know if I'm doing something wrong but the reason why I'm using those Views is for me to adjust the elements in the screen.

`<View style={{ flex: 1 }}> <View style={{ paddingTop: 12 }}> <View style={{ width: '100%', height: 150, backgroundColor: 'green' }} />

  <View style={{ paddingTop: 20, paddingBottom: 32 }}>
    <View style={{ width: '100%', height: 150, backgroundColor: 'red' }} />
  </View>

  <View>
    <Timeline
      data={staticData}
      showTime={false}
      lineColor="#C4C4C4"
      innerCircle="icon"
      style={{ backgroundColor: 'yellow' }}
    />
  </View>

  <View style={{ paddingTop: 10 }}>
    <View style={{ width: '100%', height: 80, backgroundColor: 'blue' }} />
  </View>
</View>`

If I remove these around it gets rendered, Am I doing something wrong?

Thanks.

Eugnis commented 4 years ago

Looks like inner view with timeline have 0 height here and won't show up. You can add style={{ flex: 1 }} to View that wraps timeline like that ... <View style={{ flex: 1 }}> <Timeline data={staticData} showTime={false} lineColor="#C4C4C4" innerCircle="icon" style={{ backgroundColor: 'yellow' }} /> </View> ...