We Keep Coding

React Native, onPress not firing

Cannot get any output from my function test() which I have written in Boxes.js when I add onPress={test} to my View tag in Dice.js.
I have tried to add test() on tags like Text, then it works, but not when I put it on the View tag.
Boxes.js:
import react from "react";
import { StyleSheet, Text, View, Image } from "react-native";
import Dice from "./Dice";
import PatternDivider from "./PatternDivider";
export function test() {
console.log("hi");
}
export default class Boxes extends react.Component {
render() {
return (
<View style={styles.box}>
<Text style={styles.header}>Advice #117</Text>
<Text style={styles.advice}>
It is easy to sit up and take notice, what's difficult is getting uu
and taking action
</Text>
<PatternDivider />
<Dice />
</View>
);
}
}
Dice.js:
import react from "react";
import { StyleSheet, Text, View, Image } from "react-native";
import { test } from "./Boxes";
export default class Dice extends react.Component {
render() {
return (
<View style={styles.circle} onPress={test}>
<Image
source={require("../assets/icon-dice.png")}
style={styles.dice}
/>
</View>
);
}
}

If you wanna Dice to be clickable, use one the components that handles press events, like Pressable. Not all components accept an onPress property, View is one of them.
import react from "react";
import { StyleSheet, Text, View, Image, Pressable } from "react-native";
import { test } from "./Boxes";
export default class Dice extends react.Component {
render() {
return (
<Pressable style={styles.circle} onPress={test}>
<Image
source={require("../assets/icon-dice.png")}
style={styles.dice}
/>
</Pressable>
);
}
}

React Native's View component doesn't have an onPress property https://reactnative.dev/docs/view

undefined is not an object (evaluating '_react.React.Component')

