Mobile Native Buttons

1
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.
asked
1 answers
1

Hello Adhityavarman V,

 

I guess you are referring to the ripple effect:

https://reactnative.dev/docs/touchablenativefeedback#ripple

 

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!

 

answered