Как исправить странное поведение значка, завернутого в TouchableOpacity?

У меня есть MapView, внутри которого у меня есть фиксированный рынок, на котором пользователь может перетаскивать карту и устанавливать текущее местоположение, кнопка для сохранения изменений и значок, завернутый в сенсорную непрозрачность, для установки текущего местоположения. Моя проблема в том, что иногда значок внутри обертки TouchableOpacity появляется в правом верхнем углу.

код для MapView

        <Modal
          animationType = "slide"
          transparent = {false}
          visible = {modalVisible}
          onRequestClose = {() => { }}
        >
          <MapView
            style = {styles.map}
            onRegionChangeComplete = {this.onRegionChange}
            initialRegion = {region || initialCoordinates}
            ref = {(el) => { this.mapViewModal = el }}
          >
            <View pointerEvents = "none" style = {[styles.markerFixed, { marginBottom: 52 }]}>
              <Ionicons style = {styles.marker} pointerEvents = "none" name = "ios-pin" size = {72} />
            </View>
            <TouchableOpacity onPress = {this.setMapCurrentLocation} style = {styles.arrowWrapper}>
              <FontAwesome name = "location-arrow" style = {styles.locationArrow} size = {42} />
            </TouchableOpacity>
          </MapView>
          <View style = {styles.mapButtonWrapper}>
            <RkButton
              style = {styles.mapButton}
              onPress = {this.handleAdjustClick}
            >
              {i18n.t('Adjust')}
            </RkButton>
          </View>
        </Modal>

стили:

 arrowWrapper: {
    position: 'absolute',
    backgroundColor: 'white',
    borderRadius: 100,
    textAlign: 'center',
    width: 50,
    height: 50,
    padding: 5,
    right: 10,
    bottom: 75,
    justifyContent: 'flex-end',
    alignItems: 'flex-end'
  },
  locationArrow: {
    color: primaryColor,
    alignSelf: 'center'
  },

Кто-нибудь знает, как это исправить?