super-app/components/reusable/cta-button/CtaButton.tsx

import { TouchableHighlight, TouchableOpacity, ViewStyle } from "react-native";
import { Lottie } from "../../../App/common/constants/StringConstant";
import { ButtonState } from "../../../App/common/interface/widgets/widgetData/FooterWithCardWidgetData";
import { LottieFieldData } from "../../../App/common/interface/widgets/widgetData/TitleWidgetData";
import { StyledLottie } from "../../widgets/styled-lottie/StyledLottie";
import styles from "./CtaButtonStyle";
import { Platform } from "react-native";
import { OsTypeConstants } from "../../../App/common/constants/BuildConfigConstants";
import LottieView from "../../widgets/styled-lottie/StyledLottieIos";

const CtaButton = ({
  onPress,
  style,
  children,
  state,
}: {
  onPress?: () => void;
  style?: ViewStyle;
  children?: React.ReactNode;
  state?: ButtonState;
}) => {
  const loaderData: LottieFieldData = {
    url: Lottie.FOOTER_LOADER_URL,
    loop: true,
    lottieStyle: styles.loaderLottieStyle,
  };
  return (
    <TouchableOpacity
      activeOpacity={1}
      onPress={onPress}
      disabled={state === ButtonState.DISABLED || state === ButtonState.LOADING}
      style={[styles.footerButtonContainer, style]}
    >
      {state === ButtonState.LOADING ? (
        Platform.OS === OsTypeConstants.IOS ? (
          <LottieView />
        ) : (
          <StyledLottie lottieFieldData={loaderData} />
        )
      ) : (
        children
      )}
    </TouchableOpacity>
  );
};

export default CtaButton;