drawing a line in react-native-arkit

ARLine

// @flow

import { ARKit } from 'react-native-arkit'
import React, { Component } from 'react'
import type { Vector3 } from '../../../types'
import { center, diff, distance, add } from '../../../libs/math/vectorUtils'

type Props = {
  from: Vector3,
  to: Vector3,
  color: string,
  width: number,
}

const eulerAnglesCylinder = (a: Vector3, b: Vector3): Vector3 => {
  const w = diff(a, b)
  const h = Math.hypot(w.x, w.z)
  return {
    x: Math.atan2(h, w.y),
    y: Math.atan2(w.x, w.z),
    z: 0,
  }
}

// offsets yaw by +/- 2π if needed so that it doesn't flip from π to -π
const deltaWithOffset = (next: Vector3, prev: Vector3): Vector3 => {
  const c = Math.PI * 2
  const dY = (next.y + Math.PI) % c - (prev.y + Math.PI) % c
  const shouldOffset = Math.abs(dY) > c - 1 && Math.abs(dY) < c + 1

  return {
    x: next.x - prev.x,
    y: dY + (shouldOffset ? -Math.sign(dY) * c : 0),
    z: 0,
  }
}

const ARLine = class extends Component<Props> {
  eulerAngles = {
    x: 0,
    y: 0,
    z: 0,
  }
  render() {
    const { from, to, color, width = 0.02 } = this.props
    const nextEulerAngles = eulerAnglesCylinder(from, to)
    const delta = deltaWithOffset(nextEulerAngles, this.eulerAngles)

    this.eulerAngles = add(this.eulerAngles, delta)

    return (
      <ARKit.Cylinder
        castsShadow={false}
        position={center(from, to)}
        transition={{
          duration: 0.1,
        }}
        eulerAngles={this.eulerAngles}
        shape={{
          height: distance(from, to),
          radius: width / 2,
        }}
        material={{
          lightingModel: ARKit.LightingModel.Constant,
          color,
        }}
      />
    )
  }
}

export default ARLine