Is there a way to set an absolute positioned component's width based on the width of its flex-b-CodePudding

I'm trying to build this:

Right now I'm building this by doing all the text in a flex box and having two sibling absolutely positioned boxes with partial borders to make the lines, like this:

<ContainerView>
    <TextSection />
    <LeftFloat />
    <RightFloat />
</View>

This isn't great on different screen sizes, though, because I have to tell those border boxes how to tall and high to be. And the text takes up different heights/widths on different screen sizes so there is no one-size-fits-all value, even when it's a screen percentage, that works for the borders on all devices.

I tried doing something inline like this:

<Text>BECOME A SUBSCRIBER</Text><HorizontalLine />
<VerticalLine /> <BulletView /> <VerticalLine />
<HorizontalLine /><Text>Tap here to learn more ></Text>

but that was worse because the horizontal and vertical lines wouldn't join up nicely to form a corner. I could manipulate them with negative margins but the effect was different between Android and iOS.

Is there a better way to build this kind of border situation?

Or is there a way for these floating boxes to find the width of the "BECOME A SUBSCRIBER" and "Tap here to learn more" elements so they can set their widths accordingly?

CodePudding user response：

I think the View prop 'onLayout' would be helpful here. You can let the other container expand with flex, and then grab the dimensions of it. Afterwards you could calculate the size you want using screen dimensions and this layout data.

<View onLayout={e => e.nativeEvent.layout}