AboveThumbComponent not centered

[Aleksandar Milchev]

I am really excited about the new package, looks great!

However, the text for the AboveThumbComponent is not centred with the thumb. Changing the alignment doesn't help as well.

Also, I am using the AboveThumbComponent because the BelowThumbComponent is still not added to version 2.2.0. I saw that you've added it to the source code, but unfortunately, it's not in the npm.

[ArjunPatidarRadix]

same issue

[Michael Blanchard]

@amilchew - Can you check for BelowThumbComponent in 2.3.0 from npm?

[Aleksandar Milchev]

Hey, thank you for adding BellowThumbComponent! Unfortunately, both of the components don't render centred text. I had to set the text to be centred manually, using right 8 for a single-digit number (might not work for bigger numbers).

[Daniel Lindsey]

For anyone else in the future, this worked for me to center above/below. I have some additional styling logic that accounts for the spacing for first and last item as well, as the strings I am using for myValueHere go outside the bounds of the component.

<View
      style={{
        right: "100%",
        width: "200%",
        alignItems: "center",
      }}
    >
      <Text>
        {myValueHere}
      </Text>
    </View>