dooboolab-community/dooboo-ui

UI Framework which mainly targets Expo

dooboo-ui's Issues

Use self explanatory test rather than snapshot testing.

Hi. I'm having good time reading code from dooboo-ui.
But I think some test code in dooboo-ui needs improvements.

Is your feature request related to a problem? Please describe.
Quite a lot of test code is not self-explanatory, it's just snapshot testing.

// every test code is almost same as below

testingLib = render(component);

const json = testingLib.toJSON();

expect(json).toMatchSnapshot();

Describe the solution you'd like
I think it might be better if components are tested using assertions in testing-library, context, given.

Describe alternatives you've considered
If there are reasons to stick to snapshot testing(ofcourse there's some situation hard to test without it), I think at least code organizing with context/given, and removing let might be great.

// ex
let props: any;
let component: ReactElement;
let testingLib: RenderAPI;

Additional context
I found article which is similar to my opinion. Maybe it will let you understand my point.

I'm not experienced programmer so maybe there's something I missed. Then please let me know. If you think part of my idea is acceptable, I'll be working on it.

Thanks.

Detach main theme from `dooboo-ui` and maintain seperately

Previously, we deprecated @dooboo-ui/theme package and merged the theme to dooboo-ui which is the main package. The reason was that other UI frameworks also have their own ThemeProvider in their core package and we wanted to serve a similar experience to developers.

However, according to #104, and thinking further, we also want to minimize default design in separate dooboo-ui package libraries like @dooboo-ui/alert-dialog.

When trying to support the same theme to other coming package libraries, we found that we need to maintain theme in a separate package.

This can also lead to another advantage for other independent UI libraries who wish to use our theme package which is designed to support light and dark themes in default.

[bug] FAB gap styling

Describe the bug

Need to fix margin for the gap between the buttons.
The units for the web and mobile are different.

I forgot to check the style in web env.
My bad, I will fix the problem ASAP.

To Reproduce
Steps to reproduce the behavior:

got to : url > FAB > click FAB
https://dooboolab.github.io/dooboo-ui/

Expected behavior
Needs more gap between buttons

Screenshots

Desktop (please complete the following information):

• OS: [macOS 11.6]
• Browser [chrome]
• Version [94.0.4606.71]

Unable to use Prompt in [AlertDialog]

Describe the bug
Unable to use Prompt in [AlertDialog]

To Reproduce
When click Prompt in storybook, error occurs.

Expected behavior
Type words in text input.

Screenshots
Video

[FR] Image Slider offer

I offer an image slider.
Image sliders(also known as image carousels or slideshows) can be a convenient way to display multiple images.
I think that there are many cases where multiple images need to be displayed on mobile.
It will be useful in such a situation.

Theme support for packages

Is your feature request related to a problem? Please describe.
Currently, packages such as AlertDialog does not support theme.

Describe the solution you'd like
Due to @dooboo-ui/theme, it is possible to support theme in package without installing entire dooboo-ui.

[FR] Ability to change loading color in [Button]

Is your feature request related to a problem? Please describe.

When I customized bacgkroundColor or color to dark, It's hard to see a [LoadingElement] since loading color is fixed with text.basic.

Screen.Recording.2023-03-10.at.4.34.21.PM.mov

Describe the solution you'd like
I think providing a loading styles props would be great. And how about making the [LoadingElement] have the same color as the text color?

Remove some chained ternaries

I like chained ternaries and I love how they used in this project.
But I think sometimes chained ternaries are not the best option. (depends on logic)

https://github.com/dooboolab/dooboo-ui/blob/8187fcb6c8813f84561e9da667bde058b7fd1de0/main/Styled/StyledComponents.tsx#L29-L46

For example, I think above code snippet might be more readable and sustainable when written like this :

{
...

  background-color: ${({theme, type, outlined, disabled}) => {
    if (disabled) return undefined; 

    if (outlined) return theme.background;

    return theme[type ?? 'primary'];
  }};
}

Please let me know your opinion on this. 😄

Modify relative path to absolute path.

Is your feature request related to a problem? Please describe.
I'd like to change the file path of the project to the absolute path format.

Describe the solution you'd like
Because it uses many files such as components, storybooks, and styles, I think it will improve code readability if I modify it to the absolute path.

Describe alternatives you've considered
reactnative.dev
This official document describes how to install the babel-plugin-module-resolver to introduce an absolute path. You can also install the babel-plugin-root-import.

Additional context
Is there any problem installing this package or using the absolute path? I'd appreciate it if you could leave a comment.

Action Required: Fix Renovate Configuration

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Location: renovate.json
Error type: The renovate configuration file contains some invalid settings
Message: Invalid configuration option: packageRule

Contribution guide document's invalid links

Describe the bug
The Contribution Guide document contains an invalid link.

Looking at the history, it seems that it was added in 2019 and then disappeared at some point.

To Reproduce

1. Go to the link
2. Check dooboolab's vision-and-mission and code of conduct

Expected behavior
I want to know dooboolab's vision-and-mission and code of conduct.

Screenshots

Add rightElement props to [Edittext]

Is your feature request related to a problem? Please describe.
I think it would be better to add rightElement props to [EditText] component.

For example, Password input can have lock icon on the right to toggle password value visibility.

Describe the solution you'd like
Add rightElement?: ReactElement props to [EditText].

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

[ButtonGroup] docs not rendering.

This is not rendering. However, this works fine.

Maybe #56 is the problem?

[FR] Apply and detect dark mode in storybook

Is your feature request related to a problem? Please describe.
In our docs, we provide each Dark and Light theme separately to show how they look different.
However, this document does not look natural because, in every doc, two different theme components are shown which makes user hard to read.

For example, in our doc

We don't want to copy and paste the same components to show dark mode components.

Describe the solution you'd like
Use the switch to toggle the theme and check out different styles. Maybe using storybook-dark-mode might help.

Describe alternatives you've considered
N/A

Additional Context
https://betterprogramming.pub/building-dark-mode-for-storybook-and-web-applications-99d3a0b76312

[FloatingActionButton] implementing floatingActionButton component

Floating action button(FAB) is a very common component in touch based devices.

material design

There are many libraries that supports floating action button, and it is good for highlights the most important action on the page.

I think we should support FAB.

I'm proposing FAB that has the following features:

1. that can be placed in an absolute position on the screen.
2. that allows you to set icons with content
3. that can show additional action buttons when selected

Useless switch statement

https://github.com/dooboolab/dooboo-ui/blob/d9721babfd7a6d8a20172bdef3e775d617c2cb8c/docs/src/components/ButtonGroup/index.tsx#L32-L40

https://github.com/dooboolab/dooboo-ui/blob/d9721babfd7a6d8a20172bdef3e775d617c2cb8c/stories/dooboo-ui/ButtonGroupStories/index.tsx#L33-L41

I think switch statement is uselsss here. Am I missing something?

[EditText] default padding in boxed type

Describe the bug
[EditText] seems to have css compile error. In project code, renderContainer has paddingVertical: 8 when decoration is boxed.

But In my node_modules, It compiles to paddingTop: 8.

I'm currently using "dooboo-ui": "^0.2.0-rc.6".

Additional context
Add any other context about the problem here.

Wrong link in overview documentation

Describe the bug
function component link on first line in getting started is page not found

To Reproduce
Steps to reproduce the behavior:

1. Click on function component link (https://blog.logrocket.com/pure-functional-components)

Expected behavior
page is showing

Screenshots
none

Desktop (please complete the following information):

• OS: MacOS
• Browser: Chrome
• Version: 92

Smartphone (please complete the following information):

• Device: none
• OS: none
• Browser none
• Version none

Additional context
Let's found this subject togeter!
if you have any impressed article for this subject, open PR or leave a comment

[FR] Storybook v7 migration and doc refactoring

The Storybook v7 is out with many updates. Willing to migrate project.

In our dooboo-ui,dooboolab.com documentation, we'd like to remove many demos and use storybook knobs and action to visualize components.

We want to focus on implementation and not demos. In our doc, we need a minimal demo and the definition of components and props.

Support embedding default font

Is your feature request related to a problem? Please describe.
Support embedding default font to Typography would be wonderful.

Describe the solution you'd like
After loading fonts,

const [fontsLoaded] = useFonts({
  'RobotoSlab-Regular': require('../assets/fonts/RobotoSlab-Regular.ttf'),
});

Set default font like below should apply all Typography fontFamily.

setDefaultFontFamily('RobotoSlab-Regular');

Describe alternatives you've considered
N/A

Custom theme type overrides default theme type properties.

Describe the bug
Custom theme type overrides default theme type even though I just make a bg property.

The theme values are works but typescript complains.

To Reproduce
Steps to reproduce the behavior:

1. Make a custom theme according to guide like below.

export const light = {
  bg: {
    default: '#FFFFFF',
  },
};

export type CustomAppTheme = typeof light & DoobooTheme;

export const dark = {
  bg: {
    default: '#232323',
  },
};

export const theme = {
  light,
  dark,
};

2. Then, Create a type declaration file like below.

import '@emotion/react';
import type {DoobooTheme} from 'dooboo-ui';
import type {CustomAppTheme} from './theme';

type AllTheme = CustomAppTheme & DoobooTheme;

declare module '@emotion/react' {
  export interface Theme extends AllTheme {
    isMobile?: boolean;
    isTablet?: boolean;
    isDesktop?: boolean;
  }
}

declare module 'dooboo-ui' {
  export interface DoobooTheme extends AllTheme {
    isMobile?: boolean;
    isTablet?: boolean;
    isDesktop?: boolean;
  }
}

Expected behavior
Properties which are not customized should be typed.

required import disappears when installed

Describe the bug
I added @expo/match-media import statement on package/theme/ThemeProvider.tsx in #243.
But that statement is disappeared on other project's node_modules.

To Reproduce
Steps to reproduce the behavior:

1. Install "dooboo-ui": "^0.2.0-rc.3" in an expo project.
2. Check node_modules/@dooboo-ui/theme/lib/ThemeProvider.js file.
3. import '@expo/match-media'; statement are not showed.

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

In dooboo-ui/packages/theme/lib/node_modules`

In an external project via yarn install(no import from '@expo/match-media' statement)

Additional context
N/A

command error when running build:storybook in macOS

Describe the bug
When run yarn build:storybook in macOS, sed command show error like below.

sed: eb-build/index.html: No such file or directory

To Reproduce

1. Clone repository
2. run yarn build:storybook command in console
3. It shows error

Expected behavior

it not showing error, and successfully replace /dooboo-ui with . globally.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: macOS BigSur 11.5.2(20G95)
• zsh: zsh 5.8 (x86_64-apple-darwin20.1.0) (with oh-my-zsh)

Additional context

I researched it, i found it sed -i option is do differently by OS (GNU or macOS)
see stackoverflow answer
so, i changed web-build-postinstall.sh like below, then it works

sed -i '' -e 's/\/dooboo-ui/./g' web-build/index.html

but, i don't know that command will run at macOS. i think it maybe run on linux based container.. 🤔
so i'm not sure this issue need to be handled. 😅

[Bug report]: demos are not working

Describe the bug
https://dooboo-ui.dooboolab.com/
On this demo page FAB, Icon, IconButton, LoadingIndicator, SwichToggle Components are not working.

with these error messages.

and It
To Reproduce

1. Go to 'https://dooboo-ui.dooboolab.com/'
2. Click on 'one of(FAB, Icon, IconButton, LoadingIndicator, SwichToggle)'
3. See error

• OS: [Mac 11.6]
• Browser [chrome]
• Version [96.0.4664.110]

dependency packages not installed automatically

Describe the bug

When install dooboo-ui and use some components, error occured like below.

error: Error: Unable to resolve module react-native-vector-icons from /<some_path>/node_modules/dooboo-ui/Icon/index.js: react-native-vector-icons could not be found within the project or in these directories:
  node_modules/dooboo-ui/node_modules
  node_modules

I found missing package list

• @emotion/react
• @emotion/native
• react-native-vector-icons

To Reproduce

1. create example directory by run npx react-native init <project_name> --template react-native-template-typescript
2. install dooboo-ui by running yarn add doooboo-ui
3. import and use some component from dooboo-ui like Get Started
4. run app by react-native start and react-native run-android
5. unable to resolve module error occurred

Expected behavior

User don't need to install dependent packages, just installed automatically.
and don't occur "unable to resolve module error"

Screenshots
If applicable, add screenshots to help explain your problem.

Smartphone (please complete the following information):

• Device: Google Pixel 41
• OS: Android 11
• dooboo-ui version : 0.1.23
• npm version : 7.20.3
• yarn version : 1.22.11

Additional context
Add any other context about the problem here.

Enhance [Accordion] usability

I'm uncertain about how to use Accordion component.

if it's just expandable component, simple is better good. (one summary, one detail) like a below.
https://material-ui.com/components/accordion/#simple-accordion

if it's like a list, that component provides a lot of feature. (not only display but also clickable, linking..)
https://reactnativeelements.com/docs/next/main/usage/ListItem/ListItem/#listitem-accordion
https://material-ui.com/components/lists/#nested-list

To inject data props is very simple and awesome. (Unlike other UI framework, it's dooboo-ui's differentiation)
but i think this feature is limited in at least accordion. (because datum bodies type is string[])

In order to get a direction of how to improve, i would like to discuss them further.

Default theme is not applied

Default theme is not applied correctly.

See this Codesandbox and remove ThemeProvider. It is not working properly.

Although writer provided theme with default prop / value, it is not applied.

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update all non-major dependencies (@babel/core, @babel/preset-react, @commitlint/cli, @commitlint/config-conventional, @dooboo/eslint-config-react-native, @emotion/react, @expo/metro-runtime, @react-native-community/datetimepicker, @react-native-community/slider, @storybook/addon-docs, @storybook/addon-essentials, @storybook/addon-links, @storybook/addon-ondevice-actions, @storybook/addon-ondevice-backgrounds, @storybook/addon-ondevice-controls, @storybook/addon-ondevice-notes, @storybook/addon-react-native-web, @storybook/addons, @storybook/react, @storybook/react-native, @storybook/react-webpack5, @testing-library/react-native, @types/jest, @types/node, @types/react-test-renderer, babel-plugin-react-native-web, eslint, eslint-plugin-storybook, expo, expo-font, expo-linear-gradient, husky, lerna, prettier, react, react-dom, react-native-vector-icons, react-test-renderer, storybook, storybook-dark-mode)
• chore(deps): update dependency eslint to v9
• chore(deps): update expo monorepo (major) (babel-preset-expo, expo, expo-font, expo-linear-gradient, expo-screen-orientation, jest-expo)
• chore(deps): update storybook monorepo to v8 (major) (@storybook/addon-docs, @storybook/addon-essentials, @storybook/addon-links, @storybook/react, @storybook/react-webpack5, storybook)
• Click on this checkbox to rebase all open PRs at once

Ignored or Blocked

These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.

• fix(deps): update dependency date-fns to v3

Detected dependencies

github-actions

.github/workflows/ci.yml

• actions/checkout v4
• actions/setup-node v4
• codecov/codecov-action v4

.github/workflows/gh-pages.yml

• actions/setup-node v4
• expo/expo-github-action v8
• peaceiris/actions-gh-pages v4

.github/workflows/publish.yml

• actions/checkout v4
• actions/setup-node v4
• expo/expo-github-action v8

npm

lib/package.json

• @dooboo-ui/theme ^0.12.14
• dooboolab-welcome ^1.3.2
• react-responsive ^10.0.0
• @emotion/native >=11.0.0
• @emotion/react >=11.0.0
• react >=16.9

package.json

• @emotion/native 11.11.0
• @emotion/react 11.11.1
• @expo/match-media ^0.4.0
• @expo/metro-runtime ^3.1.2
• expo ~50.0.5
• expo-font ~11.10.2
• expo-linear-gradient ~12.7.1
• expo-screen-orientation ~6.4.1
• react 18.2.0
• react-dom 18.2.0
• react-native-vector-icons ^10.0.3
• react-useinterval ^1.0.2
• @babel/core ^7.23.9
• @babel/preset-react ^7.23.3
• @commitlint/cli ^19.0.0
• @commitlint/config-conventional ^19.0.0
• @dooboo/eslint-config-react-native ^1.4.2
• @jest/types ^29.6.3
• @react-native-community/datetimepicker 8.0.0
• @react-native-community/slider 4.4.2
• @storybook/addon-docs ^7.6.13
• @storybook/addon-essentials ^7.6.13
• @storybook/addon-links ^7.6.13
• @storybook/addon-ondevice-actions ^7.6.11
• @storybook/addon-ondevice-backgrounds ^7.6.11
• @storybook/addon-ondevice-controls ^7.6.11
• @storybook/addon-ondevice-notes ^7.6.11
• @storybook/addon-react-native-web ^0.0.22
• @storybook/addons ^7.6.12
• @storybook/preset-typescript ^3.0.0
• @storybook/react ^7.6.10
• @storybook/react-native ^7.6.11
• @storybook/react-webpack5 ^7.6.10
• @testing-library/jest-native ^5.4.3
• @testing-library/react-hooks ^8.0.1
• @testing-library/react-native ^12.4.3
• @types/jest ^29.5.11
• @types/jest-plugin-context ^2.9.7
• @types/node ^20.11.15
• @types/react-responsive ^8.0.8
• @types/react-test-renderer ^18.0.7
• babel-loader ^9.1.3
• babel-plugin-react-docgen-typescript ^1.5.1
• babel-plugin-react-native-web ^0.19.10
• babel-preset-expo ^9.5.2
• babel-preset-react-app ^10.0.1
• commitlint-plugin-function-rules ^4.0.0
• cross-env ^7.0.3
• eslint ^8.56.0
• eslint-plugin-storybook ^0.6.15
• gh-pages ^6.1.1
• givens ^1.3.9
• husky ^9.0.9
• jest ^29.7.0
• jest-expo ^49.0.0
• jest-plugin-context ^2.9.0
• lerna ^8.0.2
• prettier ^3.2.4
• react-test-renderer ^18.2.0
• storybook ^7.6.10
• storybook-dark-mode ^4.0.0
• ts-jest ^29.1.2
• ts-node ^10.9.2
• react-docgen-typescript 2.2.2
• react-docgen-typescript 2.2.2
• react-docgen-typescript 2.2.2

packages/CalendarCarousel/package.json

• date-fns ^2.30.0
• dooboolab-welcome ^1.3.2
• @emotion/native ^11.0.0
• @emotion/react ^11.4.1
• @emotion/native >=11
• @emotion/react >=11
• react >=16.9
• date-fns *

packages/GiftedChat/package.json

• dooboolab-welcome ^1.3.2
• @emotion/native ^11.0.0
• @emotion/react ^11.4.1
• react >=16.9
• @emotion/react >=11
• @emotion/native >=11

packages/PinchZoom/package.json

• dooboolab-welcome ^1.3.2
• @emotion/native ^11.0.0
• @emotion/react ^11.10.4
• react >=16.9
• @emotion/react >=11
• @emotion/native >=11

packages/theme/package.json

• @expo/match-media ^0.4.0
• react-responsive ^10.0.0
• @emotion/native ^11.11.0
• @emotion/react ^11.11.1
• @emotion/native >=11
• @emotion/react >=11
• react >=16.9
• @expo/match-media >=0.4.0
• react-responsive >=9.0.0

---

• Check this box to trigger a request for Renovate to run again on this repository

[Calendar] suggestion with Input Box.

Why don't we improve the calendar components for use with the input box?
When you touch the input box area, the calendar is displayed, and when you select a date, the corresponding date is entered in the input box.
It seems to be used a lot in this way.

I referred to airbnb's react-dates library

The CalendarCarousel distributed with npm is just a text component.

Is your feature request related to a problem? Please describe.
The @dooboo-ui/calendar-carousel component received from npm is returning only text component.

Describe the solution you'd like
I want to use the same calendar component as in the following example.

Describe alternatives you've considered
I think it is necessary to distribute the separate calendar component in the packages folder to npm.

[New feature] Progress bar development proposal

Is your feature request related to a problem? Please describe.

• I suggest developing a progress bar.
• It will be useful for many people.

Describe the solution you'd like
The options provided are as follows.

• Choose a type(circle or rectangle).
• Add explanation. (ex. percent, etc)
• Change the color

Additional context

Provide good samples for each component

• This project is lack of good samples.
• Providing samples makes newcomers understand components easily.
• Also, some advance samples might help develop and maintain components as mentioned here.
• If docs include something like Codesandbox or Snack, It will be awesome.

Not working Storybook on localhost

Describe the bug
blank page in browser and error log on console after run script yarn web

To Reproduce

1. Run script yarn web
2. Check the browser

Expected behavior
have to show the storybook page like a github-pages

Screenshots

Desktop (please complete the following information):

• OS: MacOS
• Browser: chrome
• Version: 92

Smartphone (please complete the following information):

• Device: none
• OS: none
• Browser none
• Version none

Additional context
Storybook in docs directory is no problem

installation guide need to be described at Getting Started docs

Is your feature request related to a problem? Please describe.

currently, there is no installation guide in Getting Started.
It's tiny doc, but necessary to users who are not familiar with development or this library.
and, contributing guide need to move from Getting Started to Contributing.

Describe the solution you'd like

move contributing section from Getting Started to Contributing.
add installation guide at Getting Started.

Additional context

If maintainer allow, i will do this documentation!

[Checkbox, SnackbarDefault] missing key prop

Describe the bug
map() should have its own key prop, but the key prop is missing or incorrectly represented.
As a result, the following warning appears.

Warning: Each child in a list should have a unique "key" prop.

To Reproduce
Steps to reproduce the behavior:

1. Install package after dooboo-ui clone
2. Run emulator after npm start
3. Click on the component. In particular, checkboxes and snackbars
4. See warning box

Expected behavior
No more warning boxes, and users can use and manage their data well with key prop

Screenshots

Smartphone (please complete the following information):

• Device: iPhone 12 Pro Max
• OS: iOS 14.5

[FR] Roadmap for next UI components

• Fixed Typography definition
• Rating
• Select
• Chip

Feature request for [AlertDialog]

Is your feature request related to a problem? Please describe.
It'd be good to have dooboo-ui's own AlertDialog or we should use the non fancy default dialog.

Describe the solution you'd like

Additional context
Above can be implemented in @dooboo-ui/alert-dialog as a seperate package because I think we might need react-native-modalbox.

Limitations of border calculation in [ButtonGroup]

Currently, ButtonGroup's default flex-direction is row. And border calculation is done base on it.

But, If I change it to column, It breaks.

Possible Solution: Enhance border calculation logic.

[Tabs] Implement tab components

Material Design Tabs Component
Tabs components are commonly used. It will be useful for rendering other screens when selecting tabs.

I think it would be good to develop it so that we can set the number of tabs. I think it would be good to make a component with default tabs.

Invalid prop type color supplied to startElement In [Button]

Describe the bug
When I add Image component directly into startElement, An error occurred like below.

  Warning: Failed prop type: Invalid props.style key `color` supplied to `Image`.
  Bad object: {
    "color": "#FFF"
  }

I think that cloneElement in this line makes a problem. Since color prop is not supported in <Image/>.

To Reproduce
Steps to reproduce the behavior:

Add <Image/> component directly into startElement in [Button]`

<Button
  startElement={<Image source={IC_MASK} />}
  text={getString('LOGIN')}
/>

Additional context

To fix this problem temporality, Wrap Image component with View.

<Button
  startElement={
    <View>
       <Image source={IC_MASK} />
    </View>
   }
  loading={isLoggingIn}
  text={getString('LOGIN')}
/>

Even if the app is set to dark mode in iOS, there is a problem that the dark mode theme does not apply when switching to the background.

Describe the bug
Even if the app is set to dark mode in iOS, there is a problem that the dark mode theme does not apply when switching to the background.

In the past, I have made full requests on this issue.
Fix the dark mode release from iOS background

I thought I solved this problem at that time, but the frequency of occurrence decreased, but this problem still occurs.
The same problem occurs randomly.
expo/expo#10815 (comment)

This problem is very difficult to solve because it doesn't always happen when you return to the app from the background.

The issue appears to be a bug occurring in iOS and is also registered as an issue in the react-native repository.
facebook/react-native#28525

It is occurring over iOS 13.
facebook/react-native#28525 (comment)
facebook/react-native#28525 (comment)

I tried the following methods as a solution, but they were not solved.

import { Appearance, ColorSchemeName } from 'react-native';
import { useEffect, useRef, useState } from 'react';

export default function useColorScheme(delay = 500): NonNullable<ColorSchemeName> {
  const [colorScheme, setColorScheme] = useState(Appearance.getColorScheme());

  let timeout = useRef<NodeJS.Timeout | null>(null).current;

  useEffect(() => {
    Appearance.addChangeListener(onColorSchemeChange);

    return () => {
      resetCurrentTimeout();
      Appearance.removeChangeListener(onColorSchemeChange);
    };
  }, []);

  function onColorSchemeChange(preferences: Appearance.AppearancePreferences) {
    resetCurrentTimeout();

    timeout = setTimeout(() => {
      setColorScheme(preferences.colorScheme);   // <-- the preferences.colorScheme is light.
    }, delay);
  }

  function resetCurrentTimeout() {
    if (timeout) {
      clearTimeout(timeout);
    }
  }

  return colorScheme as NonNullable<ColorSchemeName>;
}

or

 const initAppearanceListener = () => {
    const listener: Appearance.AppearanceListener = ({ colorScheme } /* <-- ignore */) => {
      setColorScheme(Appearance.getColorScheme());
    };
    Appearance.addChangeListener(listener);
    return () => Appearance.removeChangeListener(listener);
  };

---

To Reproduce
Steps to reproduce the behavior:

1. Set the iOS device to dark mode.
2. Turn on the app that applied the theme of doboo-ui.
3. Switch to the background.
4. I'm coming back to the app.

---

Expected behavior
The dark theme should be maintained when returning the app from the background to the foreground.

---

Screenshots

140264579-51a3fc65-01ab-4df6-adc4-52ac95b3cdba.mov

---

Smartphone (please complete the following information):

• Device: iPhone
• OS: iOS 14.8.1
• Version: 0.1.48

---

Additional context
N/A