Sorry if this is a simple question but I can't seem to get it to work.
Currently I have a button that should return Main (the main page of my app) by calling the onPress function.
class Button extends Component{
onTap(){
return <Main/>;
}
render(){
return(
<View>
<TouchableOpacity
onPress={this.onTap}
style={styles.buttonContainer}>
<Text style={styles.buttonText}>LOGIN</Text>
</TouchableOpacity>
</View>
)
}
}
But i'm getting this error:
undefined is not a function (evaluating '_this2.props.onTap()')
Can someone help me out here? I don't know what's wrong
class Button extends Component{
constructor(props) {
super(props);
this.state={isLogin:false}
}
onTap(){
this.setState({isLogin:true});
}
render(){
if(this.state.isLogin){
return <Main/>;
}
return(
<View>
<TouchableOpacity
onPress={this.onTap}
style={styles.buttonContainer}>
<Text style={styles.buttonText}>LOGIN</Text>
</TouchableOpacity>
</View>
)
}};
please go through docs about JSX first~
Related
I have a simple app with 2 images. When I click on image1, I want to display hello on the console.
But my function doesn't write anything in the console.
I didn't use a function and called directly console.log in the 2nd image and it works.
Do you know what is wrong with my function?
(I also used makeALogHello.bind(this) but it doesn't change the behavior).
export default class App extends React.Component {
constructor(){
super();
}
makeALogHello(){
console.log("hello");
}
render() {
return (
<View>
<TouchableOpacity style ={{flex:1}}
onPress={() => {this.makeALogHello} }>
<Image style ={styles.container}
resizeMode="contain"
source={require("./images/image1.png")}/>
<Text>ImageNb1</Text>
</TouchableOpacity>
<TouchableOpacity style ={{flex:1}}
onPress={() => {console.log("hi")} }>
<Image style ={styles.container}
resizeMode="contain"
source={require("./images/image2.png")}/>
<Text>ImageNb2</Text>
</TouchableOpacity>
</View>
</View>
);
}
}
You need to call the function in your arrow function:
onPress={() => {this.makeALogHello()} }
Or simply pass the reference to your function, without wrapping it:
onPress={this.makeALogHello}
I am developing a simple React Native application for learning purpose. I am just taking my initial step to get into the React Native world. But in this very early stage, I am having problems. I cannot get a simple touch event working. I am implementing touch event using TouchableWithoutFeedback. This is my code.
class AlbumList extends React.Component {
constructor(props)
{
super(props)
this.state = {
displayList : true
}
}
componentWillMount() {
this.props.fetchAlbums();
}
albumPressed(album)
{
console.log("Touch event triggered")
}
renderAlbumItem = ({item: album}) => {
return (
<TouchableWithoutFeedback onPress={this.albumPressed.bind(this)}>
<Card>
<CardSection>
<Text>{album.artist}</Text>
</CardSection>
<CardSection>
<Text>{album.title}</Text>
</CardSection>
</Card>
</TouchableWithoutFeedback>
)
}
render() {
let list;
if (this.state.displayList) {
list = <FlatList
data={this.props.albums}
renderItem={this.renderAlbumItem}
keyExtractor={(album) => album.title}
/>
}
return (
list
)
}
}
const mapStateToProps = state => {
return state.albumList;
}
const mapDispatchToProps = (dispatch, ownProps) => {
return bindActionCreators({
fetchAlbums : AlbumListActions.fetchAlbums
}, dispatch)
}
export default connect(mapStateToProps, mapDispatchToProps)(AlbumList);
As you can see, I am implementing touch event on the list item. But it is not triggering at all when I click on the card on Simulator. Why? How can I fix it?
You should wrap your content in component like this:
<TouchableWithoutFeedback>
<View>
<Your components...>
</View>
</TouchableWithoutFeedback>
TouchableWithoutFeedback always needs to have child View component. So a component that composes a View isn't enough.
So instead of
<TouchableWithoutFeedback onPressIn={...} onPressOut={...} onPress={...}>
<MyCustomComponent />
</TouchableWithoutFeedback>
use:
<TouchableWithoutFeedback onPressIn={...} onPressOut={...} onPress={...}>
<View>
<MyCustomComponent />
</View>
</TouchableWithoutFeedback>
See the github issue for more info
Can be used with <TouchableOpacity activeOpacity={1.0}> </TouchableOpacity>
For those who struggle with this issue in react-native 0.64, and wrapping it in just a View doesn't work, try this:
<TouchableWithoutFeedback onPress={onPress}>
<View pointerEvents="none">
<Text>Text</Text>
</View>
</TouchableWithoutFeedback>
In my case i accidentally imported TouchableWithoutFeedback from react-native-web instead of react-native. After importing from react-native everything worked as expected.
In more recent React Native versions, just use Pressable instead:
https://reactnative.dev/docs/pressable
In my case, there was a shadow underneath, which caused instability. What I did to solve it was quite simple: zIndex: 65000
<View style={{ zIndex: 65000 }}>
<TouchableWithoutFeedback onPressIn={() => {}>
<View>
</View>
</TouchableWithoutFeedback>
</View>
I have the following component in which I am trying to set the onSubmitEditing function of a TextInput element to a custom function called func. I would like it to take the content of the TextInput box as input to the function. How can this be done? Below is my failed attempt at doing so:
export default class Component4 extends Component {
func(input){
// will add stuff here later
}
render(){
return (
<View style={{padding: 30}}>
<TextInput placeholder="default" onSubmitEditing=this.func/>
</View>
);
}
}
PS:
Thanks to everyone so far for the help, I've managed to get it working partly, here is my code now:
export default class Component4 extends Component {
constructor(props) {
super(props);
this.state = {thing: 'asdf'};
}
func(input){
this.state.thing = input;
// I will eventually do more complicated stuff here
}
render(){
return (
<View style={{padding: 30}}>
<TextInput placeholder="default" onSubmitEditing={this.func}/>
<Text>{this.state.thing}</Text>
</View>
);
}
}
this gives an error, I am trying to make it so that state.thing gets set to
the input. thanks
Option 1:
<View style={{padding: 30}}>
<TextInput placeholder="default" onSubmitEditing={this.func}/>
</View>
Option 2:
<View style={{padding: 30}}>
<TextInput placeholder="default" onSubmitEditing {(e)=>this.func(e.target.value)}/>
</View>
state={
text:''
}
Func(e){
text:e.target.value
}
onSubmitChange={this.func}
Don't forget to bind the func function
Hi I have 2 page in my Project .When I go from the first page to the second page (using Action), then I return to the First page with the command Action.pop() ,At this time I want to call function in first page, how can I do it?
in first page :
.....
BacktoFirstPage(){
//my code
}
render(){
return(
<TouchableOpacity onPress={()=>Actoin.secondPage()}>
<Text>go to second page</Text>
</TouchableOpacity>
)
.....
in second page:
render(){
return(
<TouchableOpacity onPress={()=>Actoin.pop()}>
<Text>back to first page</Text>
</TouchableOpacity>
)
}
now , how to call BacktoFirstPage
What you can do is to pass the function you want to run as a parameter to next screen and then run it before pop the screen.
Example
....
BacktoFirstPage(){
//my code
}
render(){
return(
<TouchableOpacity onPress={()=>Actoin.secondPage({onPop: this.BacktoFirstPage.bind(this)})}>
<Text>go to second page</Text>
</TouchableOpacity>
)
.....
render(){
return(
<TouchableOpacity onPress={()=>{ this.props.onPop(); Actoin.pop()}>
<Text>back to first page</Text>
</TouchableOpacity>
)
}
OR
componentWillUnmount() {
this.props.onPop();
}
render(){
return(
<TouchableOpacity onPress={()=>{ Actoin.pop()}>
<Text>back to first page</Text>
</TouchableOpacity>
)
}
I'm trying to create custom button. For this, I wrapped my existed view into TouchableHighlight (write me please another way, if it's not suitable here)
<TouchableHighlight onPress={this.freeTimeTapped} underlayColor="white">
<LabelsView data={this.freeTimeData}
containerStyle={{ backgroundColor: '#3A65FF' }} />
</TouchableHighlight>
This code throws an error touchable child must either be native, described here, for example. So, I added
setNativeProps = (nativeProps) => {
this._root.setNativeProps(nativeProps);
}
error disappeared, but now I receive an error
React Native Error: undefined is not an object (evaluating
'_this._root.setNativeProps')
after touch. What am I doing wrong?
More code about LabelsView:
export default class LabelsView extends Component {
// Make TouchableHighlight wrapper work
setNativeProps = (nativeProps) => {
this._root.setNativeProps(nativeProps);
}
render() {
return (
<View style={[styles.container, this.props.containerStyle]}>
<View style={styles.leftContainer}>
<Text style={[styles.nameText, styles.textColor]}> {this.props.data.leftText} </Text>
</View>
<View style={styles.rightContainer}>
<Text style={[styles.durationText, styles.textColor]}> {this.props.data.rightTopText + ' hrs'} </Text>
<Text style={[styles.rangeText, styles.textColor]}> {this.props.data.rightBottomText} </Text>
</View>
</View>
);
}
}
I created the same sitaution as yours and found that the only thing you are doing wrong is you are wrapping a class inside the TouchableHighlight . If you want to wrap it in any touchable component then react native needs the native child, So to resolves this change your code as follows:-
<LabelsView freeTimeTapped={this.freeTimeTapped} data={this.freeTimeData}
containerStyle={{ backgroundColor: '#3A65FF' }} />
and your LabelsView class as follows:-
render() {
return (
<TouchableHighlight onPress={this.props.freeTimeTapped} underlayColor="white">
<View style={[styles.container, this.props.containerStyle]}>
<View style={styles.leftContainer}>
<Text style={[styles.nameText, styles.textColor]}> {this.props.data.leftText} </Text>
</View>
<View style={styles.rightContainer}>
<Text style={[styles.durationText, styles.textColor]}> {this.props.data.rightTopText + ' hrs'} </Text>
<Text style={[styles.rangeText, styles.textColor]}> {this.props.data.rightBottomText} </Text>
</View>
</View>
</TouchableHighlight>
);
}
If you still hava any problem then let me know :)
In case you want to have it in parent, just fix your code to this:
export default class LabelsView extends Component {
// Make TouchableHighlight wrapper work
setNativeProps = (nativeProps) => {
this._root.setNativeProps(nativeProps);
}
render() {
return (
<View ref={component => this._root = component} style={[styles.container, this.props.containerStyle]}>
<View style={styles.leftContainer}>
<Text style={[styles.nameText, styles.textColor]}> {this.props.data.leftText} </Text>
</View>
<View style={styles.rightContainer}>
<Text style={[styles.durationText, styles.textColor]}> {this.props.data.rightTopText + ' hrs'} </Text>
<Text style={[styles.rangeText, styles.textColor]}> {this.props.data.rightBottomText} </Text>
</View>
</View>
);
}
}
You missed ref={component => this._root = component}