data is not rendered

[ddikodroid]

i have this data

const timeline = ##[ { time: '1', title: 'Bergabung dalam project', description: '27 Desember 2021' }, { time: '2', title: 'Revisi 1', description: '28 Desember 2021' }, { time: '3', title: 'Revisi 2', description: '29 Desember 2021' }, { time: '4', title: 'Revisi 3', description: '30 Desember 2021' }, { time: '5', title: 'Revisi 4', description: '31 Desember 2021' }, { time: '6', title: 'Selesai', description: '1 Januari 2022' } ]

my screen

    <SafeAreaView style={styles.container}>
      <View style={styles.section}>
        <ReadMore>
          Lorem ipsum dolor sit amet,
          consectetur adipiscing elit,
          sed do eiusmod tempor incididunt ut labore
          et dolore magna aliqua. Ut enim ad minim veniam,
          quis nostrud exercitation
        </ReadMore>
      </View>
      <LineDivider />
      <View style={[styles.section, { alignSelf: 'flex-start' }]}>
        <Text style={styles.published}>Dipublish 27 Desember 2021</Text>
      </View>
      <LineDivider />
      <View style={{ flex: 1 }}>
      /** TIMELINE HERE */
        <Timeline
          data={timeline}
          renderDetail={renderTimeline}
          titleStyle={{ ...FONT.title }}
          circleSize={normalize(32)}
          circleColor={COLOR.pBlue}
        />
     /** TIMELINE HERE */
      </View>
    </SafeAreaView>

the result

am i doing something wrong?

[samuelhg200]

@ddikodroid I had the same issue, seems like using alignItems in the screens styles whas stopping the text from being displayed.

My code is working with this simple setup:

<Layout style={styles.screen}><Timeline data={data}/></Layout>

Styles:

const styles = StyleSheet.create({
    screen: {
        flex: 1,
        justifyContent: 'center'

    },
})

[ddikodroid]

@ddikodroid I had the same issue, seems like using alignItems in the screens styles whas stopping the text from being displayed.

My code is working with this simple setup:

<Layout style={styles.screen}><Timeline data={data}/></Layout>

Styles:

const styles = StyleSheet.create({
    screen: {
        flex: 1,
      justifyContent: 'center'

    },
})

Thank you for the explanation