Estou tentando criar uma legenda que criei para um mapa do Android no meu projeto nativo de reação. Estou com dificuldade para posicioná-lo corretamente. Ter que usar a propriedade absoluta com o contêiner de legenda me assustou.

Estilos

   container: {
    flex: 1
},
map: {
    position: 'absolute',
    top: 56,
    left: 0,
    right: 0,
    bottom: 0,
},
legendContainer: {
    position: 'absolute',
    left: 200,
    right: 0,
    bottom: 0,
    height: 65,
    width: 210,
    flex: 1,
    alignItems: 'center',
    flexDirection: 'column',
    justifyContent: 'center',
    backgroundColor: 'transparent'
},
legend: {
    top: 0,
    right: 0,
    height: 60,
    width: 180,
    flexDirection: 'row',
    resizeMode: 'cover'
}

Map.js

 <View style= { styles.container } >
        <Toolbar
            title={this.state.selectedTrip.tripName || this.state.selectedTripName}  />
        <MapView
            style={styles.map}
            region={this.state.region}
            >
        </MapView>
        <View style={styles.legendContainer}>
            <Image source={require('../../img/legend.png') } style={styles.legend}/>
        </View>
    </View >