React Native - Vector icons in Navigation bar

Question

In my React Native app, I would like to use Vector Icons as navigation bar buttons. For that, I'm using: https://github.com/oblador/react-native-vector-icons For navigation: https://reactnavigation.org/

I managed to set the icons as well, but when I tap the buttons, I get an unwanted effect where the background turns black. Is there a way how I can keep the background color transparent also when the button's pressed?

Here's my code:

static navigationOptions = ({ navigation }) => {
    const { params } = navigation.state

    return {
    headerTitle: "Blog posts",
    headerRight: (            
        <Icon.Button name="quote-right" backgroundColor="transparent" color="black" onPress={() => params.postComment()}>
            <Text style={{fontSize: 15}}></Text>
        </Icon.Button>            
      ),
    headerLeft: (                                     
        <Icon.Button name="navicon" backgroundColor="transparent" color="black" onPress={() => params.postComment()}>
            <Text style={{fontSize: 15}}></Text>
        </Icon.Button>                                                                     
      ),
    };
};

And here's what I got:

Answer 1

The prop you are looking for is underlayColor , that's the one you should set to transparent .

<Icon.Button
   name="quote-right"
   backgroundColor="transparent"
   underlayColor="transparent" // This one
   color="black"
   onPress={() => params.postComment()}
>
     <Text style={{fontSize: 15}}></Text>
</Icon.Button>