onPress not triggering function

Question

I have a small component and I am trying to trigger a function onPress. I first tried the following: onPress={this.slider} and I did not receive a console log, then I tried onPress={()=>{this.slider}} and still did not receive a console log. Finally I tried onPress={console.log("Hello")} and received a console log. So I am clearly not calling the Slider function properly. I am not sure what I am doing incorrectly - something silly I am sure. All help is appreciated.

class newWave extends Component {

    state = {
        format: "TTS"
    }

    slider = () => {
        console.log("hi");
        if (this.state.format === "TTS")
            this.setState({ format: "Voice" })
        else if (this.state.format === "Voice")
            this.setState({ format: "TTS" })
    }

    render() {

        return (
            <View style={{height:"100%", width: "100%", flexDirection:"column", justifyContent: "center", alignItems:"center"}}>
            <View style={{height: "75%", width:"75%", backgroundColor:"blue", borderRadius:20, flexDirection:"row", justifyContent:"flex-end"}}>
                <View style ={{backgroundColor:"transparent", height: "10%", width:"30%", margin: "2%"}}>
                <View style = {{backgroundColor:"orange", height: "100%", width:"100%", borderRadius: 20,  flexDirection:"row", justifyContent:this.state.format==="TTS"?"flex-start":"flex-end", alignItems:"center"}}>
                <View style = {{backgroundColor:"green", height: "98%", width:"75%", borderRadius: 20, marginLeft: "1%", marginRight: "1%"}} onPress={()=>{this.slider}}></View>
                </View>
                </View>
            </View>
        </View>

        );
    }
}


export default newWave;

Just change View component in Button or TouchableOpacity — Idan
– Idan, Commented Aug 28, 2019 at 8:41

Harmenx · Accepted Answer · 2019-08-28 08:27:00Z

2

Let me introduce you to TouchableOpacity. The View doesn't provide an onPress prop.

<TouchableOpacity onPress={()=> {
    this.slider();
    }
  }>
   <View style = {{backgroundColor:"green", height: "98%", width:"75%", borderRadius: 20, marginLeft: "1%", marginRight: "1%"}} ></View>
</TouchableOpacity>

answered Aug 28, 2019 at 8:27

Harmenx

9461 gold badge5 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Auticcat Over a year ago

About the one time you saw the console.log, onPress={console.log("Hello")}, is because putting the brackets "()" will trigger the function wherever they are, logging it during every render. If you kept the code and tried pressing on the onPress you would notice that it won't actually trigger

Praveen kumar · Accepted Answer · 2019-08-28 08:44:56Z

2

In React Native, there are three ways to call onPress: TouchableNativeFeedback, TouchableHighlight and TouchableOpacity

so wrap the view inside any of this three, this three has onPress props.

answered Aug 28, 2019 at 8:44

Praveen kumar

16 bronze badges

Comments

Joseph D. · Accepted Answer · 2019-08-28 08:48:55Z

0

Use TouchableOpacity's onPress() prop.

Also, there are two ways to bind callbacks in React.

Using public class field syntax

const slider = () => {}

<TouchableOpacity onPress={this.slider}>
  ...
</TouchableOpacity>

Using Arrow function

function slider() {}

<TouchableOpacity onPress={() => this.slider()} />
  ...
</TouchableOpacity>

answered Aug 28, 2019 at 8:48

Joseph D.

12.2k4 gold badges40 silver badges72 bronze badges

Comments

Rishav Kumar · Accepted Answer · 2019-08-28 08:58:16Z

0

Please try this. This should work. View doesn't come with onPress event

    <Button 
title='Hello'
style = {{backgroundColor:"green", height: "98%", width:"75%", borderRadius: 20, marginLeft: "1%", marginRight: "1%"}} onPress={()=>{this.slider()}}>
</Button>

answered Aug 28, 2019 at 8:58

Rishav Kumar

5,5302 gold badges19 silver badges34 bronze badges

Comments

Firoz Ahmed · Accepted Answer · 2019-08-28 09:27:32Z

0

Try this code:

<TouchableOpacity
  style={{
    backgroundColor: 'green',
    height: '98%',
    width: '75%',
    borderRadius: 20,
    marginLeft: '1%',
    marginRight: '1%',
  }}
  onPress={this.slider}
/>

I would highly recommend using a stylesheet for defining your styles.

answered Aug 28, 2019 at 9:27

Firoz Ahmed

2,00618 silver badges21 bronze badges

Comments

Esso · Accepted Answer · 2019-08-28 10:08:39Z

0

you need to wrap the view where you want to click with a <TouchableOpacity /> and then pass the onPress={} to the TouchableOpacity, as follows

<TouchableOpacity onPress={CALL_YOUR_FUNCTION_HERE}>
   <View .... /> //add your view here
</TouchableOpacity>

You can also use <Button /> or <TouchableWithoutFeedback /> from react-native depending on your need and condition. Refer to react-native docs, it is written in a clear way, you can find whatever you need there

answered Aug 28, 2019 at 10:08

Esso

862 bronze badges

Collectives™ on Stack Overflow

onPress not triggering function

6 Answers 6

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related