diff --git a/native/account/logged-out-modal.react.js b/native/account/logged-out-modal.react.js --- a/native/account/logged-out-modal.react.js +++ b/native/account/logged-out-modal.react.js @@ -217,6 +217,8 @@ LoggedOutModalRouteName, ); +const backgroundSource = { uri: splashBackgroundURI }; + const initialLogInState = { usernameInputText: null, passwordInputText: null, @@ -568,9 +570,6 @@ }); }, [rehydrateConcluded, loggedIn, cookie, dispatch]); - const splashStyle = useSelector(splashStyleSelector); - const styles = useStyles(unboundStyles); - const onPressSIWE = React.useCallback(() => { combinedSetMode('siwe'); }, [combinedSetMode]); @@ -605,6 +604,7 @@ navigate(RegistrationRouteName); }, [navigate]); + const styles = useStyles(unboundStyles); const panel = React.useMemo(() => { if (mode.curMode === 'log-in') { return ( @@ -807,22 +807,26 @@ ); }, [curModeIsSIWE, goBackToPrompt, nextModeIsPrompt]); - const backgroundSource = { uri: splashBackgroundURI }; - return ( - - - - - - {animatedContent} - {buttons} - - - {siwePanel} - + const splashStyle = useSelector(splashStyleSelector); + const backgroundStyle = React.useMemo( + () => [styles.modalBackground, splashStyle], + [styles.modalBackground, splashStyle], + ); + return React.useMemo( + () => ( + <> + + + + + {animatedContent} + {buttons} + + + {siwePanel} + + ), + [backgroundStyle, styles.container, animatedContent, buttons, siwePanel], ); }, );