Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

revert usage of InteractionManager in Modal #21865

Merged
merged 7 commits into from
Jul 6, 2023
Merged

revert usage of InteractionManager in Modal #21865

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
af7ba13
revert usage of InteractionManager in Modal
kushu7 Jun 29, 2023
36b206f
accept rgba and rgb also
kushu7 Jun 30, 2023
c4a2b33
Merge remote-tracking branch 'origin/main' into fix-regression-21833
kushu7 Jun 30, 2023
f8b4216
revert conversion of rgb to hex
kushu7 Jul 2, 2023
7aa75a8
Merge remote-tracking branch 'origin/main' into fix-regression-21833
kushu7 Jul 4, 2023
88af2c4
added new line
kushu7 Jul 5, 2023
74e1643
prettier
kushu7 Jul 5, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions src/components/Modal/index.web.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import React, {useState} from 'react';
import {InteractionManager} from 'react-native';
import withWindowDimensions from '../withWindowDimensions';
import BaseModal from './BaseModal';
import {propTypes, defaultProps} from './modalPropTypes';
Expand All @@ -16,7 +15,7 @@ function Modal(props) {
return;
}

InteractionManager.runAfterInteractions(() => StatusBar.setBackgroundColor(color));
StatusBar.setBackgroundColor(color);
Copy link
Contributor

Choose a reason for hiding this comment

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

Why is this revert needed? The console error seemed to be stemming from the convertRGBToHex function?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

There was race condition also with modal. to get correct current color of StatusBar. i reverted usage of InteractionManager

};

const hideModal = () => {
Expand Down
20 changes: 19 additions & 1 deletion src/styles/StyleUtils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -701,6 +701,24 @@ function convertRGBToUnitValues(red, green, blue) {
return [red / 255, green / 255, blue / 255];
}

/**
* Matches an RGBA or RGB color value and extracts the color components.
kushu7 marked this conversation as resolved.
Show resolved Hide resolved
*
* @param {string} color - The RGBA or RGB color value to match and extract components from.
* @returns {Array} An array containing the extracted color components [red, green, blue, alpha].
* Returns null if the input string does not match the pattern.
*/
function extractValuesFromRGB(color) {
const rgbaPattern = /rgba?\((?<r>[.\d]+)[, ]+(?<g>[.\d]+)[, ]+(?<b>[.\d]+)(?:\s?[,/]\s?(?<a>[.\d]+%?))?\)$/i;
const matchRGBA = color.match(rgbaPattern);
if (matchRGBA) {
const [, red, green, blue, alpha] = matchRGBA;
return [parseInt(red, 10), parseInt(green, 10), parseInt(blue, 10), alpha ? parseFloat(alpha) : 1];
}

return null;
}

/**
* Determines the theme color for a modal based on the app's background color,
* the modal's backdrop, and the backdrop's opacity.
Expand All @@ -711,7 +729,7 @@ function convertRGBToUnitValues(red, green, blue) {
function getThemeBackgroundColor(bgColor = themeColors.appBG) {
const backdropOpacity = variables.modalFullscreenBackdropOpacity;

const [backgroundRed, backgroundGreen, backgroundBlue] = hexadecimalToRGBArray(bgColor);
const [backgroundRed, backgroundGreen, backgroundBlue] = extractValuesFromRGB(bgColor) || hexadecimalToRGBArray(bgColor);
const [backdropRed, backdropGreen, backdropBlue] = hexadecimalToRGBArray(themeColors.modalBackdrop);
const normalizedBackdropRGB = convertRGBToUnitValues(backdropRed, backdropGreen, backdropBlue);
const normalizedBackgroundRGB = convertRGBToUnitValues(backgroundRed, backgroundGreen, backgroundBlue);
Expand Down