@applicaster/zapp-react-native-ui-components/Components/default-cell-renderer/viewTrees/mobile/HeroCell/index.ts

Applicaster Zapp React Native ui components for the Quick Brick App

import { Dimensions } from "react-native";

const Image = "Image";
const View = "View";
const Text = "Text";

function containerStyle(state) {
  return {
    padding: 12,
    width: Dimensions.get("window").width,
    backgroundColor: state === "default" ? "transparent" : "#CCC",
    opacity: state === "default" ? 1.0 : 0.6,
  };
}

const cellStyles = {
  image: {
    borderRadius: 3,
    aspectRatio: 16 / 9,
  },
  titleContainer: {
    position: "absolute",
    top: 0,
    margin: 12,
    width: "100%",
  },
  title: {
    fontFamily: "HelveticaNeue-Light",
    fontSize: 18,
    color: "#fff",
    padding: 8,
    backgroundColor: "rgba(127,127,127,0.4)",
  },
};

const viewTree = (state, _styles) => [
  {
    type: View,
    style: containerStyle(state),
    elements: [
      {
        type: Image,
        style: cellStyles.image,
        data: [
          {
            func: "image_src_from_media_item",
            args: ["thumbnail-small"],
            propName: "uri",
          },
        ],
      },
      {
        type: View,
        style: cellStyles.titleContainer,
        elements: [
          {
            type: Text,
            style: cellStyles.title,
            data: [
              {
                func: "path",
                args: ["title"],
                propName: "label",
              },
            ],
            additionalProps: {
              numberOfLines: 2,
              ellipsizeMode: "tail",
            },
          },
        ],
      },
    ],
  },
];

export const HeroCell = (styles) => ({
  content_types: {
    default: {
      states: {
        default: viewTree("default", styles),
        focused: viewTree("focused", styles),
        selected: viewTree("selected", styles),
      },
    },
  },
});