Fix: Issue 32: Verbose logging about useLayoutEffect on server render with web-export with toast component

[the-simian]

1. adds a line of code to prevent accessing function on server that causes verbose logging
2. adds a prettierrc.json that matches the existing code style

[the-simian]

Verification: The toast component still works normally on the web-export, IOS, and android builds after this change

Web (Blisk)	Android (hardware)

[the-simian]

This fixes #32

[mrzachnugent]

Thank you for contributing!

Can you add this as a custom hook?

In ~/lib/useIsomorphicLayoutEffect.tsx, can you add

import * as React from 'react';

export const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect

And then use it here?

FYI: If you were to use import * as React from 'react' here, you would get the typescript error: "Cannot assign to 'useLayoutEffect' because it is a read-only property"

[the-simian]

You bet, I think a custom hook is a better approach!

I will say we unfortunately probably still need to use the 'shim' least for now. In this codebase for our own code we can use the isomorphic useLayoutEffect, but the issue is actually inside of react-native-toast-messages on this line: https://github.com/calintamas/react-native-toast-message/blob/c9f6e08667d37f7d3f8a873226a1d670fb842554/src/components/AnimatedContainer.tsx#L121

Specifically:

  React.useLayoutEffect(() => {
    const newAnimationValue = isVisible ? 1 : 0;
    animate(newAnimationValue);
  }, [animate, isVisible]);

I was considering opening a PR on that repo at some point in the future to fix it there. Basically submitting some sort of isomorphic hook solution like you've proposed. If the problem wasn't inside somone else's module I think I'd have done this first

[the-simian]

Update: I've added the hook for our own uses in situations where we'd call useLayoutEffect effect ourselves. I've left the existing shim in since its in a downstream module and I'm not sure how we'd get our hook in there. I can submit a PR to their repo directly in the future and we can then (probably) remove the shim.

[mrzachnugent]

Thank you for the clarifications

[the-simian]

Here is the referenced issue in the other repo and I've made all the other requested changes:
calintamas/react-native-toast-message#530

[mrzachnugent]

Great! Thank you