How to use the expo-three.Renderer function in expo-three

const trackingConfiguration = AR.TrackingConfigurations[key];
        // AR.setConfigurationAsync(trackingConfiguration);
        console.log(
          'isConfigurationAvailable:',
          key,
          AR.isConfigurationAvailable(trackingConfiguration)
        );
      });
    }

    try {
      AR.setWorldOriginAsync(new THREE.Matrix4().toArray());
    } catch (error) {
      console.warn('Error:setWorldOriginAsync: ', error);
    }
    this.renderer = new ExpoTHREE.Renderer({ gl, width, height, pixelRatio });
    this.scene = new THREE.Scene();
    this.scene.background = new ThreeAR.BackgroundTexture(this.renderer);

    /// AR Camera
    this.camera = new ThreeAR.Camera(width, height, 0.01, 1000);
    this.points = new ThreeAR.Points();
    this.scene.add(this.points);
    this.light = new ThreeAR.Light(0x222222);
    this.scene.add(this.light);
    this.planes = new ThreeAR.Planes();
    this.scene.add(this.planes);
  };

const onContextCreate = async (gl: ExpoWebGLRenderingContext & WebGLRenderingContext) => {
    if (props.onContextCreated) {
      // Allow customization of the GL Context
      // Useful for AR, VR and others
      await props.onContextCreated(gl)
    }

    if (props.shadowMap) {
      // https://github.com/expo/expo-three/issues/38
      gl.createRenderbuffer = () => ({})
    }

    const pixelRatio = PixelRatio.get()

    const renderer = new Renderer({
      gl,
      width: size!.width / pixelRatio,
      height: size!.height / pixelRatio,
      pixelRatio,
    })

    // Bind previous render method to Renderer
    const rendererRender = renderer.render.bind(renderer)
    renderer.render = (scene, camera) => {
      rendererRender(scene, camera)
      // End frame through the RN Bridge
      gl.endFrameEXP()
    }

    setRenderer(renderer)
  }

onContextCreate = async ({ gl, scale: pixelRatio, width, height }) => {
    AR.setPlaneDetection(AR.PlaneDetectionTypes.Horizontal);

    this.renderer = new ExpoTHREE.Renderer({ gl, width, height, pixelRatio });

    this.scene = new THREE.Scene();
    this.scene.background = new ThreeAR.BackgroundTexture(this.renderer);

    this.camera = new ThreeAR.Camera(width, height, 0.01, 1000);

    this.setupLine();

    this.magneticObject.add(new THREE.GridHelper(0.1, 5, 0xff0000, 0x0000ff));
    this.scene.add(this.magneticObject);
  };

onContextCreate = async (gl: GL.ExpoWebGLRenderingContext) => {
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(
      75,
      gl.drawingBufferWidth / gl.drawingBufferHeight,
      0.1,
      1000
    );

    const renderer = new Renderer({ gl });
    renderer.setSize(gl.drawingBufferWidth, gl.drawingBufferHeight);
    renderer.setClearColor(0xffffff, 0);

    const geometry = new THREE.BoxGeometry(1, 1, 1);
    const material = new THREE.MeshBasicMaterial({
      map: new TextureLoader().load(require('../../../assets/images/swmansion.png')),
    });
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    camera.position.z = 3;

    const animate = () => {
      this.rafID = requestAnimationFrame(animate);

      cube.rotation.x += 0.02;

commonSetup = ({ gl, scale: pixelRatio, width, height }) => {
    this.renderer = new ExpoTHREE.Renderer({
      gl,
      pixelRatio,
      width,
      height,
    });

    this.scene = new THREE.Scene();
    this.scene.background = new ThreeAR.BackgroundTexture(this.renderer);
    this.camera = new ThreeAR.Camera(width, height, 0.01, 1000);
  };

onContextCreate = ({ gl, scale: pixelRatio, width, height }) => {
    AR.setPlaneDetection(AR.PlaneDetectionTypes.Horizontal);
    this.renderer = new ExpoTHREE.Renderer({ gl, pixelRatio, width, height });

    this.scene = new THREE.Scene();
    this.scene.background = new ThreeAR.BackgroundTexture(this.renderer);
    this.camera = new ThreeAR.Camera(width, height, 0.01, 1000);
    this.planes = new ThreeAR.Planes();
    this.scene.add(this.planes);
  };

onContextCreate = async ({ gl, scale: pixelRatio, width, height }) => {
    AR.setPlaneDetection(AR.PlaneDetectionTypes.Horizontal);

    await this.addDetectionImageAsync(Assets['marker.jpg']);

    this.renderer = new ExpoTHREE.Renderer({ gl, pixelRatio, width, height });
    this.renderer.gammaInput = this.renderer.gammaOutput = true;
    this.renderer.shadowMap.enabled = true;

    this.scene = new THREE.Scene();
    this.scene.background = new ThreeAR.BackgroundTexture(this.renderer);

    this.camera = new ThreeAR.Camera(width, height, 0.01, 1000);

    await this.loadModel();

    this.ambient = new ThreeAR.Light();
    this.mesh.add(this.ambient);
    this.mesh.add(this.shadow);
    this.mesh.add(this.point);
  };

onContextCreate = async (gl, { width, height }) => {
    this.renderer = new ExpoTHREE.Renderer({
      gl,
      width,
      height,
      clearColor: 0xffffff,
    });
    this.scene = new THREE.Scene();
    this.scene.background = new ExpoTHREE.AR.BackgroundTexture(this.renderer);
    this.camera = new ExpoTHREE.AR.Camera(75, width / height, 0.01, 1000);
    this.points = new ExpoTHREE.AR.Points();
    this.scene.add(this.points);
  };

commonSetup = ({ gl, scale: pixelRatio, width, height }) => {
    require('three/examples/js/postprocessing/EffectComposer');
    require('three/examples/js/postprocessing/RenderPass');
    require('three/examples/js/postprocessing/ShaderPass');
    require('three/examples/js/postprocessing/MaskPass');
    require('three/examples/js/postprocessing/GlitchPass');
    require('three/examples/js/postprocessing/BloomPass');
    require('three/examples/js/postprocessing/FilmPass');
    require('three/examples/js/shaders/CopyShader');
    require('three/examples/js/shaders/ColorCorrectionShader');
    require('three/examples/js/shaders/VignetteShader');
    require('three/examples/js/shaders/DigitalGlitch');

    this.renderer = new ExpoTHREE.Renderer({
      gl,
      pixelRatio,
      width,
      height,
    });

    this.scene = new THREE.Scene();
    this.scene.background = new ThreeAR.BackgroundTexture(this.renderer);
    this.camera = new ThreeAR.Camera(width, height, 0.01, 1000);

    this._setupScene(width, height);
  };

onContextCreate = ({ gl, scale: pixelRatio, width, height }) => {
    this.renderer = new ExpoTHREE.Renderer({ gl, width, height, pixelRatio });
    this.scene = new THREE.Scene();
    this.scene.background = new ThreeAR.BackgroundTexture(this.renderer);

    this.camera = new ThreeAR.Camera(width, height, 0.01, 1000);
  };