react-native - React Native: 絶対配置ビューを左/右中央に揃えます

Question

親コンテナの任意の端にドッキングできる再利用可能なコンポーネントを構築したいので、参考として次の画像を参照してください

親コンテナの背後にレンダリングされるものがあるはずなので、ブロックにフレックスを使用することはできません

これまでのところ、左揃えのみを試しましたが、思い通りに機能しません

// styles.js
import { StyleSheet } from 'react-native'
import { COLOR, BORDER_RADIUS } from 'app/constants'

export default StyleSheet.create({
  container: {
    alignItems: 'center',
  },
  box: {
    borderWidth: 1,
    borderColor: COLOR.grey_cl,
    borderRadius: BORDER_RADIUS.normal,
    backgroundColor: 'red',
  },
  boxTopAligned: {},
  boxRightAligned: {},
  boxBottomAligned: {},
  containerLeftAligned: {
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    flex: 1,
    alignItems: 'stretch',
    justifyContent: 'center',
  },
  boxLeftAligned: {
    textAlign: 'center',
    left: 0,
    transform: [{ rotate: '90deg' }],
  },
})

JSX

<View style={[[styles.container, styles.containerLeftAligned]]}>
  <View
    style={[
      HELPER_STYLES.paddingNormal,
      HELPER_STYLES.center,
      styles.box,
      styles.boxLeftAligned,
    ]}
  >
    <Text>{props.text}</Text>
  </View>
</View>

これは機能しますが、私が望む方法とは異なります