Slow performance when switching dark mode in React Native Elements

Open
#3,817 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
25/100
Issue type
Bug
Clarity
Needs clarification
Activity status
Stale
Tech stack
react-native

Research direction

Start by reproducing the dark-to-light and light-to-dark colorScheme switches using the steps in the issue on a simulator or physical device. Investigate the React Native Elements colorScheme path and measure the transition performance; done means the scheme changes without noticeable delay. The environment details are missing, so collect them before narrowing the cause.

Written by the indexing model from the issue text.

Description

Needs Triage
Is there an existing issue for this?
  • I have searched the existing issues
Explain what you did

When switching the colorScheme from dark to light or light to dark in React Native Elements, the app's performance is noticeably slow. This issue affects the user experience and needs to be addressed to ensure a smoother transition between color schemes.

Expected behavior

The colorScheme should change smoothly and instantaneously without any noticeable delays or performance issues.

Describe the bug

When switching the colorScheme from dark to light or light to dark in React Native Elements, the app's performance is noticeably slow. This issue affects the user experience and needs to be addressed to ensure a smoother transition between color schemes.

Steps To Reproduce
1. Create a React Native project with the necessary dependencies and configurations for React Native Elements.
2. Implement the colorScheme switching functionality using React Native Elements' colorScheme prop or any custom logic.
3. Run the application on a simulator or a physical device.
4. Observe the performance when switching between dark and light colorScheme.
Screenshots

https://github.com/react-native-elements/react-native-elements/assets/81244669/74846d73-91f9-46b1-95d8-76bb313ef759

Your Environment
`npx @rneui/envinfo`
  ```
    Output from `npx @rneui/envinfo` goes here.
  ```
Dominant language
MDX
Stars
25.9k
Forks
4.7k
PR merge metrics
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.