layout-timeout.ts

/**
 * This function exists to allow us to use setTimeout in a way that doesn't block the UI thread.
 *
 * Instead of using setTimeout, we use requestAnimationFrame to call the function recursively until the timeout is reached.
 *
 * This will enable us to render smooth animations while the timeout is running.
 */
export function setLayoutTimeout(
  callback: (...args: any) => any,
  timeout: number,
  startTime = Date.now(),
  timePassed = 0,
  hasStopped = { current: false }
) {
  if (timePassed > timeout && !hasStopped.current) {
    callback();
    return;
  }
  requestAnimationFrame(() => {
    if (hasStopped.current) return;
    setLayoutTimeout(
      callback,
      timeout,
      startTime,
      Date.now() - startTime,
      hasStopped
    );
  });

  return () => {
    hasStopped.current = true;
  };
}

export function clearLayoutTimeout(
  timeout: ReturnType<typeof setLayoutTimeout>
) {
  timeout();
}

log.ts

function logToServer(
  type: "error" | "info" | "log" | "debug" | "warn",
  name: string,
  ...data: any[]
) {
  if (typeof console[type] === "function") console[type](...data);
}

export default function loggingBuilder(name: string) {
  return {
    log: (...data: any[]) => logToServer("log", name, ...data),
    error: (...data: any[]) => logToServer("error", name, ...data),
    info: (...data: any[]) => logToServer("info", name, ...data),
    debug: (...data: any[]) => logToServer("debug", name, ...data),
    warn: (...data: any[]) => logToServer("warn", name, ...data),
  };
}

usePersistRef.ts

import AsyncStorage from "@react-native-async-storage/async-storage";
import { useEffect, useMemo, useRef, useState } from "react";

let persistedRefKeys = new Map<string, () => void>();

export function clearPersistedStates(keysToExclude?: string[]) {
  const promises: Promise<void>[] = [];
  for (const [key, callback] of persistedRefKeys.entries()) {
    if (Array.isArray(keysToExclude) && keysToExclude?.includes(key) === false)
      continue;
    promises.push(AsyncStorage.removeItem(key));
    callback?.();
  }

  return Promise.all(promises);
}

export default function usePersistRef<T>(key: string, defaultValue: T) {
  const stateRef = useRef<T>(defaultValue);
  persistedRefKeys.set(key, () => (stateRef.current = defaultValue));

  const newRef = useMemo(() => {
    return new Proxy(stateRef, {
      get: (target, prop) => {
        if (prop === "current") return target.current;
        return target[prop];
      },
      set: (target, prop, value) => {
        if (prop === "current") {
          target.current = value;
          setPersistedState(value);
          return true;
        }
        target[prop] = value;
        return true;
      },
    });
  }, []);

  function setPersistedState(value: T) {
    console.log("persisting", JSON.stringify(value));
    AsyncStorage.setItem(key, JSON.stringify(value)).then(() => {
      stateRef.current = value;
    });
  }

  async function retrieveFromPersistedState(): Promise<T> {
    const state = await AsyncStorage.getItem(key);
    if (state) return JSON.parse(state);
    return defaultValue;
  }

  useEffect(() => {
    AsyncStorage.getItem(key).then((value) => {
      if (value) stateRef.current = JSON.parse(value);
    });
  }, []);

  return [newRef, retrieveFromPersistedState] as const;
}

uuid.ts

export default function uuid() {
  //Timestamp
  let date = new Date().getTime();
  //Time in microseconds since page-load or 0 if unsupported
  let performanceDate =
    (performance && performance.now && performance.now() * 1000) || 0;
  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(
    /[xy]/g,
    (character) => {
      let randomNumber = Math.random() * 16; //random number between 0 and 16
      if (date > 0) {
        //Use timestamp until depleted
        randomNumber = (date + randomNumber) % 16 | 0;
        date = Math.floor(date / 16);
      } else {
        //Use microseconds since page-load if supported
        randomNumber = (performanceDate + randomNumber) % 16 | 0;
        performanceDate = Math.floor(performanceDate / 16);
      }
      return (
        character === "x" ? randomNumber : (randomNumber & 0x3) | 0x8
      ).toString(16);
    }
  );
}