diff --git a/packages/harmony/src/components/text/Text/constants.ts b/packages/harmony/src/components/text/Text/constants.ts index f5754ddc046..648baf49813 100644 --- a/packages/harmony/src/components/text/Text/constants.ts +++ b/packages/harmony/src/components/text/Text/constants.ts @@ -31,7 +31,7 @@ export const variantStylesMap = { }, label: { fontSize: { xs: '2xs', s: 'xs', m: 's', l: 'm', xl: 'xl' }, - lineHeight: { xs: 'xs', s: 'xs', m: 's', l: 's', xl: 'l' }, + lineHeight: { xs: 'xs', s: 's', m: 's', l: 'm', xl: 'l' }, fontWeight: { default: 'bold', strong: 'heavy' }, css: { textTransform: 'uppercase' as const, letterSpacing: 0.5 } }, diff --git a/packages/mobile/src/harmony-native/components/Text/Text.tsx b/packages/mobile/src/harmony-native/components/Text/Text.tsx index 5ff3d172bf2..d6cb480ab92 100644 --- a/packages/mobile/src/harmony-native/components/Text/Text.tsx +++ b/packages/mobile/src/harmony-native/components/Text/Text.tsx @@ -4,7 +4,7 @@ import { variantStylesMap } from '@audius/harmony/src/components/text' import type { BaseTextProps } from '@audius/harmony/src/components/text' import { css } from '@emotion/native' import type { TextProps as NativeTextProps, TextStyle } from 'react-native' -import { Text as TextBase } from 'react-native' +import { Platform, Text as TextBase } from 'react-native' import { useTheme } from '../../foundations/theme' @@ -34,6 +34,8 @@ export const Text = forwardRef((props, ref) => { const variantStyles = variant && variantStylesMap[variant] const t = theme.typography + const fontWeight = variantStyles?.fontWeight[strength] + const textStyles: TextStyle = css({ ...(variantStyles && { fontSize: t.size[variantStyles.fontSize[size]], @@ -43,7 +45,11 @@ export const Text = forwardRef((props, ref) => { }), ...(color && { color }), ...(shadow && t.shadow[shadow]), - textAlign + textAlign, + // Fixes demiBold text misalignment on iOS + ...(fontWeight === 'demiBold' && Platform.OS === 'ios' + ? { marginTop: 2 } + : {}) }) const isHeading = variant === 'display' || variant === 'heading'