gympass/yoga

[BUG] `textAlign` system property not working correctly on Native for the `<Text />` (and variations) components.

tcK1 opened this issue · 2 comments

tcK1 commented

Describe the bug
Adding the prop ta or textAlign does nothing.

To Reproduce
Steps to reproduce the behavior:

  1. Add the prop ta or textAlign to a <Text /> component.

Expected behavior
The property should be applied.

Screenshots
If applicable, add screenshots to help explain your problem.

<Text
  mt="small"
  mb="xlarge"
  ta="center"
>
  My text
</Text>

image

<Text
  mt="small"
  mb="xlarge"
  style={{
    textAlign: 'center',
  }}
>
  My text
</Text>

image

Smartphone (please complete the following information):

  • Device: iPhone 11
  • OS: iOS 14.5

Additional context

As you can see on the screenshots, other properties are working.

Working here

Full Code Android iOS
<View>
    <Box
      b="small"
      p="small"
      borderRadius="small"
      borderColor="feedback.success.dark"
      display="flex"
      flexDirection="column"
      alignItems="center"
      elevation="small"
      bgColor="white"
      width="200"
    >
      <Text 
        fw="bold" 
        border="small" 
        w="100%" 
        ta="right"
      >
        Making
      </Text>
      <Text>wellbeing</Text>
      <Text>universal</Text>
    </Box>
  </View>

Screenshot_1634137015

simulator_screenshot_D42B6B13-5E71-4CDE-99B2-8607040E087A

Hey @tcK1,

Hope you're doing well! 🌟
Just wanted to give you a heads-up that it seems like this issue has taken a bit of a nap and gone MIA. 😴 Since we're doing some cleanup, we're going to close it for now.

No worries though! If you think there's still life in it or if you've got more info to share, feel free to wake it up by reopening. Your input is always appreciated!