Expected Component class, got [object Object] - React-Native - react-native

I have encountered this problem on "Expected a Component class, Got [object Object]". I have lookup all the related problems on Stack, I have followed most of them by Capitalising my objects but the same errors occurred. Some great pointers would be appreciated.
this is my App.js file
import React from 'react';
import { StyleSheet, AppRegistry, Text, View } from 'react-native';
import Login from "./Login";
export default class App extends React.Component {
render() {
return (
<Login />
);
}
}
and my Login.js file
import React from 'react';
import{
StyleSheet,
View,
Text,
Image,
touchableOpacity,
TextInput,
KeyboardAvoidingView
} from 'react-native';
export default class Login extends React.Component{
render(){
return(
<KeyboardAvoidingView
behavior="padding"
style={styles.container}>
<View style={styles.logoContainer}>
</View>
<View style={styles.formContainer}>
<TextInput
underlineColor="transparent"
placeholder="Email"
returnKeyType="next"
keyboardType="email-address"
onSubmitEditing={()=> this.passwordInput.focus()}
style={styles.input}/>
<TextInput
underlineColor="transparent"
placeholder="Password"
secureTextEntry
returnKeyType="go"
ref={(input) => this.passwordInput = input}
style={styles.input}/>
<touchableOpacity
style={styles.buttonContainer}>
<Text style={styles.textButton}>Login</Text>
</touchableOpacity>
</View>
</KeyboardAvoidingView>
);
}
}
It returns an error of Expected a component class, got [object Object]
Thanks in advance. It is either I'm too blind to see my mistake or I did it completely wrong.

Found the bug, I just need to capitalize my components. touchableOpacity --> TouchableOpacity
Thanks to Andrew Li

Related

Why isn't my Antdesign Icon appearing on screen?

Hello, I am having trouble with my AntDesign Icon appearing on the screen the only thing that does pop up is just an X I am using react-native-vector-icons/AntDesign. If somebody can please show me how I can have my Icons show up on my screen it would be greatly appreciated!
import React, { useContext, useRef, useState } from "react"; // we are importing the react library and the useContext hook from react and we are importing the Context from the global context file
import { Context } from "../globalContext/globalContext.js"
import AntDesign from 'react-native-vector-icons/AntDesign';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
import Sound from 'react-native-sound';
import Video from 'react-native-video';
import { Button, Input, Image, Tile } from 'react-native-elements';
import LottieView from 'lottie-react-native';
import {
SafeAreaView,
StyleSheet,
Text,
View,
//Image,
ImageBackground,
Animated,
StatusBar,
TouchableOpacity,
Pressable,
Alert,
} from 'react-native';
return (
<View style={styles.container}>
<StatusBar barStyle="light-content" />
<LottieView style={styles.lottie} source={require('C:/Users/Raffp/Desktop/React Native Projects/React_Native_FoodApp3/CheeseBurgerApp/assets/imgs/59677-fast-food.json')} autoPlay loop />
<View style={styles.header}>
<Text style={styles.text_header}>Pristine Burgers</Text><FontAwesome5 name="hotdog" size={50} color="gold" />
</View>
<View style={styles.footer}>
<Animated.View style={[styles.textWrapper, animatedStyles]}>
<Text style={styles.text_footer}>Take More Then Just Bite</Text>
</Animated.View>
<Pressable
style={styles.button}
onPress={() => {
textAnimation();
setTimeout(() => {
navigation.navigate('');
}, 1000);
}}
>
<Text style={styles.text_footer}>Yum!</Text>
<AntDesign name="arrowright" size={24} color="white" />
</Pressable>
</View>
</View>
);
}
X Appearing on the screen instead of
the icon?
I find that I run into issues like this when I miss a step when installing the package. You could try redoing the additional installation steps for your platform. See the documentation for iOS installation and Android installation.

React Native take useState in class Error: Minified React error #321

