feat!: React 19 (#81)

Author: CodyJasonBennett

README.md

@@ -544,9 +544,9 @@ interface RootState {
   xr: XRManager
   // Frameloop internals for custom render loops
   priority: number
-  subscribed: React.MutableRefObject<Subscription>[]
-  subscribe: (refCallback: React.MutableRefObject<Subscription>, renderPriority?: number) => void
-  unsubscribe: (refCallback: React.MutableRefObject<Subscription>, renderPriority?: number) => void
+  subscribed: React.RefObject<Subscription>[]
+  subscribe: (refCallback: React.RefObject<Subscription>, renderPriority?: number) => void
+  unsubscribe: (refCallback: React.RefObject<Subscription>, renderPriority?: number) => void
   // Optional canvas event manager and its state
   events?: EventManager
   mouse: OGL.Vec2
@@ -796,13 +796,13 @@ In addition to `createRoot` (see [custom canvas](#custom-canvas)), react-ogl exp
 ```tsx
 import * as React from 'react'
 import * as OGL from 'ogl'
-import { type Root, type RootStore, type RootState, createRoot, act } from 'react-ogl'
+import { type Root, type RootStore, type RootState, createRoot } from 'react-ogl'
 
 it('tests against a react-ogl component or scene', async () => {
   const transform = React.createRef<OGL.Transform>()
 
   const root: Root = createRoot(document.createElement('canvas'))
-  const store: RootStore = await act(async () => root.render(<transform ref={transform} />))
+  const store: RootStore = await React.act(async () => root.render(<transform ref={transform} />))
   const state: RootState = store.getState()
 
   expect(transform.current).toBeInstanceOf(OGL.Transform)

examples/src/cubes.tsx

@@ -1,11 +1,11 @@
 import * as OGL from 'ogl'
 import * as React from 'react'
-import { useFrame, Canvas } from 'react-ogl'
+import { type OGLElements, useFrame, Canvas } from 'react-ogl'
 
 const hotpink = new OGL.Color(0xfba2d4)
 const orange = new OGL.Color(0xf5ce54)
 
-const Box = (props: JSX.IntrinsicElements['mesh']) => {
+const Box = (props: OGLElements['mesh']) => {
   const mesh = React.useRef<OGL.Mesh>(null!)
   const [hovered, setHover] = React.useState(false)
   const [active, setActive] = React.useState(false)

package.json

@@ -46,30 +46,30 @@
     "jest-environment-jsdom": "^28.1.3",
     "ogl": "^1.0.3",
     "prettier": "^2.7.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "react-native": "^0.69.4",
-    "react-test-renderer": "^18.2.0",
-    "rimraf": "^3.0.2",
-    "typescript": "^4.7.4",
-    "vite": "^3.0.9"
+    "react-test-renderer": "^19.0.0",
+    "rimraf": "^5.0.0",
+    "typescript": "^5.7.3",
+    "vite": "^6.0.11"
   },
   "dependencies": {
-    "@types/react-reconciler": "^0.26.7",
+    "@types/react-reconciler": "^0.28.9",
     "@types/webxr": "*",
-    "its-fine": "^1.1.1",
-    "react-reconciler": "^0.27.0",
+    "its-fine": "^1.2.5",
+    "react-reconciler": "^0.31.0",
     "react-use-measure": "^2.1.1",
-    "scheduler": "^0.23.0",
+    "scheduler": "^0.25.0",
     "suspend-react": "^0.1.3",
     "zustand": "^4.5.2"
   },
   "peerDependencies": {
     "expo-gl": ">=11.4",
     "ogl": ">=1",
-    "react": ">=18.0",
-    "react-dom": ">=18.0",
-    "react-native": ">=0.69"
+    "react": "^19.0",
+    "react-dom": "^19.0",
+    "react-native": ">=0.78"
   },
   "peerDependenciesMeta": {
     "react-dom": {

src/Canvas.native.tsx

@@ -7,7 +7,10 @@ import { events as createTouchEvents } from './events.native' // explicitly requ
 import { RenderProps } from './types'
 import { render, unmountComponentAtNode } from './renderer'
 
-export interface CanvasProps extends Omit<RenderProps, 'size' | 'dpr'>, ViewProps {
+// TODO: React 19 needs support from react-native
+const _View = View as any
+
+export interface CanvasProps extends Omit<RenderProps, 'size' | 'dpr'>, Omit<ViewProps, 'children'> {
   children: React.ReactNode
   style?: ViewStyle
 }
@@ -51,6 +54,7 @@ const CanvasImpl = React.forwardRef<View, CanvasProps>(function Canvas(
   // Render to screen
   if (canvas && width > 0 && height > 0) {
     render(
+      // @ts-expect-error
       <Bridge>
         <ErrorBoundary set={setError}>
           <React.Suspense fallback={<Block set={setBlock} />}>{children}</React.Suspense>
@@ -95,9 +99,9 @@ const CanvasImpl = React.forwardRef<View, CanvasProps>(function Canvas(
   }, [canvas])
 
   return (
-    <View {...props} ref={forwardedRef} onLayout={onLayout} style={{ flex: 1, ...style }} {...bind}>
+    <_View {...props} ref={forwardedRef} onLayout={onLayout} style={{ flex: 1, ...style }} {...bind}>
       {width > 0 && <GLView onContextCreate={onContextCreate} style={StyleSheet.absoluteFill} />}
-    </View>
+    </_View>
   )
 })
 
@@ -106,6 +110,7 @@ const CanvasImpl = React.forwardRef<View, CanvasProps>(function Canvas(
  */
 export const Canvas = React.forwardRef<View, CanvasProps>(function CanvasWrapper(props, ref) {
   return (
+    // @ts-expect-error
     <FiberProvider>
       <CanvasImpl {...props} ref={ref} />
     </FiberProvider>

src/Canvas.tsx

@@ -49,6 +49,7 @@ const CanvasImpl = React.forwardRef<HTMLCanvasElement, CanvasProps>(function Can
   // Render to screen
   if (canvas && width > 0 && height > 0) {
     render(
+      // @ts-expect-error
       <Bridge>
         <ErrorBoundary set={setError}>
           <React.Suspense fallback={<Block set={setBlock} />}>{children}</React.Suspense>
@@ -99,6 +100,7 @@ const CanvasImpl = React.forwardRef<HTMLCanvasElement, CanvasProps>(function Can
  */
 export const Canvas = React.forwardRef<HTMLCanvasElement, CanvasProps>(function CanvasWrapper(props, ref) {
   return (
+    // @ts-expect-error
     <FiberProvider>
       <CanvasImpl {...props} ref={ref} />
     </FiberProvider>

src/hooks.ts

@@ -23,7 +23,7 @@ export const useIsomorphicLayoutEffect =
  *
  * **Note**: this is an escape hatch to react-internal fields. Expect this to change significantly between versions.
  */
-export function useInstanceHandle<O>(ref: React.MutableRefObject<O>): React.MutableRefObject<Instance> {
+export function useInstanceHandle<O>(ref: React.RefObject<O>): React.RefObject<Instance> {
   const instance = React.useRef<Instance>(null!)
   useIsomorphicLayoutEffect(
     () => void (instance.current = (ref.current as unknown as Instance<O>['object']).__ogl!),