How to rotate and translate the Text 90 degree correctly in React Native?

I am trying to implement this layout

Here is my view code snippet

<View style={[{
    flexDirection: 'row',
    backgroundColor: 'white', 
    borderRadius: 8
}]}>

    <Text style={{
        color: 'white',
        backgroundColor: 'red',
        paddingStart: 12,
        paddingEnd: 12,
        transform: [
            { rotate: '-90deg' },
        ]

    }}>{`Sample Text`}</Text>

    <View >

        <Text>Right Content will be here</Text>
    </View>
</View>

Output

The problem of my current implementation are

The rotated view is not positioned at positioned
The container view's height is not affected with the rotated view's width or height

How can I fix it in a way it could adapt the font size accessibility settings?

Solution

Well with few research I've achieved my goal. Where I am manipulating the x, y position of text container based on the height and width of the rotated text

Solution

function MyComponent() {

    const [height, setHeight] = React.useState(0)
    const [width, setWidth] = React.useState(0)

    return (
        <View style={{ marginTop: 300 }}>


            <View style={[{
                flexDirection: 'row',
                backgroundColor: 'white',
                marginStart: 16,
                marginEnd: 16,
                borderRadius: 8,
                overflow: 'hidden',
                minHeight: width,
            }]}>

                <View style={{
                    backgroundColor: 'yellow',
                    transform: [
                        { translateX: -(width / 2 - height / 2) * 2 }
                    ]
                }}>
                    <Text
                        style={{
                            color: 'white',
                            backgroundColor: 'red',
                            paddingStart: 12,
                            paddingEnd: 12,
                            transform: [
                                { rotate: '-90deg' },
                                { translateY: (width / 2 - height / 2) },
                                { translateX: -(width / 2 - height / 2) }
                            ]

                        }}
                        onLayout={(e) => {
                            setHeight(e.nativeEvent.layout.height)
                            setWidth(e.nativeEvent.layout.width)
                        }}
                    >{`Sample Text`}</Text>
                </View>

                <View style={{
                    backgroundColor: 'yellow',
                    width: '100%',
                    justifyContent: 'center',
                    alignItems: 'center',
                    transform: [
                        { translateX: -(width / 2 - height / 2) * 2 }
                    ]
                }}>

                    <Text>Right Content will be here</Text>
                </View>
            </View>
        </ View>
    )
}