How do I un-constrain an absolutely positioned element's width so that it may grow beyond the parent

Why are absolutely positioned elements in React-Native still relative to the parent with their width? If I use a text with a flairText style as I’ve written in my example the text inside will still wrap if it would exceed the height of the parent it has been absolutely positioned from. How can I un-constrain the flairText in such a way that its max-width would not be constrained by the parent it has been absolutely positioned from?

My main component:

import React, { FC } from 'react';
import { Text } from 'react-native';
import { barItemFlairStyles } from './styles/bar-item-flair';

interface BarGraphItemFlairProps {
  displayedValue: number;
  maxDisplayedValue?: number;
}

export const BarItemFlair: FC<BarGraphItemFlairProps> = ({
  displayedValue,
  maxDisplayedValue
}) => {
  const ownStyles = barItemFlairStyles();

  const displayedClampedValue = displayedValue;

  return <Text style={ownStyles.flairText}>{displayedClampedValue}</Text>;
};

Its style, in another file:

import { StyleSheet, TextStyle } from 'react-native';

export const barItemFlairStyles = () =>
  StyleSheet.create({
    flairText: {
      position: 'absolute',
      top: -35,
      textAlign: 'center',
      backgroundColor: 'blue',
    } as TextStyle,
  });

I’d expect the absolutely positioned element to be able to grow beyond the parent if left and right are undefined

Explicitly setting left and right to undefined doesn’t work. numOfLines={1} doesn’t work as there is an ellipsis and the text is still not visible beyond the parent. Using flexShrink and things like that did not work as well. Setting flex to 1 did not work.

You need to sign in to view this answers