OnPress not working inside Touchable Opacity

Question

I am building a mobile app on react-native! Recently I build my own header component for every page. Here is the code of my Header component. I have two icons inside that component. But unfortunately these buttons are not working at all!!

import React, {Component} from 'react';
import { 
    Text, 
    View, 
    Image, 
  Dimensions,
  TouchableOpacity
} from 'react-native';

import Icon from 'react-native-vector-icons/Ionicons';

import Styles from './Styles';

export default class ChatHead extends Component {
  constructor(props) {
      super(props);

      this.state = {
      }
  }

  render(){
    console.log(this.props.headerText, this.props);
    if(this.props.headerText.length > 16){
      name = this.props.headerText.substr(0, 16);
      name += "..."; 
    }
    else name = this.props.headerText;

    return(
      <View style={Styles.viewStyle}>
        <Text style={Styles.nameStyle}>{name}</Text>

        <TouchableOpacity 
          style={Styles.audioCallButton}
          onPress={() => console.log("Audio Button Pressed")}
        >
          <Icon name={'md-call'} size={25} color="white" align='right'/>
        </TouchableOpacity>

        <TouchableOpacity 
          style={Styles.videoCallButton}
          onPress={() => console.log("Video Button Pressed")}
        >
          <Icon name={'ios-videocam'} size={28} color="white" align='right'/>
        </TouchableOpacity>
      </View>
    );
  }
};

onPress is not responding at all!

by not working, do you mean you arent getting the console output and/or the touchable isnt providing any visual feedback? — Ryan Turnbull, Oct 24 '17 at 10:08

score 0 · Answer 1 · answered Jan 14 '20 at 21:57

0

Not the case here, but for future readers, it could be because you wrapped one TouchableOpacity inside an other

answered Jan 14 '20 at 21:57

Simon

6,025
7
46
98

score -1 · Answer 2 · answered Oct 24 '17 at 10:20

Try this solution, notice I have wrapped your Icon within a view and also the name.

import React, {Component} from 'react';
import { 
  Text, 
  View, 
  Image, 
  Dimensions,
  TouchableOpacity
} from 'react-native';

import Icon from 'react-native-vector-icons/Ionicons';

import Styles from './Styles';

export default class ChatHead extends Component {
constructor(props) {
  super(props);

  this.state = {
  }
}

render(){
 return(
  <View style={Styles.viewStyle}>
     <Text style={Styles.nameStyle}>{this.props.headerText.length > 16 ?
`${this.props.headerText.substr(0, 16)}...` : this.props.headerText}</Text>

    <TouchableOpacity 
      style={Styles.audioCallButton}
      onPress={() => console.log("Audio Button Pressed")}
    ><View>
      <Icon name={'md-call'} size={25} color="white" align='right'/></View>
    </TouchableOpacity>

    <TouchableOpacity 
      style={Styles.videoCallButton}
      onPress={() => console.log("Video Button Pressed")}
    ><View>
      <Icon name={'ios-videocam'} size={28} color="white" align='right'/></View>
    </TouchableOpacity>
  </View>
 );
 }
};

score -1 · Answer 3 · answered May 22 '21 at 16:47

-1

try alert in place of console.log to view the data then and there, it might be the case that you missed the location of c

answered May 22 '21 at 16:47

Sagar

1
3

OnPress not working inside Touchable Opacity

3 Answers3