@applicaster/zapp-react-native-ui-components
Version:
Applicaster Zapp React Native ui components for the Quick Brick App
95 lines (92 loc) • 2.27 kB
text/typescript
import {
getColor,
ACTIVE_COLOR,
BACKGROUND_COLOR,
MAIN_TEXT_COLOR,
FOCUSED_TEXT_COLOR,
} from "../../../colors/index.ios";
const viewTree = (state, styles) => [
{
type: "View",
style: {
flex: 1,
aspectRatio: 2.4,
padding: 10,
},
elements: [
{
type: "View",
style: {
flex: 1,
backgroundColor:
state === "selected"
? getColor(ACTIVE_COLOR, styles)
: getColor(BACKGROUND_COLOR, styles),
borderRadius: 4,
overflow: "hidden",
},
elements: [
{
type: "View",
elements: [
{
type: "Image",
style: {
aspectRatio: 3.2,
backgroundColor: getColor(BACKGROUND_COLOR, styles),
},
data: [
{
func: "image_src_from_media_item",
args: ["thumbnail-small"],
propName: "uri",
},
],
},
],
},
{
type: "View",
elements: [
{
type: "Text",
style: {
paddingHorizontal: "6%",
paddingTop: "3%",
fontSize: 26,
lineHeight: 32,
color:
state === "selected"
? getColor(FOCUSED_TEXT_COLOR, styles)
: getColor(MAIN_TEXT_COLOR, styles),
fontWeight: "700",
},
data: [
{
func: "path",
args: ["title"],
propName: "label",
},
],
additionalProps: {
numberOfLines: 1,
},
},
],
},
],
},
],
},
];
export const HeroCell = (styles) => ({
content_types: {
default: {
states: {
default: viewTree("default", styles),
focused: viewTree("selected", styles),
selected: viewTree("selected", styles),
},
},
},
});