Em reagir nativo, tenho:

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

com estes estilos:

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

Este é o efeito que recebo:

Este é o efeito que eu quero:

No primeiro exemplo, o espaçamento entre os itens é igual.

No segundo exemplo, cada item é justificado de maneira diferente. O primeiro item é justificado à esquerda. O segundo item é justificado por centro. O terceiro, justificado.

Essa questão é semelhante, mas parece que o reagir nativo não suportamargin: 'auto'. Além disso, as outras respostas só funcionam se você se preocupa apenas com a justificação esquerda e direita, mas ninguém realmente lida com a justificação central sem margem automática.

Eu estou tentando fazer uma barra de navegação em reagir nativo. A versão do vanilla ios é assim:

Como faço algo semelhante? Estou preocupado principalmente com a centralização.