Styjun

I've been following a guide about making use of FlatLists. I have copied code from this GitHub repo: https://github.com/ReactNativeSchool/react-native-flatlist-demo/blob/master/FlatListDemo.js

I'm getting an issue however...

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s%s, 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.

Here is my code:

import React, Component from "react";
import View, FlatList, ActivityIndicator from "react-native";
import List, ListItem, SearchBar from "react-native-elements";

class SettingsScreen 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( 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 SettingsScreen;

Through looking at sources online I can see it is probably my imports that are breaking the code but I can't see it myself. Any suggestions?

Thanks