I implemented a sign in page that worked up until I upgraded react-native.
The problem I'm having is that the onPress prop isn't being called:
<TouchableHighlight style={styles.button}
underlayColor='#f1c40f'
onPress={this.signIn}>
<Text style={styles.buttonText}>Sign In</Text>
</TouchableHighlight>
Here is my signIn function:
signIn: function(){
console.log("SignInAction signIn")
this.fetchData(); },
The signIn button appears to be depressed when I click it but the log statement isn't firing.
Try calling it like this:
onPress={ () => this.signIn() }>
It looks like the "this" in your function is bound to the wrong scope.
you can also do it like this:
onPress={this.signIn.bind(this)}>
the rest of code don't need change.
Also, if you don't wanna use bind and since we're using ES6 syntax, you could write your function out assigned as a const and arrow-function (within your component) rather than a function eg:
signIn = () => {
// code here
}
then you can still call it within the component like you already are without having to bind within the constructor or anywhere else:
<TouchableHighlight style={styles.button}
underlayColor='#f1c40f'
onPress={this.signIn}>
<Text style={styles.buttonText}>Sign In</Text>
</TouchableHighlight>
This should keep context of "this" consistent since signIn will be bound to the component only once on initialization.
Related
What's de difference between calling a function like this:
<TouchableOpacity onPress{function()}> </TouchableOpacity>
Or call it like
<TouchableOpacity onPress{() => function()}> </TouchableOpacity>
In the following line, as soon as the component is rendered, the function() will get called, which is not the proper way. If you want to run a function like that, then make use of the useEffect hook.
<TouchableOpacity onPress{function()}> </TouchableOpacity>
On the other hand in the following case, the following() will only get executed once the TouchableOpacity component is pressed.
<TouchableOpacity onPress{() => function()}> </TouchableOpacity>
I have a file called SplashScreen.js with a StackNavigator. Sample code:
Inside my SplashScreen.js I have a component called "Login" and INSIDE Login I have a component called "TouchbleOpacity"
What I need is to change the "onPress" event of my TouchbleOpacity component. So I'll be able to navigate in my Navigator (that are inside my SplashScreen.js). The onPress event should look similar to this: onPress={() => navigation.navigate('TelaCadastrar01')
If there is a better way to change the onPress event of my TouchbleOpacity, please tell me, thanks!
I don't know if this is what you are looking for, but i'll give it a try:
In your Login Component you do:
//first button
<TouchableOpacity onPress={this.props.onPress} >
<Text> ... </Text>
</TouchableOpacity>
//second button
<TouchableOpacity onPress={this.props.onPressButton2} >
<Text> ... </Text>
</TouchableOpacity>
Now you are able to pass any onPress function to your Login Component. e.g.
<Login onPress={() => navigation.navigate('TelaCadastrar01')} onPressButton2={() => console.log('second scene')}/>
I need your help! My goal is to change the style of my button after I clicked it! I heard about direct manipulation and I decided to give it a try. Now I don't know why but the onPress inside my TouchableOpacity doesn't work. Here is the code:
<TouchableOpacity onPress={() => this.changeStyle}>
<TouchableHighlight style={styles.answer} ref="answer1">
<Text ...> Some Text </Text>
</TouchableHighlight>
</TouchableOpacity>
And here is my changeStyle function:
changeStyle() {
this.refs['answer1'].setNativeProps({
style: { backgroundColor: "#13a88a"}
});
}
Now i don't know why but the 'onPress' is never triggered.
Thank you for your answers!
If you want to execute the function by using 'this.changeStyle`, write your onPress like so:
<TouchableOpacity onPress={this.changeStyle}/>
If you're going to pass a function within the onPress prop that executes this.changeStyle write your onPress like so:
<TouchableOpacity onPress={() => this.changeStyle()}/>
P.S: Why do you have <TouchableHighlight/> inside a <TouchableOpacity/>? Just use one and add the onPress prop on it.
You need to import TouchableOpacity from react-native instead of importing it from react-native-gesture-handler. The version in react-native-gesture-handler is 100% broken. The version in react-native works.
i'm new in react native. i'm use react native action button and i want if button clicked, then show other page. this is my code but still doesn't work. have any solution?
render() {
return (
<View style={styles.container}>
<ActionButton buttonColor="#1E73C1" onPress={() => this.buttonPressed}>
</ActionButton>
</View>
);
}
buttonPressed() {
this.props.navigation.navigate('NewCase', {});
}
You don't execute buttonPressed at all. Fix it with ():
<ActionButton buttonColor="#1E73C1" onPress={() => this.buttonPressed()}>
Other way would be:
<ActionButton buttonColor="#1E73C1" onPress={this.buttonPressed.bind(this)}>
And like said in the comments, you should ensure that navigation actually exists in the props.
Be sure to pass the navigation prop to the component
Example
<ActionButton buttonColor="#1E73C1" onPress={() => this.buttonPressed('page2')}>
buttonPressed(page){
this.props.navigator.replace({
id: page,
})
}
You just put buttonPressed thats doesn't really do nothing if you have a buttonPressed() to exec the transition you need to put buttonPressed() , by the away a good thing to do is putting this type of function with '_' behind , like this: _buttonPressed('page2') and then _buttonPressed(page) , it helps a bit to know what you are doing
When I try to set the state in touchablehighlight onpress my app crashes. This is what I got:
<TouchableHighlight onPress={this.setState({toggleCharacter: false})}>
<Image style={styles.tekstballon} source={tekstballon} />
</TouchableHighlight>
My ultimate goal is to toggle toggleCharacter so if it is false I want to set it to true and if it's true I want to set it to false but I am not sure how to.
You're invoking that setState call immediately on render. You need to wrap it in a function that will be called on onPress instead, ie:
<TouchableHighlight onPress={() => this.setState({toggleCharacter: false})}>
Keep in mind, the above is a bit frowned upon as it's creating a new function for every instance but it's just meant to give you an idea of why you're getting your error (a bit more performant to add it to the class itself.)
Edited to answer comment. The 'better' way of doing it mentioned above would be:
class myComponent extends React.Component {
/*
...ctor and methods above
The below assumes Property initializer syntax is available.
If not, you need to autobind in the constructor
/*
handleOnPress = () => this.setState({ toggleCharacter: false })
render() {
return (
<TouchableHighlight onPress={this.handleOnPress}>
<Image style={styles.tekstballon} source={tekstballon} />
</TouchableHighlight>
);
}
}