Skip to content

Migrate Button component to use Pressable#4011

Merged
theianmay merged 11 commits intoreact-native-elements:nextfrom
OpenSrcContributions:Pressable-Migration
Jan 10, 2026
Merged

Migrate Button component to use Pressable#4011
theianmay merged 11 commits intoreact-native-elements:nextfrom
OpenSrcContributions:Pressable-Migration

Conversation

@codewithshinde
Copy link
Copy Markdown
Contributor

@codewithshinde codewithshinde commented Dec 22, 2025

Motivation

Refactored the internal touchable logic to improve performance, cross-platform consistency, and code maintainability. This change moves away from legacy Platform.select component switching in favor of a unified Pressable implementation that correctly handles dynamic styling and Android ripple effects.

Fixes # (issue)

Type of change

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • This change requires a documentation update

How Has This Been Tested?

  • Jest Unit Test
  • [x ] Checked with example app

Checklist

  • My code follows the style guidelines of this project
  • I have performed a self-review of my own code
  • I have commented my code, particularly in hard-to-understand areas
  • I have made corresponding changes to the documentation using yarn docs-build-api
  • My changes generate no new warnings
  • I have added tests that prove my fix is effective or that my feature works
  • New and existing unit tests pass locally with my changes
  • Any dependent changes have been merged and published in downstream modules

Additional context

@codecov
Copy link
Copy Markdown

codecov bot commented Dec 23, 2025 •
edited
Loading

Codecov Report

❌ Patch coverage is 50.00000% with 9 lines in your changes missing coverage. Please review.
✅ Project coverage is 79.40%. Comparing base (98bff52) to head (195f893).
⚠️ Report is 13 commits behind head on next.

Files with missing lines Patch % Lines
packages/base/src/AirbnbRating/SwipeRating.tsx 37.50% 5 Missing ⚠️
packages/base/src/Button/Button.tsx 60.00% 4 Missing ⚠️
Additional details and impacted files 
@@            Coverage Diff             @@
##             next    #4011      +/-   ##
==========================================
+ Coverage   79.26%   79.40%   +0.14%     
==========================================
  Files          90       90              
  Lines        2141     2141              
  Branches      960      952       -8     
==========================================
+ Hits         1697     1700       +3     
+ Misses        442      439       -3     
  Partials        2        2

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@louveshh
Copy link
Copy Markdown
Contributor

louveshh commented Dec 28, 2025 •
edited
Loading

Hey @codewithshinde! 👋

Your approach of migrating to Pressable is the right fix. I tested it and it works perfectly.

A few things I noticed while testing

1. Test for the actual bug scenario

You might want to add a specific test that reproduces the original bug to make sure it doesn't come back:

it('should switch backgroundColor when toggling disabled state', () => {
  const { toJSON, rerender } = render(
    <Button
      title="Test"
      disabled={true}
      buttonStyle={{ backgroundColor: 'blue' }}
      disabledStyle={{ backgroundColor: 'gray' }}
    />
  );

  // Start disabled (gray)
  // Then re-enable and verify it switches back to blue
  // This was the bug - it stayed gray on Android
});

2. Link to the issue

Could you add Fixes #3985 to your PR description?

3. The foreground: true in android_ripple

Curious about the foreground: true - does it make a visual difference? I hadn't thought of that.

Testing

I tested your branch against the reproduction steps from #3985:

  1. ✅ Create button with buttonStyle and disabledStyle with different background colors
  2. ✅ Toggle disabled between true and false
  3. ✅ Background color now correctly switches on Android

Works great! 🎉
@theianmay

@codewithshinde
Copy link
Copy Markdown
Contributor Author

codewithshinde commented Dec 29, 2025

@louveshh , @theianmay

I have added the test case requested, which toggles between disabled and enabled.

Adding up to this, my changes related to fractions (#3990) are also included in this PR.

image

@theianmay theianmay self-requested a review January 6, 2026 05:44
@theianmay theianmay self-assigned this Jan 6, 2026
@theianmay theianmay added the component: Button Issue related to Button Component label Jan 10, 2026
@github-project-automation github-project-automation bot moved this to In Progress 🚧 in Community Roadmap 🛣 Jan 10, 2026
@theianmay theianmay added this to the v5.0.0 milestone Jan 10, 2026
@theianmay theianmay linked an issue Jan 10, 2026 that may be closed by this pull request
ANDROID: Disabled background color incorrectly overrides buttonStyle background color #3985
Closed
1 task
theianmay
theianmay approved these changes Jan 10, 2026
View reviewed changes
Copy link
Copy Markdown
Member

@theianmay theianmay left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Completed testing for Button component migration to Pressable. Also tested SwipeRating component changes. Both are working as expected - ready to merge

@github-project-automation github-project-automation bot moved this from In Progress 🚧 to Ready to Merge (PRs) ✨ in Community Roadmap 🛣 Jan 10, 2026
@theianmay theianmay merged commit 8b5ec02 into react-native-elements:next Jan 10, 2026
8 of 9 checks passed
@github-project-automation github-project-automation bot moved this from Ready to Merge (PRs) ✨ to Closed or Merged 🏁 in Community Roadmap 🛣 Jan 10, 2026
github-actions bot pushed a commit that referenced this pull request Jan 10, 2026
@theianmay
Merge pull request #4011 from OpenSrcContributions/Pressable-Migration
40e89ba 
Migrate Button component to use Pressable
github-actions bot pushed a commit that referenced this pull request Jan 10, 2026
@theianmay
Merge pull request #4011 from OpenSrcContributions/Pressable-Migration
5004480 
Migrate Button component to use Pressable
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@theianmay theianmay theianmay approved these changes

Assignees

@theianmay theianmay

Labels

component: Button Issue related to Button Component

Projects

Community Roadmap 🛣
Status: Closed or Merged 🏁

Milestone

v5.0.0

Development

Successfully merging this pull request may close these issues.

ANDROID: Disabled background color incorrectly overrides buttonStyle background color

3 participants

@codewithshinde @louveshh @theianmay