I am developing an app in react-native while running the app I get this error.
My index.js file
import App from './App';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => App);
My App.js file
import { StyleSheet, View, StatusBar } from 'react-native';
import Routes from './src/store/Routes';
import 'react-native-gesture-handler';
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<StatusBar backgroundColor="#18163E" barStyle="light-content" />
<Routes />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flexGrow: 1,
},
}); ```
While running i am getting above error and it is pointed to index.js file

This is missing.
import React, { Component } from 'react';

Your error message clearly states the React component missing.
In your App.js file add the below line:
import React, { Component } from 'react';
All of your react components should have this line.
After adding the above line your App.js file will appear as below:
import React, { Component } from 'react';
import { StyleSheet, View, StatusBar } from 'react-native';
import Routes from './src/store/Routes';
import 'react-native-gesture-handler';
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<StatusBar backgroundColor="#18163E" barStyle="light-content" />
<Routes />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flexGrow: 1,
},
});

Did you forget to import AppRegistry from react-native?

react navigation send me this error: the component for route router must be a react component

I want to create navigation for my react native app, but it shows me this error. I don't know how to fix it. At the bottom I have my JS files:
I tried all the codes, for example, I write export className and import {className}
App.js:
import React, { Component } from 'react'
import { Text, View } from 'react-native'
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack'
import Login from './screens/Login'
import Signup from './screens/Signup'
import Home from './screens/home'
export default class App extends Component {
render() {
return (
<AppRoot />
)
}
}
const Container = createAppContainer({
Login: { screen: Login },
Signup: { screen: Signup },
Home: { screen: Home },
}, {
initialRouteName: 'Login'
})
const AppRoot = createStackNavigator(Container)
Login.js:
import React, { Component } from 'react'
import { Text, View } from 'react-native'
export default class Login extends Component {
render() {
return (
<View>
<Text> login </Text>
</View>
)
}
}
Signup.js
import React, { Component } from 'react'
import { Text, View } from 'react-native'
export default class Signup extends Component {
render() {
return (
<View>
<Text> Signup </Text>
</View>
)
}
}
home.js:
import React, { Component } from 'react'
import { Text, View } from 'react-native'
export default class Home extends Component {
render() {
return (
<View>
<Text> Home </Text>
</View>
)
}
}
I don't know what is the problem.

It seems you use react-navigation functions in wrong order. First you have to create stack navigator and then create app container with it:
const Container = createStackNavigator({
Login: { screen: Login },
Signup: { screen: Signup },
Home: { screen: Home },
}, {
initialRouteName: 'Login'
})
const AppRoot = createAppContainer(Container)

remove import { createStackNavigator } from 'react-navigation-stack' and use
import { createAppContainer,createStackNavigator } from 'react-navigation';

App.js
import React, { Component } from 'react'
import { Text, View } from 'react-native'
import { createAppContainer, createStackNavigator } from 'react-navigation';
import Login from './screens/Login'
import Signup from './screens/Signup'
import Home from './screens/home'
export default class App extends Component {
render() {
return (
<AppRoot />
)
}
}
let RootStack = createStackNavigator({
Login: Login,
Signup: Signup,
Home: Home,
})
const AppRoot = createAppContainer(RootStack)
Now Navigation props are present across all your screens Login,Signup,Home. To navigate from Login to home for example
Login.js
import React, { Component } from 'react'
import { Text, View, TouchableOpacity } from 'react-native'
export default class Login extends Component {
render() {
return (
<TouchableOpacity onPress={()=>this.props.navigation.navigate('Home')}>
<Text> Home </Text>
</TouchableOpacity>
)
}
}
Hope this helps. Let me know if you have any further queries.

Error: undefined is not a function react-native

I am writing my 1st React-native application and I got the below error message on executing code,
App.js:
import React, { Component } from 'react';
import { StyleSheet, Text, TextInput, View} from 'react-native';
import { StackNavigator } from 'react-navigation';
import Login from './App/components/Login.js';
const Application = StackNavigator({
Home: { screen: Login },
}, {
navigationOptions: {
header: false,
}
});
export default class App extends Component {
render() {
return (
<Application />
);
}
}
Login.js:
import React,{Component} from 'react';
import{
View,
Text,
Stylesheet
} from 'react-native';
import { StackNavigator } from 'react-navigation';
export default class Login extends Component{
render(){
return(
<Text>Test</Text>
);
}
}

You have to export createAppContainer and also StackNavigator is deprecated use createStackNavigator
Try this:
import React, { Component } from 'react';
import { StyleSheet, Text, TextInput, View} from 'react-native';
import { createStackNavigator, createAppContainer } from "react-navigation";
import Login from './App/components/Login.js';
const Application = createStackNavigator({
Home: { screen: Login },
}, {
navigationOptions: {
header: false,
}
});
class App extends Component {
render() {
return (
<Application />
);
}
}
export default createAppContainer(Application);

Error : Forgot to export your Listview item component

This is the error i'm getting.
Warning: React.createElement: 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. Check your code at
BookingPage.js:19.
I have a Listview and item component is imported properly. When i'm changing export of Listview item from
export default connect(mapStateToProps, {callCancel, setBookingstatus})(BookingCard);
to
export {BookingCard};
it's working. but i want to use redux for Listview item component. how to export class correctly. This is my BookingCard (Listview item component)
import React from 'react';
import {View, Text, StyleSheet, TouchableOpacity} from 'react-native';
import { connect } from 'react-redux';
import {Icon, Button} from 'native-base';
import {callCancel, setBookingstatus} from '../actions';
class BookingCard extends React.Component {
render() {
return (
<View style={styles.container}>
.....
......
</View>
);
}
}
export default connect(mapStateToProps, {callCancel, setBookingstatus})(BookingCard);
// export {BookingCard};
BookingPage( Component including Listview )
import React from 'react';
import {ListView, View} from 'react-native';
import { connect } from 'react-redux';
import {Spinner} from './common';
import {BookingCard} from './BookingCard';
import {fetchBooking} from '../actions';
class BookingPage extends React.Component {
componentWillMount() {
this.props.fetchBooking();
}
ds = new ListView.DataSource({
rowHasChanged: (r1, r2) => r1 !== r2
});
renderRow(booking) {
return <BookingCard booking={booking} />;
}
renderButton() {
if (this.props.loading) {
return <Spinner size="large" />;
}
return (
<ListView
dataSource={this.ds.cloneWithRows(this.props.bookings)}
enableEmptySections
renderRow={this.renderRow}
/>
);
}
render() {
console.log('onRender BookingPage');
return (
<View>
{this.renderButton()}
</View>
);
}
}
const mapStateToProps = ({ booking }) => {
const { bookings, loading } = booking;
return { bookings, loading };
};
export default connect(mapStateToProps, {fetchBooking})(BookingPage);

Since you're exporting your component default like this:
export default connect(mapStateToProps, {callCancel, setBookingstatus})(BookingCard);
The line below fails because it expects a named export.
import {BookingCard} from './BookingCard';
You should either fix your import like this:
import BookingCard from './BookingCard';
or export it like
export const MyConnectedComponent = connect(mapStateToProps, {callCancel, setBookingstatus})(BookingCard);
You can find out more at MDN's website.