react-native-demo / app / components / ui / accountnumber.tsx

import { TouchableOpacity } from "react-native";
import { ThemedText, ThemedView } from "@/components/theme";
import { useToggle } from "@/hooks/use-toggle";
import { blurAccountNumber } from "@/services/blur-accountnumber";
import { PropsWithChildren } from "react";

interface AccountNumberProps {
  children: string;
  hidden?: boolean;
  size?: "default" | "small";
}

export const AccountNumber = ({
  children,
  hidden = false,
  size = "default",
}: AccountNumberProps) => {
  const { isHidden, toggleHidden } = useToggle(true);

  return (
    <Wrapper onPress={toggleHidden} toggleable={!hidden}>
      <ThemedText type={size}>
        {isHidden ? blurAccountNumber(children.toString()) : children}
      </ThemedText>
    </Wrapper>
  );
};

type WrapperProps = PropsWithChildren<{
  toggleable: boolean;
  onPress: () => void | Promise<void>;
}>;

const Wrapper = ({ children, toggleable, onPress }: WrapperProps) =>
  toggleable ? (
    <TouchableOpacity onPressOut={onPress}>{children}</TouchableOpacity>
  ) : (
    <ThemedView>{children}</ThemedView>
  );