Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Disabling Fabs android Ripple effect

See original GitHub issue

Issue Description

Cannot disable the android ripple effect for FABs.

npm, react-native, react and native-base version version used

"react": "16.4.1",
"react-native": "0.56.0",
"native-base": "^2.8.0",

Expected behaviour

No ripple effect or changed color of android ripple effect.

Actual behaviour

Cannot change the FABs android ripple color.

Steps to reproduce

Tried changing the style and containerStyle of FAB to change the androidRippleEffect.

Only on android

Issue Analytics

State:
Created 5 years ago
Reactions:9
Comments:9 (2 by maintainers)

Top GitHub Comments

5reactions

YoonjaeYoocommented, Jan 30, 2019

This is a workaround.

<Fab
    containerStyle={{ borderRadius: 28, overflow: "hidden" }}>
   // inner elements
</Fab>

1reaction

riccardonuzzcommented, Oct 25, 2018

I’m also trying to remove the ripple effect on the container of the FAB with no success. It should be applied only to the circle.

Top Results From Across the Web

Disabling ripple effect on buttons jetpack compose [duplicate]

Is there anyway from any Button to disable its ripple effect without adding a Column or Box with a clickable attribute into its...

3 Ways to Disable the Ripple Effect in Jetpack Compose

1. Using the Mutable Interaction Source: ... Let's disable the ripple. First, open the Modifier.clickable() signature. ... We can disable the ripple ......

Unable to remove ripple effect from ons-fab

Hello, in my application I am using the most basic onsFab button ..... As you can see, the “ripple” attribute is not specified....

Buttons: floating action button - Material Design

A floating action button (FAB) represents the primary action for a screen. ... it to have a ripple effect by instantiating MDCRipple on...

ion-button - Ionic Framework

Attribute, disabled ... Note: setting this will interfere with the Material Design ripple. ... --ripple-color, Color of the button ripple effect.