context not available in <Stage> children

[kresli]

import "./styles.css";
import { Stage, Container } from "react-pixi-fiber";
import { createContext, FunctionComponent, useContext } from "react";

const Context = createContext<{ title: string }>(
  (null as any) as { title: string }
);

const Wrapper: FunctionComponent = ({ children }) => {
  const context = useContext(Context);
  // following will throw
  if (!context) throw new Error("context not defined"); 
  return <Container>{children}</Container>;
};

export default function App() {
  return (
    <Context.Provider value={{ title: "hello" }}>
      <div className="App">
        <Stage>
          <Wrapper />
        </Stage>
      </div>
    </Context.Provider>
  );
}

I would expect context will be available in Wrapper.

Additional info

• react-pixi-fiber version: 1.0.0-beta.9
• React version: 17.0.2
• ReactDOM version: 17.0.2
• PixiJS version: 6.0.2

[kresli]

I think this is an issue of react not react-pixi-fiber
facebook/react#17275
feel free to close the ticket

[michalochman]

Hi @kresli, yes, this is a react issue. Contexts are not shared between different renderers. See #93 for workarounds. Also mentioned in #145.