React Native: Rendering of List not working

Question

I currently stuck in a problem with rendering a list in react-native. This code renders only the first array element of the cards array, but not all array entries. Did I missed something?

Cards Array example:

const cards = [{"created_at": "2022-01-25 20:07:14", "description": "Descriptiontext", "id": 1, "title": "Titel 1", "updated_at": "2022-02-25 07:41:18.304291", "userid_fk": 2}, {"created_at": "2022-01-25 20:07:14", "description": "Descriptiontext 2", "id": 2, "title": "Titel 2", "updated_at": "2022-02-25 07:41:18.304291", "userid_fk": 2}]

<ScrollView>
                {cards.map((element: any) => (
                  <Layout
                    key={element.id}
                    style={[
                      globalStyles.container,
                      {flexDirection: 'row', justifyContent: 'space-between'},
                    ]}>
                    <Layout>
                      <Text style={element.title} numberOfLines={1}>
                        {element.title}
                      </Text>
                      <Text
                        style={styles.desc}
                        ellipsizeMode={'tail'}
                        numberOfLines={1}
                        lineBreakMode="tail">
                        {element.description}
                      </Text>
                      <Text appearance={'hint'} style={styles.date}>
                        Erstellt am:{' '}
                        {moment(String(element.created_at)).format(
                          'DD.MM.YYYY HH:mm',
                        )}
                      </Text>
                    </Layout>
                    <TouchableOpacity
                      onPress={() => deleteCard(element.id)}>
                      <Icon
                        name="trash"
                        fill={silver}
                        style={globalStyles.icon}
                      />
                    </TouchableOpacity>
                  </Layout>
                ))}
 </ScrollView>

Answer 1

Here is an example of using a map, I provided some code as well as a working snack expo here.

const Screen3 = (props) => {
  const renderList = (props) => {
    return List.map((item, i) => {
      return (
        <View style={{ paddingLeft: scale(10), paddingRight: scale(10), paddingTop: scale(20) }}>
          <View
            style={{
              backgroundColor: 'white',
              width: scale(330),
              height: scale(85),
              borderRadius: scale(10),
            }}>
            <Text>{item.name}</Text>
          </View>
        </View>
      );
    });
  };

 return (
    <View style={{ backgroundColor: '#d1cfcf' }}>
        <ScrollView style={{ height: 1000 }}>{renderList()}</ScrollView>
      </View>
    </View>
  );
};