CODEWITHSUNDEEP
react-nativereact-native-vector-icons
sMojtaba Mar
sMojtaba Mar

Reputation: 359

React-Native onPress doesn't work, when touch the icon

I'am using react-native-element to create a button group, that embedded an Icon from react-native-vector-icons .

the problem is that when the icon is touched, onPress does not get triggered 

    constructor(props) {
      super(props);    
      this.state = { selectedIndex: 0 };   
      this.SetSelected = this.SetSelected.bind(this);
    }


    SetSelected(index) {
      this.setState({ selectedIndex: index });
    }

    return(
    <ButtonGroup
      selectedIndex={this.state.selectedIndex}
      onPress={this.SetSelected}
      selectedButtonStyle={{ backgroundColor: 'blue' }}
      buttons={[
        {
          element: () => (
            <Icon.Button
              name="slack"
              style={{ backgroundColor: 'white' }}
              color={'black'}
              size={30}
              title="Inbox"
            >
              <Text style={{ color: 'black', fontSize: 15, textAlignVertical: 'center', textAlign: 'center' }}                   
              >
                All
              </Text>
            </Icon.Button>
          ),
        })

Upvotes: 1

Views: 6686

Answers (2)

sMojtaba Mar
sMojtaba Mar

Reputation: 359

Thanks to Kyle Roach,

the reason is because I am using an Icon.Button which is touchable. So when I try to tap to change the ButtonGroup, the touch event will be caught by Icon.Button instead of the button for the buttonGroup.

I should use Icon instead of Icon.Button.

Upvotes: 3

Leonardo Drici
Leonardo Drici

Reputation: 789

Try making it a function.

onPress={() => {this.SetSelected()}}

If it doesn't work please provide the this.SetSelected function.

Upvotes: 1

Related Questions