Skip to content

Text text-xl cutting text and with an odd behaviour (only for android) #3014

@verissimor

Description

@verissimor

Description

Because it cut parts of the text with an odd behaviour.

CodeSandbox/Snack link

not informed

Steps to reproduce

Failing to render the text "AI Interview Buddy".

  1. Create a text <Text size="3xl" className="font-extrabold text-orange-500 mb-2">AI Interview Buddy</Text>
  2. See the system is cutting the word buddy
  3. Change the text to "AI Interview Buddy1" and it works fine.

Obs.: Web and Ios works just fine.

More details:
The code statement:

import { Box } from "@/components/ui/box";
import { Text } from "@/components/ui/text";

export default function TailWindCss() {
  return (
    <Box className="flex-1 items-center justify-center bg-white">
      <Text className="text-xl font-bold text-blue-500">Welcome to Nativewind x2!</Text>
      <Text size="3xl" className="font-extrabold text-orange-500 mb-2">AI Interview Buddy</Text>
    </Box>
  );
}

Renders as:
Image


Just adding a "1" at the end of the text, making it "AI Interview Buddy1", it works:

export default function TailWindCss() {
  return (
    <Box className="flex-1 items-center justify-center bg-white">
      <Text className="text-xl font-bold text-blue-500">Welcome to Nativewind x2!</Text>
      <Text size="3xl" className="font-extrabold text-orange-500 mb-2">AI Interview Buddy1</Text>
    </Box>
  );
}
Image

I tried removing font-extrabold and adding bold, it worked for that size, however, failed for xl:

<Text size="xl" bold className="text-orange-500 mb-2">AI Interview Buddy</Text>
Image

gluestack-ui Version

v2

Platform

  • Expo
  • React Native CLI
  • Next
  • Web
  • Android
  • iOS

Other Platform

No response

Additional Information

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions