fix: Long user names affect position of QR code

Long user names affect position of QR code Signed-off-by: Iuri Pereira <iuricmp@gmail.com> fix #4391
berty · Aug 6, 2023 · 641fcca · 641fcca
1 parent 09f4cc6
commit 641fcca
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 8 deletions.
diff --git a/js/packages/screens/chat/Share/Share.tsx b/js/packages/screens/chat/Share/Share.tsx
@@ -112,24 +112,36 @@ const ScanBody: FC<{ visible: boolean }> = ({ visible = true }) => {
 }
 
 const ShareQr: FC = () => {
-	const { margin } = useStyles()
+	const { margin, flex } = useStyles()
 	const { windowWidth, windowHeight, scaleSize } = useAppDimensions()
 	const account = useAccount()
 	const qrCodeSize = Math.min(windowHeight, windowWidth) * 0.45
 
 	return (
-		<View>
+		<View
+			style={[
+				{
+					alignItems: 'center',
+					justifyContent: 'center',
+				},
+			]}
+		>
 			<View
 				style={[
+					flex.align.center,
+					flex.justify.center,
+					flex.direction.row,
 					margin.top.big,
 					margin.bottom.small,
-					{ alignItems: 'center', flexDirection: 'row', justifyContent: 'center' },
+					margin.horizontal.big,
 				]}
 			>
 				<View style={[margin.right.small]}>
 					<AccountAvatar size={24 * scaleSize} />
 				</View>
-				<UnifiedText>{account.displayName || ''}</UnifiedText>
+				<UnifiedText numberOfLines={2} ellipsizeMode='tail'>
+					{account.displayName || ''}
+				</UnifiedText>
 			</View>
 			<QrCode size={qrCodeSize} />
 		</View>

diff --git a/js/packages/screens/chat/Share/__snapshots__/Share.test.tsx.snap b/js/packages/screens/chat/Share/__snapshots__/Share.test.tsx.snap