CODEWITHSUNDEEP
cssreact-nativeflexbox
dǝɥɔS ʇoıןןƎ
dǝɥɔS ʇoıןןƎ

Reputation: 1830

React Native flexbox rows aligning items

How can I get a layout like this without using a static width?

Layout

The text before the "•" should be aligned to the left, but the text after the "•" should all be inline with each other. To get it looking like that I've used a static width, but for obvious reasons, that's not so good.

Here's the React Native code:

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    margin: 2,
    borderColor: 'green',
    borderStyle: 'solid',
    borderWidth: 2,
  },
});

const RoleRow = ({ role }) => (
  <View style={styles.container}>
    <Text style={{ width: 55 }}>
      {role.name}
    </Text>
    <Text style={{ marginLeft: 5 }}>
      {` • ${role.person.name} ${role.person.lastName}`}
    </Text>
  </View>
);

Upvotes: 1

Views: 2403

Answers (3)

dǝɥɔS ʇoıןןƎ
dǝɥɔS ʇoıןןƎ

Reputation: 1830

Here's a simple React Native version of kriddy800's answer. Same thing, just formatted to better answer my question. Thanks kriddy800!

 <View style={{ flex: 1, flexDirection: 'row' }}>
  <View>
    <Text>
      Spaceship building
    </Text>
    <Text>
      Piano
    </Text>
  </View>
  <View style={{ flex: 1 }}>
    <Text style={{ marginLeft: 5 }}>
      • John F. Kennedy
    </Text>
    <Text style={{ marginLeft: 5 }}>
      • Francis Dunget
    </Text>
  </View>
</View>

Upvotes: 1

kriddy800
kriddy800

Reputation: 144

This might help. It might be a bit strange but you'll have to treat each item as a column instead of a row but here is a codepen

HTML

 <div class="cont">
      <div class="role-col">
        <div class="role">Small Role</div>
      </div>
      <div class="name-col">
        <div class="name">Small Name</div>
      </div>
    </div>

SCSS

.cont{
  width:400px;
  height:400px;
  background-color:green;
  display:flex;
  flex-direction:row;

  .role-col,.name-col{
    .role,.name{
      border-top:1px solid black;
      border-bottom:1px solid black;
      margin-top:8px;
    }
  }

  .role-col{
    display:flex;
    flex-direction:column;
    background-color:red;

    .role{
      border-left:1px solid black;
      margin-left:8px;
      padding-right:4px;
    }
  }

  .name-col{
    display:flex;
    flex:1;
    flex-direction:column;

    .name{
      border-right:1px solid black;
      margin-right:8px;
      padding-left:4px;
    }
  }
}

What this does is there must be an item in each column for the role and name. So if you have a name with no role or a role with no name you will have to add an empty item in the column so the css can size them correctly. If you have any questions please let me know

Upvotes: 2

Faruk Yazici
Faruk Yazici

Reputation: 2404

You should use flex:

const RoleRow = ({ role }) => (
  <View style={styles.container}>
    <Text style={{ flex: 1 }}>
      {role.name}
    </Text>
    <Text style={{ marginLeft: 5, flex: 3 }}>
      {` • ${role.person.name} ${role.person.lastName}`}
    </Text>
  </View>
);

That will give a 1-3 proportion to the Text areas.

Upvotes: 0

Related Questions