Wrap error messages in Layout.Center (#7655)

* Added Portal to ErrorMessage to stack it on top of the view

* Changing Portal solution for Layout.Center according to PR suggestion
This commit is contained in:
André Fernandes
2025-02-05 18:12:50 +00:00
committed by GitHub
parent 9433975984
commit 856c799065
+7 -1
View File
@@ -14,6 +14,7 @@ import {useLingui} from '@lingui/react'
import {usePalette} from '#/lib/hooks/usePalette' import {usePalette} from '#/lib/hooks/usePalette'
import {useTheme} from '#/lib/ThemeContext' import {useTheme} from '#/lib/ThemeContext'
import * as Layout from '#/components/Layout'
import {Text} from '../text/Text' import {Text} from '../text/Text'
export function ErrorMessage({ export function ErrorMessage({
@@ -31,9 +32,13 @@ export function ErrorMessage({
const pal = usePalette('error') const pal = usePalette('error')
const {_} = useLingui() const {_} = useLingui()
return ( return (
<Layout.Center>
<View testID="errorMessageView" style={[styles.outer, pal.view, style]}> <View testID="errorMessageView" style={[styles.outer, pal.view, style]}>
<View <View
style={[styles.errorIcon, {backgroundColor: theme.palette.error.icon}]}> style={[
styles.errorIcon,
{backgroundColor: theme.palette.error.icon},
]}>
<FontAwesomeIcon <FontAwesomeIcon
icon="exclamation" icon="exclamation"
style={pal.text as FontAwesomeIconStyle} style={pal.text as FontAwesomeIconStyle}
@@ -64,6 +69,7 @@ export function ErrorMessage({
</TouchableOpacity> </TouchableOpacity>
)} )}
</View> </View>
</Layout.Center>
) )
} }