diff --git a/src/lib/addons/themes/colors/patches/background.tsx b/src/lib/addons/themes/colors/patches/background.tsx index ee62986..63d4e0f 100644 --- a/src/lib/addons/themes/colors/patches/background.tsx +++ b/src/lib/addons/themes/colors/patches/background.tsx @@ -3,29 +3,35 @@ import { _colorRef } from "@lib/addons/themes/colors/updater"; import { after } from "@lib/api/patcher"; import { useObservable } from "@lib/api/storage"; import { findInReactTree } from "@lib/utils"; -import { lazyDestructure } from "@lib/utils/lazy"; -import { findByNameLazy, findByProps } from "@metro"; +import { findByFilePathLazy } from "@metro"; import chroma from "chroma-js"; -import { ImageBackground } from "react-native"; +import { ImageBackground, StyleSheet } from "react-native"; -const MessagesWrapperConnected = findByNameLazy("MessagesWrapperConnected", false); -const { MessagesWrapper } = lazyDestructure(() => findByProps("MessagesWrapper")); +const Messages = findByFilePathLazy("components_native/chat/Messages.tsx", true); + +function ThemeBackground({ children }: { children: React.ReactNode }) { + useObservable([colorsPref]); + + if (!_colorRef.current + || colorsPref.customBackground === "hidden" + || !_colorRef.current.background?.url + || _colorRef.current.background?.blur && (typeof _colorRef.current.background?.blur !== "number") + ){ + return children; + } + + return + {children} + ; +} export default function patchChatBackground() { const patches = [ - after("default", MessagesWrapperConnected, (_, ret) => { - useObservable([colorsPref]); - if (!_colorRef.current || !_colorRef.current.background?.url || colorsPref.customBackground === "hidden") return ret; - - return - {ret} - ; - }), - after("render", MessagesWrapper.prototype, (_, ret) => { + after("render", Messages, (_, ret) => { if (!_colorRef.current || !_colorRef.current.background?.url) return; const messagesComponent = findInReactTree( ret, @@ -33,17 +39,20 @@ export default function patchChatBackground() { ); if (messagesComponent) { + const flattened = StyleSheet.flatten(messagesComponent.props.style); const backgroundColor = chroma( - messagesComponent.props.style.backgroundColor || "black" + flattened.backgroundColor || "black" ).alpha( 1 - (_colorRef.current.background?.opacity ?? 1) - ); + ).hex(); - messagesComponent.props.style = [ + messagesComponent.props.style = StyleSheet.flatten([ messagesComponent.props.style, { backgroundColor } - ]; + ]); } + + return {ret}; }) ];