What is the error when executing a FLATLIST? - react-native

Question

When executing sends me the following error, do you know what I'm doing wrong?
I used the code that is published
Invariant Violation: 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 FlatListDemo.
This error is located at: in FlatListDemo (at withExpoRoot.js:22) in
RootErrorBoundary (at withExpoRoot.js:21) in ExpoRootComponent (at
renderApplication.js:34) in RCTView (at View.js:44) in RCTView (at
View.js:44) in AppContainer (at renderApplication.js:33)
node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:5630:10
in createFiberFromElement
node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:9710:8
in reconcileSingleElement ... 21 more stack frames from framework
internals
import React, { Component } from "react";
import { View, Text, FlatList, ActivityIndicator } from "react-native";
import { List, ListItem, SearchBar } from "react-native-elements";
class FlatListDemo extends Component {
constructor(props) {
super(props);
this.state = {
loading: false,
data: [],
page: 1,
seed: 1,
error: null,
refreshing: false
};
}
componentDidMount() {
this.makeRemoteRequest();
}
makeRemoteRequest = () => {
const { page, seed } = this.state;
const url = `https://randomuser.me/api/?seed=${seed}&page=${page}&results=20`;
this.setState({ loading: true });
fetch(url)
.then(res => res.json())
.then(res => {
this.setState({
data: page === 1 ? res.results : [...this.state.data, ...res.results],
error: res.error || null,
loading: false,
refreshing: false
});
})
.catch(error => {
this.setState({ error, loading: false });
});
};
handleRefresh = () => {
this.setState(
{
page: 1,
seed: this.state.seed + 1,
refreshing: true
},
() => {
this.makeRemoteRequest();
}
);
};
handleLoadMore = () => {
this.setState(
{
page: this.state.page + 1
},
() => {
this.makeRemoteRequest();
}
);
};
renderSeparator = () => {
return (
<View
style={{
height: 1,
width: "86%",
backgroundColor: "#CED0CE",
marginLeft: "14%"
}}
/>
);
};
renderHeader = () => {
return <SearchBar placeholder="Type Here..." lightTheme round />;
};
renderFooter = () => {
if (!this.state.loading) return null;
return (
<View
style={{
paddingVertical: 20,
borderTopWidth: 1,
borderColor: "#CED0CE"
}}
>
<ActivityIndicator animating size="large" />
</View>
);
};
render() {
return (
<List containerStyle={{ borderTopWidth: 0, borderBottomWidth: 0 }}>
<FlatList
data={this.state.data}
renderItem={({ item }) => (
<ListItem
roundAvatar
title={`${item.name.first} ${item.name.last}`}
subtitle={item.email}
avatar={{ uri: item.picture.thumbnail }}
containerStyle={{ borderBottomWidth: 0 }}
/>
)}
keyExtractor={item => item.email}
ItemSeparatorComponent={this.renderSeparator}
ListHeaderComponent={this.renderHeader}
ListFooterComponent={this.renderFooter}
onRefresh={this.handleRefresh}
refreshing={this.state.refreshing}
onEndReached={this.handleLoadMore}
onEndReachedThreshold={50}
/>
</List>
);
}
}
export default FlatListDemo;

Answer 1

It looks like you were following this tutorial on medium https://medium.freecodecamp.org/how-to-build-a-react-native-flatlist-with-realtime-searching-ability-81ad100f6699
Unfortunately this tutorial was written at a time before the react-native-elements were upgraded to v1.0.0. When react-native-elements was upgraded several components were dropped, and others were changed. For a full list of them you should see this blog post on their website. It is too long to replicate here but I will repeat the parts relevant to your specific situation.
List
This have been removed and is what is probably causing the big error that you are seeing as you are trying to import something that doesn't exist anymore.
https://react-native-training.github.io/react-native-elements/blog/2019/01/27/1.0-release.html#list
List component has been removed! List was just a regular React Native
View with some small margin styles. It wasn't actually needed to use
the ListItem component. Instead we recommend using the FlatList or
SectionList components from React Native which function both as Views
and also displaying items, pull to refresh and more.
ListItem
roundAvatar and avatarhave been dropped, and are no longer in use.
https://react-native-training.github.io/react-native-elements/blog/2019/01/27/1.0-release.html#listitem
avatar, avatarStyle, avatarContainerStyle, roundAvatar, and
avatarOverlayContainerStyle removed. Avatars can now be customized
using the rightAvatar and leftAvatar props which can either render a
custom element or an object that describes the props from Avatar.
Solution
You have two choices.
Downgrade to v0.19.1
Refactor your code for v1.0.0
Downgrade
The simplest (though this may not work as there may be compatibility issues with newer versions of react-native) is to downgrade your version of react-native-elements.
You can do that by running npm uninstall react-native-elements
and then reinstall the specific version npm install react-native-elements#0.19.1
You can see a full list of the v0.19.1 components here https://react-native-training.github.io/react-native-elements/docs/0.19.1/overview.html
Refactor
The other choice, and probably the better choice though arguably it will require more work, is to refactor your code so that it uses the new components from v1.0.0.
You can see a full list of the v1.0.0 components here https://react-native-training.github.io/react-native-elements/docs/overview.html

Answer 2

As Andres says, there are properties of react-native elements that changed therefore I will publish the code that in my case worked.
import React, { Component } from "react";
import { View, Platform, Image, Text, FlatList, ActivityIndicator } from "react-native";
import { ListItem, List } from "react-native-elements";
class FlatListDemo extends Component {
constructor(props) {
super(props);
this.state = {
loading: false,
data: []
}
}
componentDidMount() {
this.makeRemoteRequest();
}
makeRemoteRequest = () => {
const url = 'https://randomuser.me/api/?seed=1&page=1&results=20';
this.setState({ loading: true });
fetch(url)
.then(res => res.json())
.then(res => {
this.setState({
data: res.results,
loading: false,
});
});
};
render() {
return (
<View>
<FlatList
data={this.state.data}
renderItem={({ item }) => (
<ListItem
title={
<View >
<Image style={{height:50}} source={require('./src/img/recarga.jpg')}>
</Image>
<Text>{item.name}</Text>
</View>
}
subtitle={item.email}
/>
)}
keyExtractor={item=>item.email}
/>
</View>
);
}
}
export default FlatListDemo;