¿Cómo justificar (izquierda, derecha, centro) a cada niño independientemente?

En reaccionar nativo tengo:

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

con estos estilos:

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

Este es el efecto que obtengo:

Este es el efecto que quiero:

En el primer ejemplo, el espacio entre los elementos es igual.

En el segundo ejemplo, cada elemento se justifica de manera diferente. El primer elemento está justificado a la izquierda. El segundo elemento tiene justificación central. El tercero, justificado a la derecha.

Esta pregunta es similar, pero parece que reaccionar nativo no es compatiblemargin: 'auto'. Además, las otras respuestas solo funcionan si solo le importa la justificación izquierda y derecha, pero nadie realmente aborda la justificación central sin margen automático.

Estoy tratando de hacer una barra de navegación en reaccionar nativo. La versión ios de vainilla se ve así:

¿Cómo hago algo similar? Me preocupa principalmente el centrado.