I am newbie to react native and
I would like to create a simple app.
using method function to create a TextInput
and make TextInput intergrate to Class export default class App extends React.Component
But unfortunately, I get Error: Minified React error #321, any idea how to make it???
Thank you very much
Full code:
import React, { useState } from 'react';
import { TextInput, Text, View, StyleSheet } from 'react-native';
function Example() {
const [text, setText] = useState('')
return (
<View>
<TextInput
value={text}
style={{ fontSize: 42, color: 'steelblue' }}
placeholder="Type here..."
onChangeText={(text) => {
setText(text)
}}
/>
<Text style={{ fontSize: 24 }}>
{'\n'}You entered: {text}
</Text>
</View>
)
}
export default class App extends React.Component{
render(){
return (
<View>
{Example()}
</View>
);
}
}
You need to call React component like this: <Example />
Here is your code in codesandbox

I am trying to creat splash screen of bar app but i face this kind of error please tell me how to fix this kind of error in react-native

Splash(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
import React, { component } from 'react';
import {View, ImageBackground,Image} from 'react-native';
import { Component } from 'react';
var bg=require('./background.png');
var logo=require('./logo.jpg');
export default class Splash extends Component
{
render()
{
<ImageBackground
source={bg}
style={{height: '100%',width:'100%'}}
>
<View
style={{flex:1,justifyContent:'center',alignItems:'center'}}
>
<image source={logo}
style={{height:100,width:100}}></image>
</View>
</ImageBackground>
}
}
You need return keyword like this :
export default class Splash extends Component
{
render(){
return(
<ImageBackground
source={bg}
style={{height: '100%',width:'100%'}}>
<View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
<image source={logo}
style={{height:100,width:100}}></image>
</View>
</ImageBackground>
)
}
}

React Native: ListItem does nothing onPress

I am attempting to navigate from my current screen to the Profile screen and pass a parameter along using the ListItem onPress prop. The ListItems render properly onto the screen within a FlatList component, however, onPress does not navigate to the Profile screen.
import React from "react";
import { withNavigation } from '#react-navigation/compat';
import { StyleSheet, FlatList} from "react-native";
import { ListItem } from "react-native-elements";
import nerdProfiles from '../constants/nerdProfiles';
import { Block, Text } from 'galio-framework';
import argonTheme from "../constants/Theme";
import { TouchableOpacity } from "react-native-gesture-handler";
class NerdList extends React.Component {
renderItem = ({item}) => (
<TouchableOpacity>
<ListItem
title={
<Block>
<Text style={styles.names}>
{item.name}
</Text>
</Block>
}
subtitle={
<Block>
<Text style={styles.descriptions}>
{item.shortDescription}
</Text>
</Block>
}
leftAvatar={{ source: { uri: item.image } }}
bottomDivider
chevron
onPress={() => this.props.navigation.navigate('Profile', {test: 'Hello'})}
/>
</TouchableOpacity>
);
render() {
return (
<FlatList
data={nerdProfiles.bios}
renderItem={this.renderItem}
keyExtractor={item => item.id}
/>
);
};
};
export default withNavigation(NerdList);
Your code is correct, just try to put alert in the onPress function. Like,
onPress{()=>alert('ok')}
and check whether onPress is working or not. If yes it means there is problem with your navigate function. It cant find page Profile in navigation file. (Maybe spelling mistake of page name. Just check once what you've declare in your navigation file.)
If alert is also not working then try to remove onPress from ListItem and put it in the TouchableOpacity. Like
<TouchableOpacity onPress={()=>alert('ok')}>
then try to add navigate function
<TouchableOpacity onPress={() => this.props.navigation.navigate('Profile', {test: 'Hello'})}>
Here is my working small code
import React from "react";
import { StyleSheet, FlatList, Text, TouchableOpacity} from "react-native";
import { ListItem } from "react-native-elements";
import Font from 'expo-font'
class NerdList extends React.Component {
render() {
return (
<TouchableOpacity>
<ListItem
title={
<Text>
'item.name'
</Text>
}
subtitle={
<Text>
'item.shortDescription'
</Text>
}
bottomDivider
chevron
onPress={()=>alert('ok')}
/>
</TouchableOpacity>
);
}
}
export default NerdList;
When onPress function is provided to ListItem, it behaves like a Touchable component. So, no need to wrap the ListItem with a TouchableOpacity.
The parent TouchableOpacity captures onPress function and you cannot reach out the onPress function of the ListItem.

React Native: TypeError: undefined is not an object (evaluating 'this.props.navigation.navigate')

Being a beginner in react-native, I can't figure out the problem in my code. By reading on the internet, I have an idea that I have some binding issue maybe.
So, my code starts with index.js and registers the App component over there. The app component just contains the stack navigation routes. It load the LoginScreen component (displays logo, background and name of the application) which in turn loads LoginForm component. There is no authentication on the Login button and the only thing I need is that the Menu component is loaded as I press the Login button. It is giving the TypeError: undefined is not an object (evaluating 'this.props.navigation.navigate')
index.js
import { AppRegistry } from 'react-native';
import App from './App';
AppRegistry.registerComponent('bluebulk', () => App);
App.js
import { StackNavigator } from 'react-navigation';
import LoginScreen from './src/components/login/LoginScreen';
import Menu from './src/components/menu/Menu';
const App = StackNavigator({
Main: { screen: LoginScreen },
Menu: { screen: Menu }
});
export default App;
LoginScreen.js
import { StackNavigator } from 'react-navigation';
import React, { Component } from 'react';
import { StyleSheet, View, Text, Image } from 'react-native';
import LoginForm from './LoginForm';
class LoginScreen extends Component {
render() {
return (
<View style={styles.container}>
<View style={styles.logoContainer}>
<Image
style={styles.logo}
source={require('../../images/transparent.png')}
/>
<View style={{ flexDirection: 'row' }}>
<Text style={styles.blueTextStyle}>Blue</Text>
<Text style={styles.bulkTextStyle}>Bulk</Text>
</View>
</View>
<View style={styles.formContainer}>
<LoginForm />
</View>
</View>
);
}
}
export default LoginScreen;
LoginForm.js
import React, { Component } from 'react';
import {
StyleSheet,
TextInput,
TouchableOpacity,
Text,
View,
KeyboardAvoidingView,
Keyboard
} from 'react-native';
import { StackNavigator } from 'react-navigation';
class LoginForm extends Component {
render() {
return (
<KeyboardAvoidingView behavior='height' style={styles.container}>
<View style={{ flexDirection: 'row' }}>
<Text style={styles.textStyle}>Email:</Text>
<TextInput
style={styles.styleInput}
placeholder="user#gmail.com"
returnKeyType="next"
keyboardType="email-address"
onSubmitEditing={() => this.refs.password.focus()}
/>
</View>
<View style={{ flexDirection: 'row' }}>
<Text style={styles.textStyle}>Password:</Text>
<TextInput
ref='password'
style={styles.styleInput}
placeholder="password"
secureTextEntry
returnKeyType="go"
onSubmitEditing={Keyboard.dismiss}
/>
</View>
<TouchableOpacity
style={styles.buttonContainer}
onPress={() => this.props.navigation.navigate('Menu')} //Error here
>
<Text style={styles.buttonText}>Login</Text>
</TouchableOpacity>
</KeyboardAvoidingView>
);
}
}
export default LoginForm;
Menu.js
import React, { Component } from 'react';
import { StyleSheet, View, Text, TouchableOpacity } from 'react-native';
import { StackNavigator } from 'react-navigation';
class Menu extends Component {
render() {
const { navigate } = this.props.navigation;
return (
<View style={styles.container}>
<View style={styles.viewContainer}>
<TouchableOpacity style={styles.buttonContainer}>
<Text style={styles.buttonText}>View Products</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.buttonContainer}>
<Text style={styles.buttonText}>View Discounts/Offers</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.buttonContainer}>
<Text style={styles.buttonText}>View Invoice History</Text>
</TouchableOpacity>
</View>
</View>
);
}
}
export default Menu;
You need to pass navigation props lower down to your LoginForm component.
Try this: <LoginForm navigation={this.props.navigation} />
You should end up with the following result: