React Native: Align Absolute positioned View to left/right center

Question

I want to build a reusable component which can be docked to any edge of the parent container, please refer the following image for reference

I can't use the flex for the blocks since there is supposed to be stuff rendered behind them in the parent container

I have only tried for the left aligned so far and it doesn't work the way I want it

// 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>

Which works but not exactly the way I want it

What is wrapping the View with `containerLeftAligned` styling — Ian Vasco, Jan 13 '20 at 14:13

score 1 · Answer 1 · answered Jan 15 '20 at 08:24

code

import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';

export default class Jojo extends React.Component {
  render() {
    return (
      <View style={{ flex: 1 }}>
        <View style={[[styles.container, styles.containerLeftAligned]]}>
          <View style={[styles.box, styles.boxLeftAligned]}>
            <Text>left</Text>
          </View>
        </View>

        <View style={[styles.box, styles.boxTopAligned]}>
          <Text>top</Text>
        </View>

        <View style={[[styles.container, styles.containerRightAligned]]}>
          <View style={[styles.box, styles.boxRightAligned]}>
            <Text>right</Text>
          </View>
        </View>

        <View style={[styles.box, styles.boxBottomAligned]}>
          <Text>bottom</Text>
        </View>
      </View>
    );
  }
}

styles.js

container: {
    alignItems: 'center',   },   box: {
    borderWidth: 1,
    borderColor: 'grey',
    borderRadius: 15,
    padding: 15,
    backgroundColor: 'red',
    alignSelf: 'center',   },   boxTopAligned: {
    position: 'absolute',
    top: 0,
    alignItems: 'stretch',   },   boxBottomAligned: {
    position: 'absolute',
    bottom: 0,
    alignItems: 'stretch',   },   containerLeftAligned: {
    position: 'absolute',
    left: 0,
    top: '50%',
    alignItems: 'stretch',   },   boxLeftAligned: {
    textAlign: 'center',
    left: 0,
    transform: [{ rotate: '90deg' }],   },   boxRightAligned: {
    textAlign: 'center',
    right: 0,
    transform: [{ rotate: '90deg' }],   },   containerRightAligned: {
    position: 'absolute',
    right: 0,
    top: '50%',
    alignItems: 'stretch',   },

and the output result

React Native: Align Absolute positioned View to left/right center

1 Answers1