Button styles wrongly persist after toggling from light to dark, or dark to light

Open
#3,665 14 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
35/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Stale
Tech stack
react-native
Domain
mobile

Research direction

Reproduce the issue by defining button styles under the RneTheme's theme.components, then toggle between light and dark modes. Compare the button background and text colors with the expected theme values in each mode; done means styles update in both directions without retaining the initially loaded values.

Written by the indexing model from the issue text.

Description

priority: high Theming
Is there an existing issue for this?
  • I have searched the existing issues
Explain what you did

Theming buttons with the theme provider and toggling the dark/light mode.

Expected behavior

The colors should be changed to those defined under theme.components

Describe the bug

Same bug as #3655, but for buttons

Steps To Reproduce
Add a button with styles defined in the RneTheme, then toggle dark/light mode and note that the styles do not update
Screenshots

Toggling from light mode to dark mode, or reverse, persists the originally loaded styles for background and text colors

Correct button light mode

image

Incorrect button dark mode (after loading app in light mode and switching to dark)

image

Correct button dark mode

image

Incorrect button light mode (after loading app in dark mode and switching to light)

image

Your Environment
Your Environment
`npx @rneui/envinfo` 
  ```
    System:
OS: Linux 5.15 Ubuntu 22.04.1 LTS 22.04.1 LTS (Jammy Jellyfish)
CPU: (4) x64 AMD Ryzen 7 5800X 8-Core Processor
Memory: 2.08 GB / 19.51 GB
Container: Yes
Shell: 5.8.1 - /usr/bin/zsh

Binaries:
Node: 16.17.0 - ~/.nvm/versions/node/v16.17.0/bin/node
Yarn: 1.22.19 - ~/.nvm/versions/node/v16.17.0/bin/yarn
npm: 8.15.0 - ~/.nvm/versions/node/v16.17.0/bin/npm
Watchman: 4.9.0 - /usr/bin/watchman
Managers:
Apt: 2.4.7 - /usr/bin/apt
pip3: 22.2.2 - ~/.local/bin/pip3
Utilities:
CMake: 3.22.1 - /usr/bin/cmake
Make: 4.3 - /usr/bin/make
GCC: 11.2.0 - /usr/bin/gcc
Git: 2.38.1 - /usr/bin/git
SDKs:
Android SDK:
API Levels: 31, 32, 33
Build Tools: 30.0.3, 31.0.0, 33.0.0
System Images: android-31 | Google APIs Intel x86 Atom_64, android-31 | Google Play Intel x86 Atom_64
IDEs:
Nano: 6.2 - /usr/bin/nano
VSCode: 1.68.1 - /usr/bin/code
Languages:
Bash: 5.1.16 - /usr/bin/bash
Perl: 5.34.0 - /usr/bin/perl
Python3: 3.10.6 - /usr/bin/python3
Databases:
SQLite: 3.32.2 - /home/me/Android/Sdk/platform-tools/sqlite3
Browsers:
Chrome: 106.0.5249.61
Firefox: 106.0
Monorepos:
Yarn Workspaces: 1.22.19
Lerna: 5.6.2
```

Dominant language
MDX
Stars
25.9k
Forks
4.7k
No merged PRs in 30d

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from react-native-elements/react-native-elements

All issues in react-native-elements/react-native-elements

Similar issues

More Mobile Dev issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.