@applicaster/zapp-react-native-ui-components/index.d.ts

Applicaster Zapp React Native ui components for the Quick Brick App

/// <reference types="@applicaster/applicaster-types" />
declare module "@applicaster/zapp-react-native-ui-components";

type GeneralContentScreenProps = {
  feed?: ZappFeed; // Pipes v1 only. Add warning if using pipes v2
  screenId: string;
  groupId?: string;
  preferredFocus?: boolean;
  components?: Array<ZappUIComponent>;
  cellTapAction?: (entry: ZappEntry) => any;
  scrollViewExtraProps?: Record<string, any>;
  getStaticComponentFeed?: ({
    component,
    index,
  }: {
    component: ZappUIComponent;
    index: number;
  }) => Promise<ZappFeed> | ZappFeed;
  extraAnchorPointYOffset?: number;
  isScreenWrappedInContainer?: boolean;
  componentsMapExtraProps?: {
    onContentSizeChange?: (cb: { width: number; height: number }) => any;
    onLayout?: (LayoutChangeEvent) => any;
  } & Record<string, any>;
  focused?: boolean;
  parentFocus?: ParentFocus;
  extraOffset?: number;
  containerHeight?: number;
};

type BaseConfig = {
  default_font_color: string;
  default_item_background_color: string;
  default_item_border_color: string;
  default_text_background_color: string;
  default_text_border_color: string;
  default_underline_color: string;

  text_label_focused_font_color: string;
  focused_vertical_font_color: string;

  focused_vertical_item_background_color: string;
  tab_bar_item_focused_background_color: string;

  focused_item_border_color: string;
  focused_text_background_color: string;
  focused_text_border_color: string;

  focused_vertical_underline_color: string;
  tab_bar_item_focused_underline_color: string;

  vertical_item_border_thickness: number;
  tab_bar_item_border_width: number;

  vertical_item_corner_radius: number;
  tab_bar_item_border_radius: number;

  item_padding_bottom: number;
  item_padding_left: number;
  item_padding_right: number;
  item_padding_top: number;

  text_item_padding_bottom: number;
  text_item_padding_left: number;
  text_item_padding_right: number;
  text_item_padding_top: number;

  number_of_lines: number;
  screen_picker_width?: number;
  screen_picker_x_position?: number;
  screen_picker_y_position?: number;

  selected_focused_vertical_font_color: string;
  text_label_selected_focused_font_color: string;

  selected_focused_vertical_item_background_color: string;
  tab_bar_item_selected_focused_background_color: string;

  selected_focused_item_border_color: string;
  selected_focused_text_background_color: string;
  selected_focused_text_border_color: string;

  selected_focused_vertical_underline_color: string;
  tab_bar_item_selected_focused_underline_color: string;

  selected_vertical_font_color: string;
  text_label_selected_font_color: string;

  selected_item_background_color: string;

  selected_vertical_item_border_color: string;
  tab_bar_item_selected_border_color: string;

  selected_text_background_color: string;
  selected_text_border_color: string;

  selected_vertical_underline_color: string;
  tab_bar_item_selected_underline_color: string;

  text_border_thickness: number;
  text_corner_radius: number;

  text_vertical_padding_bottom: number;
  tab_bar_item_padding_bottom: number;

  text_vertical_padding_left: number;
  tab_bar_item_padding_left: number;

  text_vertical_padding_top: number;
  tab_bar_item_padding_top: number;

  text_vertical_padding_right: number;
  tab_bar_item_padding_right: number;

  text_transform: "default" | "uppercase" | "lowercase" | "capitalize";

  vertical_underline_corner_radius: number;
  tab_bar_item_underline_border_radius: number;

  underline_thickness: number;

  vertical_underline_thickness: number;
  tab_bar_item_underline_thickness: number;

  tab_bar_type: "vertical" | "horizontal";
  tab_bar_display_mode: "fixed" | "dynamic";
  tab_bar_alignment: "left" | "center" | "right";
  screen_picker_vertical_width: number;
  tab_bar_width: number;
  tab_bar_background_color: string;
  tab_bar_background_image: string;
  tab_bar_border_color: string;
  tab_bar_border_width: number;
  tab_bar_border_radius: number;
  screen_picker_loop: boolean;
  screen_picker_loop_item_position: "left" | "center" | "right";
  screen_picker_vertical_x_position: number;
  screen_picker_vertical_y_position: number;
  screen_picker_vertical_gutter?: number;
  tab_bar_gutter?: number;
  tab_bar_item_size: "dynamic" | "fixed";
  tab_bar_item_width: number;
  tab_bar_item_alignment: "left" | "center" | "right";
  component_padding_top?: number;
  component_padding_bottom?: number;
  component_padding_left?: number;
  component_padding_right?: number;
  screen_picker_asset_switch: boolean;
  screen_picker_asset_key: string;
  screen_picker_asset_focused_switch: boolean;
  screen_picker_asset_focused_key: string;
  screen_picker_asset_selected_switch: boolean;
  screen_picker_asset_selected_key: string;
  screen_picker_asset_selectedfocused_switch: boolean;
  screen_picker_asset_selectedfocused_key: string;
  screen_picker_asset_width: number;
  screen_picker_asset_height: number;
  screen_picker_asset_margin_top: number;
  screen_picker_asset_margin_right: number;
  screen_picker_asset_margin_bottom: number;
  screen_picker_asset_margin_left: number;
  screen_picker_asset_alignment: "top" | "right" | "left" | "bottom";
  text_label_enabled: boolean;
};

