I'm trying to develop a tinder type application to practice react-native development, however I have an error that I can't solve:
" Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. 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 HomeScreen "
Here is the code of HomeScreen.js
import React, { useState, useEffect, useRef } from 'react'
import { StyleSheet, View, Alert } from 'react-native'
import Constants from 'expo-constants'
import TopBar from '../components/TopBar'
import axios from 'axios'
import BottomBar from '../components/BottomBar'
import Swipes from '../components/Swipes'
const HomeScreen = () => {
const [users, setUsers] = useState([]);
const [currentIndex, setCurrentIndex] = useState(0);
async function fetchUsers() {
try {
const { data } = await axios.get(
"https://randomuser.me/api/?gender=female&results=50"
);
setUsers(data.results);
} catch (error) {
console.log(error);
Alert.alert("Error getting users", "", [ { text: "Retry", onPress: () => fetchUsers() },]);
}
}
useEffect(() => {
console.log(users)
fetchUsers();
}, []);
const handleSignOut = () => {
auth
.signOut()
.then(() => {
navigation.replace("Login");
})
.catch((error) => alert(error.message));
};
return (
<View style={styles.container}>
<TopBar />
<View style={styles.swipes}>
{users.length > 1 && <Swipes currentIndex={currentIndex} users={users}></Swipes>}
</View>
<BottomBar />
</View>
)
}
export default HomeScreen;
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: Constants.statusBarHeight
},
swipes: {
flex: 1,
padding: 10,
paddingTop: 8,
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 3,
},
shadowOpacity: 0.29,
shadowRadius: 4.65,
elevation: 7,
},
})
I tried many solutions found on the net such as modifying imports or the type of export but nothing worked.
Thanks for your help