score:12

Accepted answer

I will make use of Flex here. Please note that i used borderWidth in the below example only for reference to show how it looks.

I will have flexDirection as row and i will give a flex: 1 to all the views inside

App.js

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

class App extends Component{
  render(){
    return(
      <View>
        <View style={styles.navBar}>
          <View style={styles.itemStyle}>
            <Text style={{fontSize: 18, color: 'blue'}}>Resumes</Text>
          </View>
          <View style={styles.itemStyle}>
            <Text style={{fontSize: 20, color: 'blue'}}>Settings</Text>
          </View>
          <View style={styles.itemStyle}></View>
        </View>

      </View>
    )
  }
}

const styles = {
  navBar: {
    marginTop: 42,
    height: 36,
    flexDirection: 'row',
    alignItems: 'center'
  },
  itemStyle: {
    flex: 1,
    height: 36,
    alignItems: 'center',
    justifyContent: 'center',
    borderWidth: 1
  }
}

export default App;

You can play around in the inside views. Move the buttonBack inside one of the child views.

Comp

score:3

I can think of two ways to accomplish this, but neither seems quite ideal.

The first way is using a transparent element with fixed width and justifyContent: 'space-between', as you indicated:

<View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
  <Text style={{width: 80}}>left</Text>
  <Text>center</Text>
  <Text style={{width: 80, color: 'transparent'}}>right</Text>
</View>

Setting a fixed width to the elements on each side will cause the middle element to center horizontally.

An alternative approach is using absolute styling. Using percentages with left and right requires React Native >= 0.42.

<View>
  <Text>Left</Text>
  <Text style={{position: 'absolute', width: 50, left: '50%', marginLeft: -25}}>Center</Text>
</View>

Related Query

More Query from same tag