Page MenuHomePhabricator
Differential D5605

[native] Deprecate react-native-dark-mode
ClosedPublic
Actions

Authored by ashoat on Nov 10 2022, 1:02 PM.
Tags
None
Referenced Files
Unknown Object (File)
Wed, Mar 26, 3:11 AM
Unknown Object (File)
Mon, Mar 17, 8:39 AM
Unknown Object (File)
Feb 22 2025, 9:53 PM
Unknown Object (File)
Feb 17 2025, 3:37 PM
Unknown Object (File)
Feb 17 2025, 3:37 PM
Unknown Object (File)
Feb 17 2025, 3:36 PM
Unknown Object (File)
Feb 17 2025, 3:33 PM
Unknown Object (File)
Feb 12 2025, 11:40 AM
View All Files
Subscribers
• abosh

Details

Reviewers
atul
tomek
bartek
Commits
rCOMM53caefb0eeeb: [native] Deprecate react-native-dark-mode
Summary

I'm working on ENG-614 to update React Native. The latest version of react-native-dark-mode had issues building on Android, and support for this functionality was introduced into the React Native core a while back anyways.

This diff deprecates react-native-dark-mode in favor of using the built-in Appearance module in React Native.

Test Plan

I tested this diff on the latest master and deployed it to my iOS device. I then set the iOS device to defer to the OS for dark mode, and swapped the OS settings and confirmed the app also swapped its setting

Diff Detail

Repository
rCOMM Comm
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Revision Contents
Changeset List

PathSize
native/
ios/
6 lines
1 line
themes/
29 lines
24 lines

Diff 18352

View Options

native/ios/Podfile.lock

Show All 10 Lines
div.messageActionContainer { div.messageActionContainer {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: var(--message-action-tooltip-bg); background-color: var(--message-action-tooltip-bg);
border-radius: 8px; border-radius: 8px;
width: fit-content; width: fit-content;
box-shadow: var(--message-action-tooltip-bg) 0 2px 8px;
} }
div.messageActionButtons { div.messageActionButtons {
display: flex; display: flex;
font-size: 16px; font-size: 16px;
} }
div.messageActionButtons svg { div.messageActionButtons svg {
padding: 10px 6px 6px; padding: 10px 6px 6px;
Show All 17 Linesdiv.messageTooltipLabel {
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: var(--message-action-tooltip-bg); background-color: var(--message-action-tooltip-bg);
color: var(--tool-tip-color); color: var(--tool-tip-color);
border-radius: 8px; border-radius: 8px;
overflow: auto; overflow: auto;
white-space: nowrap; white-space: nowrap;
box-shadow: var(--message-action-tooltip-bg) 0 2px 8px;
} }
div.leftTooltipAlign { div.leftTooltipAlign {
align-items: flex-start; align-items: flex-start;
} }
div.centerTooltipAlign { div.centerTooltipAlign {
align-items: center; align-items: center;
Show All 10 Lines
View Options

native/package.json

Show All 10 Lines
div.messageActionContainer { div.messageActionContainer {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: var(--message-action-tooltip-bg); background-color: var(--message-action-tooltip-bg);
border-radius: 8px; border-radius: 8px;
width: fit-content; width: fit-content;
box-shadow: var(--message-action-tooltip-bg) 0 2px 8px;
} }
div.messageActionButtons { div.messageActionButtons {
display: flex; display: flex;
font-size: 16px; font-size: 16px;
} }
div.messageActionButtons svg { div.messageActionButtons svg {
padding: 10px 6px 6px; padding: 10px 6px 6px;
Show All 17 Linesdiv.messageTooltipLabel {
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: var(--message-action-tooltip-bg); background-color: var(--message-action-tooltip-bg);
color: var(--tool-tip-color); color: var(--tool-tip-color);
border-radius: 8px; border-radius: 8px;
overflow: auto; overflow: auto;
white-space: nowrap; white-space: nowrap;
box-shadow: var(--message-action-tooltip-bg) 0 2px 8px;
} }
div.leftTooltipAlign { div.leftTooltipAlign {
align-items: flex-start; align-items: flex-start;
} }
div.centerTooltipAlign { div.centerTooltipAlign {
align-items: center; align-items: center;
Show All 10 Lines
View Options

native/themes/theme-handler.react.js

Show All 10 Lines
div.messageActionContainer { div.messageActionContainer {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: var(--message-action-tooltip-bg); background-color: var(--message-action-tooltip-bg);
border-radius: 8px; border-radius: 8px;
width: fit-content; width: fit-content;
box-shadow: var(--message-action-tooltip-bg) 0 2px 8px;
} }
div.messageActionButtons { div.messageActionButtons {
display: flex; display: flex;
font-size: 16px; font-size: 16px;
} }
div.messageActionButtons svg { div.messageActionButtons svg {
padding: 10px 6px 6px; padding: 10px 6px 6px;
Show All 17 Linesdiv.messageTooltipLabel {
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: var(--message-action-tooltip-bg); background-color: var(--message-action-tooltip-bg);
color: var(--tool-tip-color); color: var(--tool-tip-color);
border-radius: 8px; border-radius: 8px;
overflow: auto; overflow: auto;
white-space: nowrap; white-space: nowrap;
box-shadow: var(--message-action-tooltip-bg) 0 2px 8px;
} }
div.leftTooltipAlign { div.leftTooltipAlign {
align-items: flex-start; align-items: flex-start;
} }
div.centerTooltipAlign { div.centerTooltipAlign {
align-items: center; align-items: center;
Show All 10 Lines
View Options

yarn.lock

Show All 10 Lines
div.messageActionContainer { div.messageActionContainer {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: var(--message-action-tooltip-bg); background-color: var(--message-action-tooltip-bg);
border-radius: 8px; border-radius: 8px;
width: fit-content; width: fit-content;
box-shadow: var(--message-action-tooltip-bg) 0 2px 8px;
} }
div.messageActionButtons { div.messageActionButtons {
display: flex; display: flex;
font-size: 16px; font-size: 16px;
} }
div.messageActionButtons svg { div.messageActionButtons svg {
padding: 10px 6px 6px; padding: 10px 6px 6px;
Show All 17 Linesdiv.messageTooltipLabel {
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: var(--message-action-tooltip-bg); background-color: var(--message-action-tooltip-bg);
color: var(--tool-tip-color); color: var(--tool-tip-color);
border-radius: 8px; border-radius: 8px;
overflow: auto; overflow: auto;
white-space: nowrap; white-space: nowrap;
box-shadow: var(--message-action-tooltip-bg) 0 2px 8px;
} }
div.leftTooltipAlign { div.leftTooltipAlign {
align-items: flex-start; align-items: flex-start;
} }
div.centerTooltipAlign { div.centerTooltipAlign {
align-items: center; align-items: center;
Show All 10 Lines