CODEWITHSUNDEEP
javascriptreactjsreact-nativereact-native-elements
UndisclosedCurtain
UndisclosedCurtain

Reputation: 173

React Native FlatList doesn't render

I'm trying to add a searchable list to my React Native app, but encounter a problem whilst trying to render the list itself. The error is the old "You likely forgot to export your component from the file its defined in, or you might have mixed up default and named imports". I'm sure this may be my issue, but after reading several variations of the issue online, I can't seem to figure out where the issue is.

I've tried changing every and any used import in the fashion of listing them one by one, using and removing the brackets. I tried reinstalling react-native-elements, and checked my dependencies for correct versions. Also tried rendering list without data.

List component: Liste.js

import { View, Text, FlatList } from "react-native";
import  {List, ListItem }  from "react-native-elements"

class Liste extends Component {
  constructor(props) {
    super(props);

...

 render() {
    return (
      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
        <List>
            <FlatList
                data={this.state.data}
                renderItem={({ item }) => (
                    <ListItem
                        roundAvatar
                        title={`${item.name.first} ${item.name.last}`}
                        subtitle={item.email}
                        avatar={{ uri: item.picture.thumbnail }}
                    />
                )}
                />
        </List>
      </View>
    );
  }
}

export default Liste;

I expected the list to render at all, it doesnt.

Upvotes: 1

Views: 1713

Answers (1)

Hristo Eftimov
Hristo Eftimov

Reputation: 15773

  • First, you need to remove the List component, because the react-native-elements does not contain it.

  • The second thing that you need to do is to remove alignItems: "center", justifyContent: "center" from the View component.

  • Also, in the FlatList component, the property avatar is wrong. You have to choose between: leftAvatar and rightAvatar.

You comonent should like look this:

<View style={{ flex: 1 }}>
    <FlatList
        data={this.state.data}
        renderItem={({ item }) => (
            <ListItem
                roundAvatar
                title={item.title}
                subtitle={item.body}
                leftAvatar={{
                    source: item.thumbnail && { uri: item.thumbnail },
                }}
            />
        )}
    />
</View>

Here is a working demo.

Upvotes: 2

Related Questions