type FullFontConfig = {
  tvos_font_family: string;
  tvos_font_size: number;
  tvos_line_height: number;
  tvos_letter_spacing: number;
  android_tv_font_family: string;
  android_tv_font_size: number;
  android_tv_line_height: number;
  android_tv_letter_spacing: number;
  lg_tv_font_family: string;
  lg_tv_font_size: number;
  lg_tv_line_height: number;
  lg_tv_letter_spacing: number;
  samsung_tv_font_family: string;
  samsung_tv_font_size: number;
  samsung_tv_line_height: number;
  samsung_tv_letter_spacing: number;
};

type PlatformFontConfig = {
  font_family: string;
  font_size: number;
  line_height: number;
  letter_spacing: number;
};

declare type FullConfiguration = BaseConfig & FullFontConfig;

declare type PlatformConfiguration = BaseConfig & PlatformFontConfig;

type ReactViewStyle = import("react-native").ViewStyle;
type ReactTextStyle = import("react-native").TextStyle;

declare type TVTabsStyles = {
  tabsFocusableGroup: ReactViewStyle;
  tabsWrapper: ReactViewStyle;
  tabs: ReactViewStyle;
  tabsBackground: ReactViewStyle;
  tabsListWrapper: ReactViewStyle;
  tabsListContentContainer: ReactViewStyle;
  item: ReactViewStyle;
  selectedItem: ReactViewStyle;
  focusedItem: ReactViewStyle;
  selectedFocusedItem: ReactViewStyle;
  textContainer: ReactViewStyle;
  selectedTextContainer: ReactViewStyle;
  focusedTextContainer: ReactViewStyle;
  selectedFocusedTextContainer: ReactViewStyle;
  text: ReactTextStyle;
  selectedText: ReactTextStyle;
  focusedText: ReactTextStyle;
  selectedFocusedText: ReactTextStyle;
  textUnderline: ReactViewStyle;
  selectedUnderline: ReactViewStyle;
  focusedUnderline: ReactViewStyle;
  selectedFocusedUnderline: ReactViewStyle;
  tabContent: ReactViewStyle;
  tabContentFocusableGroup: ReactViewStyle;
};

declare type TabsSelectionContextType = {
  selectedEntry: ZappEntry | null;
  setSelectedEntry: (entry: ZappEntry | null) => void;
  selectedEntryIndex: number;
};

declare type TabsProps = {
  entry: ZappEntry[];
  groupId: string;
  id: string;
  focused?: boolean;
  parentFocus?: ParentFocus;
  style?: ReactViewStyle;
};

declare type TabContentProps = {
  groupId: string;
  id: string;
  entry: ZappEntry;
  parentFocus?: ParentFocus;
  Component?: ReactComponent;
};