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')}/>
Related
I am trying to navigate to a route using onPress, but get the error: Please attach a method to this component I need the whole component clickable, button and text - is that possible?
<TouchableOpacity
style={styles.widgetCont}
onPress={() => navigate(AppRoutes.Settings.Name)}
>
<Text style={styles.widgetText}>{setupRemindersDescription}</Text>
<Button
title={setupRemindersLabel}
buttonStyle={[buttons.primarySpace, styles.widgetBTN]}
titleStyle={buttons.smallTitle}
/>
</TouchableOpacity>
This doesnt give me the error and navigates fine:
<TouchableOpacity
style={VehicleStyles.widgetCont}
onPress={async () => {
const success = await tryBiometrics();
if (success) {
Linking.openURL(BookRepairUrl);
}
}}
>
<Button
title={myVehicles.booknow}
buttonStyle={[buttons.primarySpace, VehicleStyles.widgetBTN]}
titleStyle={buttons.smallTitle}
/>
</TouchableOpacity>
I need the whole component clickable, button and text - is that possible?
for that you can use Pressable from react-native.
I have multiple Text elements as children of a TextInput for the purpose of styling. I would like the user to tap on them to activate a modal (unique to that Text element), however I'm unable to get the onPress event to work. Here is a simplified example:
<TextInput>
<Text onPress={() => console.log(1)}>touch me</Text>
</TextInput>
"touch me" is editable as you'd expect inside a TextInput, but onPress doesn't fire when it is tapped.
Is there a way I can make this setup work as I intend?
You can to wrap it inside a TouchableOpacity:
const [value, setValue] = useState('Press me');
return <TouchableOpacity onPress={() => alert("Hello world")}>
<TextInput
value={value}
/>
</TouchableOpacity>
I have a TouchableHighlight zone in my component.
I would like to trigger _onPress method for a quick tap, and _onLongPress for a longer tap.
This works, but _onPress method is always triggered when I release the tap.
How can I do to trigger only one of these methods depending on short tap or long tap ?
class MyClass extends React.Component {
_onPress = () => {
console.log("Press")
}
_onLongPress = () => {
console.log("LongPress")
}
render() {
return (
<TouchableHighlight
style={styles.touchable}
underlayColor="white"
delayPressIn={2000}
onPress={this._onPress}
onPressIn={this._onLongPress}
>
<View style={styles.box}>
<Image style={styles.logo} source={this.state.logo.id} />
</View>
</TouchableHighlight>
)
}
}
Many thanks :)
According to the doc, you can pass both onPress and onLongPress props directly to the TouchableHighlight component, since it inherits all the props available from TouchableWithoutFeedback.
<TouchableHighlight
onPress={this._onPress}
onLongPress={this._onLongPress}
delayLongPress={2000}
...
>
...
</TouchableHighlight >
Just one of the two events will be triggered.
Here you can try an example of what I'm talking about.
TouchableHighlight inherits all props from TouchableWithoutFeedback ,rather than using onPressIn which you are trying to use in your code, you can use long and short press. So whatever you are trying will not work in this case.
You can use both TouchableHighlight TouchableWithoutFeedBack, aa both have the same props. It
have both onLongPress for long press and onPress for short press funtionality which you can fulfill your requirement.
<TouchableHighlight
style={styles.button}
onPress={this.onPress}
onLongPress={this.onPress2}
>
<Text> Touch Here </Text>
</TouchableHighlight>
and,
<TouchableWithoutFeedBack
style={styles.button}
onPress={this.onPress}
onLongPress={this.onPress2}
>
<Text> Touch Here </Text>
</TouchableWithoutFeedBack>
Hope this helps.....Thanks :)
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 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.