Error: Element type is invalid

[DrZoidberg09]

Hi there,

love the idea of your project! Gave it a try. (iOS Emulator, RN 0.74, fabric enabled, Expo 51)

I tried to render a component that runs perfectly fine with FlashList and get this error:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of ForwardRef(ShadowListContainerWrapper).

[azimgd]

Thanks for the report! This was happening due to omitting optional Header and Footer components. Should be fixed in v0.0.2

[DrZoidberg09]

Works!

However, now only the left part of the list is rendered. I use rnui List Item and ListItem.Part and only the first part is rendered, the others are empty.

[azimgd]

Tested with the following code sample, which I got from here. ListItem.Part seems to be rendering just fine.

import { Colors, View, Image, ListItem, Text } from 'react-native-ui-lib';

const CustomComponent = ({ item, index }: { item: any; index: number }) => {
  const statusColor = Colors.red30;

  return (
    <View>
      <ListItem onPress={() => Alert.alert(`pressed on order #${index + 1}`)}>
        <ListItem.Part left>
          <Image
            source={{ uri: 'https://randomuser.me/api/portraits/men/36.jpg' }}
            style={styles.image}
          />
        </ListItem.Part>
        <ListItem.Part middle column containerStyle={[styles.border]}>
          <ListItem.Part>
            <Text grey10 text70 numberOfLines={1}>
              {item.username}
            </Text>
            <Text grey10 text70>
              {item.username}
            </Text>
          </ListItem.Part>
          <ListItem.Part>
            <Text text90 grey40>{`${item.username} item`}</Text>
            <Text text90 color={statusColor} numberOfLines={1}>
              {item.username}
            </Text>
          </ListItem.Part>
        </ListItem.Part>
      </ListItem>
    </View>
  );
};

Could you send me your CustomComponent ?

[DrZoidberg09]

Here you go:

const renderRow = (row: DocType, id: number ) => (
      <View>
        <ListItem
          activeBackgroundColor={Colors.grey60}
          activeOpacity={0.3}
          height={77.5}
          onPress={() => {
            setModalVisible(false)
            router.navigate({pathname: "xxx", params: {document: row.name}})
          }}
        >
          <ListItem.Part left marginL-10 marginR-10>
          <Avatar labelColor={"black"} useAutoColors={true} name={row.project_name} autoColorsConfig={{ avatarColors: ['#97C7FF', '#B1E9E9', '#B3EBDD', '#FFEEB9', '#FED4BD', '#FFC9C5', '#e9ccf2', '#D1CCFF']}} ribbonLabel={row.count} ribbonLabelStyle={{color: 'black'}} ribbonStyle={{backgroundColor: '#D3D3D3', position: 'absolute', top: '60%', left: 50 / 1.7, borderRadius: 50 / 2}}/>
          </ListItem.Part>
          <ListItem.Part middle column containerStyle={[styles.border, {paddingRight: 17}]}>
            <ListItem.Part containerStyle={{marginBottom: 3}}>
              <Text textColor text70 style={{flex: 1, marginRight: 10, color: localColors.text}} numberOfLines={1}>
                {row.project_name}
              </Text>
              <Text textColor text70 style={{marginTop: 2, color: localColors.text}}>
                {row.total_hours}
              </Text>
            </ListItem.Part>
            <ListItem.Part>
              <Text
                style={{flex: 1, marginRight: 10}}
                text90
                textColor
                numberOfLines={1}
              >{`von: ${new Date(row.start_date).toLocaleDateString('de-de')} bis: ${new Date(row.end_date).toLocaleDateString('de-de')}`}</Text>
              <Text text90 color={row.status === 'Draft' ? Colors.green30 : Colors.red30} numberOfLines={1}>
                {row.status}
              </Text>
            </ListItem.Part>
          </ListItem.Part>
        </ListItem>
      </View>
    );

[azimgd]

Tested your snippet (w/ adjusted vars), it all seems to be working for me. Nevertheless I should push a new release soon, which you might wanna try to reproduce against. Given that your code works on FlatList and not on ShadowList makes me curious to find the root cause, however I think that it might be related to styling. I can assist you further if you provide me a clear reproduction repo.

Thanks

edited code

```js const renderRow = (row: DocType, id: number ) => ( {}}> {"row.project_name"} {"row.total_hours"} "{von: ${new Date().toLocaleDateString('de-de')} bis: ${new Date().toLocaleDateString('de-de')}}" {"row.status"} ); ```

[DrZoidberg09]

I found the issue. You need to set contentContainerStyle to flex 1. This is not necessary in FlashList. Actually, this not a problem as such, but should be known that this needs to handled differently.

However, follow up issue: the onPress of the list items is not handled. Meaning it is not possible to press on the list items.

I could try it on a native iPhone. The list feels much better even than FlashList. Keep up the great work!

[azimgd]

Nice, let me investigate.

[azimgd]

Hey @DrZoidberg09, both issues are fixed in 0.3.0. I would appreciate it if you could test it again and let me know if you find any more problems. Thanks!

[DrZoidberg09]

Perfect, thank you very much. It works. Two things I noticed: The list loads noticeably slower than FlatList or FlashList, feels like around half a second. Until its loader you cannot scroll the list and everything interacting with it (e.g. a drawer) a little laggy in the beginning. Second, the onPress feels a little too sensitive. It can happen that you unintentionally press a list item while scrolling.

Still very impressed with it and the performance. Cant wait to be able to also use it on Android!

[azimgd]

The list loads noticeably slower than FlatList or FlashList, feels like around half a second.

You mean the initial load that affects TTI, right? I have some ideas on how to improve this, but I'll only start working on it after Android support is implemented, which should be completed in a week or two.

the onPress feels a little too sensitive

Gonna fix this very soon.

[DrZoidberg09]

You mean the initial load that affects TTI, right? I have some ideas on how to improve this, but I'll only start working on it after Android support is implemented, which should be completed in a week or two.

Yes, exactly. Only the initial load. Thanks! And yes, Android support would be of course more important 👍

[azimgd]

@DrZoidberg09 both of the issues should be fixed in 0.4.1, let me know if you find any more problems.

[DrZoidberg09]

Awesome! It is really nice now. Feels really smooth, both initial loading and scrolling with touchable items.

Cannot wait to see the Android version. I would then immediately replace FlashList in a semi production app. Then I can give more feedback from real life usage.