How to justify (left, right, center) each child independently?

In react native I have:

<View style={styles.navBar}>
  <Text>{'<'}</Text>
    <Text style={styles.navBarTitle}>
      Fitness & Nutrition Tracking
    </Text>
  <Image source={icon} style={styles.icon}/>
</View>

with these styles:

{
    navBar: {
        height: 60,
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
    },
    navBarTitle: {
        textAlign: 'center',
    },
    icon: {
        height: 60,
        resizeMode: 'contain',
    },
}

This is the effect I get:

This is the effect I want:

In the first example, the spacing between items is equal.

In the second example, each item is justified differently. The first item is left-justified. The second item is center-justified. The third, right-justified.

This question is similar, but it looks like react native does not support margin: 'auto'. Furthermore, the other answers only work if you only care about left and right justification, but no one really addresses center justification without auto margin.

I am trying to make a navigation bar in react native. The vanilla ios version looks like this:

_{(source: apple.com)}

How do I do something similar? I'm mainly concerned with centering.