Mobile Native Buttons

Hello everyone,           When I click on the Onclick buttons or containers in a Native Application, the default clicking effect appears and disappears. I don't want that effect if someone can help, please do. When I click the button in the image below, a white shade appears, which I wish to change or remove.
1 answers

Hello Adhityavarman V,


I guess you are referring to the ripple effect:


This effect is defined at the ReactNative level and I guess there isn’t an easy way to disable this without changing the source code.


A force brute way to minimize this effect is to define a custom JS Style property to your button:

export const btnNoRipple = {
    container: {
        borderColor: "red",
        backgroundColor: "red",
        rippleColor: "red",
    containerDisabled: {
        borderColor: "red",
        backgroundColor: "red",

 Define this class in the main.js file.


Then, apply this class in your button:


The result will be like this:


If you click the button the ripple color will not be noticed, since its color is the same of the background.

I have also to change the "disabled background" color to red, because React Native uses this color for a short of time during the pressing of the button.


Certainly is not the best solution, but I think it can help.


Let me know if it works!