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
Related
import { FlatGrid } from 'react-native-super-grid';
class Grid extends React.Component () {
export default function Example() {
I just write until here..
But, don't work...
What I have to do ..
You have to return a valid response from the component. For example, if you want to make a Component using FlatGrid you can use this structure:
import { View } from 'react-native';
import { FlatGrid } from 'react-native-super-grid';
export default function Example() {
return(
<View>
<FlatGrid
itemDimension={130}
data={[1,2,3,4,5,6]}
renderItem={({ item }) => (<Text>{item}</Text>)}
/>
</View>
)
}
And also I see you are using a class class named Grid that is extending the React.Component () and from your code I see you are not importing the React from react so in order to use the class you have to use:
import React from 'react';
import { View } from 'react-native';
import { FlatGrid } from 'react-native-super-grid';
export default class Grid extends React.Compoment {
render(){
return(
<View>
<FlatGrid
itemDimension={130}
data={[1,2,3,4,5,6]}
renderItem={({ item }) => (<Text>{item}</Text>)}
/>
</View>
)
}
}
I'm super new to react native & having a hard time connecting separate files with my App.js. I've got a user-defined component in a separate file. This is what I've right now in the app.js
import React from 'react';
import TextImg from "./components/comp";
import { StyleSheet, Text, View, Image } from 'react-native';
export default function App() {
return (
<View style={{alignItems:'center', top:150}}>
<Image source={require('./images/pic.jpeg')} style={{ width: 290, height: 190 }}/>
<TextImg text='Mt. Fuji'/>
<TextImg source={{imageUri: 'https://reactjs.org/logo-og.png'}} style={{width: 400, height: 400}} />
</View> );
};
I am importing components from comp.js, and this is what I've in the comp.js file
import React from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
function TextImg(textprop, imgprop) {
return (
<React.Fragment>
<Text>{textprop.text}</Text>
<Image source={imgprop.imageUri}></Image>
</React.Fragment>
);
};
But this only shows the text, but not the image. Can anyone help with this?
Thanks in advance for help!
All your props would be passed as a single parameter. So you should change your component like below.
import React from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
export default function TextImg(props) {
return (
<React.Fragment>
<Text>{props.text}</Text>
<Image source={props.imageUri} style={props.style}></Image>
</React.Fragment>
);
};
You will have to import it in your app.js. (Assuming your file name is TextImg.js and its in the same path)
import TextImg from './TextImg'
You are not passing your props correctly.
Here is a revamp of your code, but in the proper way:
import React from 'react';
import { TextImg } from "./components/comp";
import { StyleSheet, Text, View, Image } from 'react-native';
export default function App() {
return (
<View style={{alignItems:'center', top:150}}>
<Image source={require('./images/pic.jpeg')} style={{ width: 290, height: 190 }}/>
<TextImg text='Mt. Fuji' imageUri: {'https://reactjs.org/logo-og.png'} />
</View> );
};
Then in comp.js
import React from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
export const TextImg = ({ text, imageUri }) => {
return (
<React.Fragment>
<Text>{text}</Text>
<Image source={imageUri} style={{width: 400, height: 400}} />
</React.Fragment>
);
};
This will fix it up for you. Study the code and try to understand what was done. But I'll also advise you to learn about React props.
I am working with Calendar component of react-date-range but I have seen following error.
This is simple code I using.
import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View } from 'react-native';
import { Calendar } from 'react-date-range';
export default class App extends Component {
handeeSelect(date) {
console.log(date);
}
render() {
return (
<View>
<Calendar
onInit={this.handeeSelect}
onChange={this.handeeSelect}
/>
</View>
);
}
}
How to fix it?
Edit: As mentioned in the comments, the issue revolved around the library in use. Either the linking to the Native code or the library was causing compatibility issues. Be sure to link libraries you add to native code when adding new ones.
I think you need to wrap the calendar component in a div because React-Native View is weird and needs a child element.
import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View } from 'react-native';
import { Calendar } from 'react-date-range';
export default class App extends Component {
handeeSelect(date) {
console.log(date);
}
render() {
return (
<View>
<div>
<Calendar onInit={this.handeeSelect} onChange={this.handeeSelect} />
</div>
</View>
);
}
}
I got expected a component class got object error when I try to use loginPage component which I created.
here is index.ios.js
import React, {Component} from 'react';
import {
AppRegistry,
View
} from 'react-native';
import loginPage from './pages/loginPage'
class app extends Component {
render() {
return (
<View>
<loginPage/>
</View>
);
}
}
AppRegistry.registerComponent('app', () => app);
and here is the loginPage.js
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View
} from 'react-native';
export default class loginPage extends Component {
render() {
return (
<View>
<Text>
Welcome to React Native!
</Text>
</View>
);
}
}
You need to rename your loginPage class to LoginPage, the class must be capitalize
loginPage.js
import React from 'react';
import {
Text,
View
} from 'react-native';
const LoginPage = () => {
return (
<View>
<Text>
Welcome to React Native!
</Text>
</View>
);
}
export default LoginPage;
index.ios.js
import React, {Component} from 'react';
import {
AppRegistry,
View
} from 'react-native';
import LoginPage from './pages/loginPage'
class app extends Component {
render() {
return (
<View>
<LoginPage/>
</View>
);
}
}
remove the tags in index.ios.js
import React, {Component} from 'react';
import {
AppRegistry,
View
} from 'react-native';
import loginPage from './pages/loginPage'
class app extends Component {
render() {
return (
<loginPage/>
);
}
}
AppRegistry.registerComponent('app', () => app);
I am building a ReactNative + Redux app and am using the ListView component.
In _renderRow() of the ListView, I'd like to return my own cell component (called JobDetailCell that only receives the data in its props from the component that is managing the ListView (called JobsRootComponent).
I came up with the following code so far:
JobsRootComponent.js
import React, {
Component,
StyleSheet,
Text,
View,
ListView,
ActivityIndicatorIOS,
NavigatorIOS,
TouchableHighlight
} from 'react-native'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { fetchJobs } from '../actions/Actions'
import { JobDetailCell } from './JobDetailCell'
import { JobDetailComponent } from './JobDetailComponent'
class JobsRootComponent extends Component {
...
_renderRow(rowData) {
const title = rowData.title
const subtitle = rowData.by
return (
<JobDetailCell title={title} subtitle={subtitle}></JobDetailCell>
)
}
...
render() {
return (
<ListView
style={styles.container}
dataSource={this.props.dataSource}
renderRow={this._renderRow}
/>
)
}
...
}
JobDetailCell.js
import React, {
Component,
StyleSheet,
Text,
View,
} from 'react-native'
export default class JobDetailCell extends Component {
render() {
return (
<View style={styles.cellContainer}>
<Text style={styles.cellTitle}>{this.props.title}</Text>
<Text style={styles.cellSubtitle}>{this.props.subtitle}</Text>
</View>
)
}
}
However, when I am running the app, I get the following errors in the chrome dev console:
ExceptionsManager.js:76 Warning:
React.createElement: type should not
be null, undefined, boolean, or number. It should be a string (for DOM
elements) or a ReactClass (for composite components). Check the render
method of StaticRenderer.
Can someone tell me what I am doing wrong here?
The problem is that you are importing your components in the wrong way.
This line
import { JobDetailCell } from './JobDetailCell'
Is equivalent to this line:
var JobDetailCell = require('./JobDetailCell').JobDetailCell;
Which gets undefined since you exported the component itself, which has no field named JobDetailCell.
This is how you should import your component:
import JobDetailCell from './JobDetailCell'