CODEWITHSUNDEEP
reactjsreact-native
HarryShotta
HarryShotta

Reputation: 345

onPress not triggering function

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;

Upvotes: 0

Views: 677

Answers (6)

Esso
Esso

Reputation: 86

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

Upvotes: 0

Firoz Ahmed
Firoz Ahmed

Reputation: 2006

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.

Upvotes: 0

Rishav Kumar
Rishav Kumar

Reputation: 5460

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>

Upvotes: 0

Joseph D.
Joseph D.

Reputation: 12174

Use TouchableOpacity's onPress() prop.

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

  1. Using public class field syntax
const slider = () => {}

<TouchableOpacity onPress={this.slider}>
  ...
</TouchableOpacity>
  1. Using Arrow function
function slider() {}

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

Upvotes: 0

Praveen kumar
Praveen kumar

Reputation: 1

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.

Upvotes: 2

Harmenx
Harmenx

Reputation: 946

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>

Upvotes: 2

Related Questions