CODEWITHSUNDEEP
reactjsreact-nativeflexbox
Muirik
Muirik

Reputation: 6289

Alignment of elements in row of react native header

I have a header section in my react native app where I want - on one row - to display two bits of info, a back button icon, and some text. I am trying to figure out how to arrange these elements so that the back button icon aligns to the horizontal left of the full width of the line, while the text for the client name horizontally aligns at the center of that line. So that means on the right there will just be empty space.

The one way I've gotten this to work thus far feels a little hacky, as it involves creating a 3rd element, with the same proportions as the 1st one, and then just not declaring the name of the Feather icon element. In other words, this works because it aligns the center item between two items aligned to the left and right, even though with the right one, nothing is actually showing on the screen. Is there a less hacky way of doing this, that involves not adding a 3rd "invisible" element?

<View style={{ width: '100%', flexDirection: 'row', justifyContent: 'space-between' }}>
  <Feather
    name='chevron-left'
    size={24}
    onPress={() => props.navigation.goBack()}
    color={styles.colors.textInverse}
    style={{ justifySelf: 'flex-start', alignSelf: 'flex-start' }}
  />
  <Text style={{ color: '#fff', fontSize: 18, alignSelf: 'center', justifySelf: 'center' }}>
    {props?.client?.firstName} {props?.client?.lastName}
  </Text>
  <Feather
    name='' // Leave this blank
    style={{ justifySelf: 'flex-end', alignSelf: 'flex-end' }}
  />
</View>

Upvotes: 0

Views: 1021

Answers (1)

user18309290
user18309290

Reputation: 8300

Use paddingRight for Text to balance out the item on the left. Something like this:

<View style={{ width: '100%', flexDirection: 'row' }}>
  <Feather
    name='chevron-left'
    size={24}
...
  />
  <Text style={{ textAlign: 'center', flex: 1, paddingRight: 24 }}>
    ...
  </Text>
</View>

Upvotes: 4

Related Questions