setFullScreen not working in case of React hooks

[vinodkhandelwal]

Hi,

I am trying to use this library with react hooks. I am able to load the content and all events are also working. But somehow setFullscreen method is not working. With pre hook version of react this method is working. below is sample code that i am using. Please note that progress event is working properly here.

export default function App() {

let unityContent = new UnityContent(
"Build/Build.json",
"Build/UnityLoader.js"
);
const [progression, setProgression] = useState(0);

unityContent.on("progress", progressionVal => {
setProgression(progressionVal * 100);
});

const onFullScreen = () => {
unityContent.setFullscreen(true);
};

return (
<div> <Unity unityContent={unityContent} /> <button id="fullScreenButton" onClick={onFullScreen}></button> </div>
);

[vinodkhandelwal]

On further exploration I found out that calling state set method (setProgression(progressionVal * 100);
in this case) is creating this problem. if i just comment out this line, full screen starts working. Calling state set method somehow making unityInstance undefined thus causing this problem.

[DanielAudaptic]

Hi, I’m having similar problems(#79) with this package. Did you ever get it to work with hooks?

[AdhamMoussa]

I think the problem is initializing unityContent inside the component.
I believe this should be done outside of the component to prevent re-initializing it on every re-render.
it works when u comment out setProgression because then no re-renders happen

[DanielAudaptic]

Thanks AdhamMoussa,

Creating a top component without any hooks and initialize unityContent from there solved the problem.

Many many thanks AdhamMoussa for pointing out the solution! Really thankful!

[AdhamMoussa]

@DanielAudaptic I mean initialize it outside of any component:

const unityContent = new UnityContent(
"Build/Build.json",
"Build/UnityLoader.js"
);

export default function App() {
  const [progression, setProgression] = useState(0);

  unityContent.on("progress", progressionVal => {
setProgression(progressionVal * 100);
});

  const onFullScreen = () => {
unityContent.setFullscreen(true);
};

  return (
    <div> <Unity unityContent={unityContent} /> <button id="fullScreenButton" onClick={onFullScreen}></button> </div>
  );

If you need to pass props or state to the initialization statement, you can initialize it inside the component function using useMemo hook, and set the same props/state as dependencies

[DanielAudaptic]

@AdhamMoussa you are correct! That solved my issues and I believe also for #74. Really greatful for the assistance.