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.

On an Android device, clicking on Button shows a circle that overflows to other components on the screen.

See original GitHub issue

Is there an existing issue for this?

I have searched the existing issues

Explain what you did

I’m trying to create a button with some action event after the user press it, but this circle shows up when I press the button when trying the app on my Android phone. I’ve tried playing around with the styles that the button has to find a workaround, but nothing seems to work.

Expected behavior

The highlight/overlay should only be within the button component and not overflowing outside of it.

Describe the bug

On an Android device, clicking on Button shows a circle that overflows to other components on the screen. The color of the circle seems to be affected by the color of the text.

Steps To Reproduce

Modified the Snack on the LinearProgress preview: https://snack.expo.dev/jyQXXCHkt
(Changed the text color to red, so it's easier to see)

Open it on an Android phone and pressing the button will reproduce the issue.

Screenshots

Screenshot_20220217-104945_Expo Go

Your Environment

react-native-elements: 3.4.2
react-native: 0.67.2

Issue Analytics

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

Top GitHub Comments

2reactions

ShouShou92410commented, Feb 17, 2022

@arpitBhalla Sorry forgot to mention that emulator works fine, but on an actual phone is where the bug is happening. I’m using Samsung’s Galaxy S8 with Android 9.

1reaction

mauriscommented, May 5, 2022

@arpitBhalla I see what I can do to get us to React Native Pressable, any specific direction / instructions? would you mind assigning me this issue to work on (if possible) thanks!

Top Results From Across the Web

How to add a circle after each button click android?

1 Answer 1 ... While there are many ways of doing this, I'd like to show two ways of doing this: Simplest way:...

Reveal or hide a view using animation - Android Developers

There are three common animations to use when showing or hiding a view. You can use the circular reveal animation, a crossfade animation, ......

Set prototype device and starting point - Figma Help Center

You can also access these settings by clicking the Show prototype settings button when editing a connection. Device. Use Device settings to control...

Learn about the new Meet layout - Google Meet Help

When the screen is maximized, a clock appears on the bottom left. Microphone, camera, captions, hand raise, presentation controls, more options and hang...

Buttons: floating action button - Material Design

A floating action button (FAB) represents the primary action for a screen.