Discount code slider

Show different discount codes in slider layout

import React from "react";
import { Clipboard, Alert } from "react-native";
import { Actionable, View as Box, Flexbox, Text } from "@evlop/native-components";

const AppBlock: NativeAppBlock = function ({ data }) {

  const copyCode = () => {
    const code = data?.item?.discountCode || "";
    try {
      // Try different clipboard locations depending on RN version
      if (Clipboard && typeof Clipboard.setString === "function") {
        Clipboard.setString(code);
      }
    } catch (e) {
      // ignore
    }

    Alert.alert("Discount code copied");
  };

  return (
    <Actionable action={copyCode}>
      <Box my="3xs" p="2xs" bg={data.item?.backgroundColor || "primary-200"} borderRadius={10}>
        <Text fontSize="2xl" style={{ textDecorationLine: "underline" }} lineHeight="3xl" color="gray-1100" fontWeight="Bold">
          {data.item?.title}
        </Text>
        <Flexbox flexWrap="nowrap" flexDirection="row" alignItems="center">
          <Box flex={1}>
            <Text numberOfLines={1} fontSize="2xs" color="gray-900">
              {data.item?.description}
            </Text>
          </Box>

          {data.item?.tag ? (
            <Box fontWeight="bold" borderRadius={5} p="4xs" backgroundColor="primary-900">
              <Text color="gray-100" fontSize="2xs" fontWeight="bold" content={data.item.tag} />
            </Box>
          ) : null}
        </Flexbox>
      </Box>
    </Actionable>
  );
};

export default AppBlock;