@applicaster/zapp-react-native-ui-components 12.0.0-alpha.4043183114 → 12.0.0-alpha.4155487673

package/Components/Cell/Cell.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { join, path, merge } from "ramda";
+import { join, merge, path } from "ramda";
 import { View } from "react-native";
 
 import { Focusable } from "@applicaster/zapp-react-native-ui-components/Components/Focusable";
@@ -14,7 +14,10 @@ import { BaseFocusable } from "../BaseFocusable";
 import { AccessibilityManager } from "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager";
 
 type Props = {
-  item: ZappEntry;
+  item: {
+    id: string;
+    title: string;
+  };
   index: number;
   shouldScrollHorizontally: (arg1: [any]) => boolean | null | undefined;
   shouldScrollVertically: (...args: any) => boolean | null | undefined;
@@ -30,9 +33,10 @@ type Props = {
     id: string;
   };
   selected?: boolean;
-  CellRenderer: React.FunctionComponent<any> & {
-    hasFocusableInside: (item: ZappEntry) => boolean;
-  };
+  CellRenderer: React.ComponentType<{
+    item: any;
+    state: string;
+  }> & { hasFocusableInside: (item: Record<string, string>) => boolean };
   preferredFocus: boolean;
   navigator: {
     push: (arg1: Record<any, any>) => void;
@@ -63,6 +67,10 @@ type Props = {
   behavior: Behavior;
 };
 
+type State = {
+  hasFocusableInside: boolean;
+};
+
 const baseCellStyles = {
   height: "100%",
   display: "flex",
@@ -74,7 +82,7 @@ const touchableStyles = {
   height: "100%",
 } as const;
 
-export class CellComponent extends React.Component<Props> {
+export class CellComponent extends React.Component<Props, State> {
   constructor(props) {
     super(props);
     this.onPress = this.onPress.bind(this);
@@ -84,6 +92,10 @@ export class CellComponent extends React.Component<Props> {
     this.hasReceivedFocus = this.hasReceivedFocus.bind(this);
     this.scrollVertically = this.scrollVertically.bind(this);
     this.scrollToIndex = this.scrollToIndex.bind(this);
+
+    this.state = {
+      hasFocusableInside: props.CellRenderer.hasFocusableInside?.(props.item),
+    };
   }
 
   setScreenLayout(componentAnchorPointY, screenLayout) {
@@ -139,7 +151,7 @@ export class CellComponent extends React.Component<Props> {
 
         const accessibilityManager = AccessibilityManager.getInstance();
         // Text from DSP should be localized already
-        accessibilityManager.readText({ text: title.toString() });
+        accessibilityManager.readText({ text: title });
       }
     }
   }
@@ -188,6 +200,16 @@ export class CellComponent extends React.Component<Props> {
     return !isFocusable ? false : focused || focusableFocused;
   }
 
+  componentDidUpdate(prevProps: Readonly<Props>) {
+    if (prevProps.item !== this.props.item) {
+      this.setState({
+        hasFocusableInside: this.props.CellRenderer.hasFocusableInside?.(
+          this.props.item
+        ),
+      });
+    }
+  }
+
   render() {
     const {
       item,
@@ -216,9 +238,7 @@ export class CellComponent extends React.Component<Props> {
       this.onFocus(focusable, mouse);
     };
 
-    const hasFocusableInside = CellRenderer.hasFocusableInside?.(item);
-
-    if (hasFocusableInside) {
+    if (this.state.hasFocusableInside) {
       return (
         <CellWithFocusable
           CellRenderer={CellRenderer}

package/Components/Cell/CellWithFocusable.tsx

@@ -46,7 +46,7 @@ const useCellFocusedState = (
 
 type Props = {
   item: ZappEntry;
-  CellRenderer: React.FunctionComponent<any>;
+  CellRenderer: React.ComponentType<{ item: Object; state: string }>;
   id: string;
   groupId: string;
   onFocus: Function;

package/Components/Cell/TvOSCellComponent.tsx

@@ -36,9 +36,10 @@ type Props = {
     component_type: string;
   };
   selected: boolean;
-  CellRenderer: React.FunctionComponent<any> & {
-    hasFocusableInside: (item: any) => boolean;
-  };
+  CellRenderer: React.ComponentType<{
+    item: any;
+    state: string;
+  }> & { hasFocusableInside: (item: any) => boolean };
   preferredFocus: boolean;
   navigator: {
     push: (arg1: Record<any, any>) => void;

package/Components/MasterCell/DefaultComponents/ActionButton.tsx

@@ -53,6 +53,7 @@ export function ActionButton(props: Props) {
   const { item, action, asset, flavour = "flavour_1", cellUUID } = props;
   const actionContext = useActions(action?.identifier);
 
+  // TODO: add subscription API for action availability
   const actionDisabled =
     typeof actionContext?.isActionAvailable === "function" &&
     !actionContext.isActionAvailable(item);
@@ -68,7 +69,7 @@ export function ActionButton(props: Props) {
     if (actionDisabled || !actionContext) return;
 
     setActionState(actionContext.initialEntryState(item));
-  }, [actionDisabled, item?.id]);
+  }, [actionDisabled, item?.id, actionContext]);
 
   const onPress = useCallback(() => {
     actionContext.invokeAction(item, {

package/Components/MasterCell/DefaultComponents/BorderContainerView/index.tsx

@@ -117,9 +117,6 @@ export const BorderContainerView = (props: Props) => {
     children,
   } = props;
 
-  const borderStyleForMissingBorder =
-    style?.borderWidth === 0 || !style?.borderColor ? { borderRadius: 0 } : {};
-
   const padding =
     borderPosition === "outside"
       ? {
@@ -131,10 +128,7 @@ export const BorderContainerView = (props: Props) => {
       : {};
 
   return (
-    <View
-      {...props}
-      style={[style, styles.container, borderStyleForMissingBorder]}
-    >
+    <View {...props} style={[style, styles.container]}>
       <Border style={style} padding={padding} borderPosition={borderPosition} />
       {children}
     </View>

package/Components/MasterCell/DefaultComponents/ImageBorderContainer/index.ts

@@ -0,0 +1,57 @@
+import { ImageStyle } from "react-native";
+
+import {
+  getImageContainerMarginStyles,
+  ifElseFocusedSelected,
+} from "@applicaster/zapp-react-native-utils/cellUtils";
+import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
+
+export const ImageBorderContainer = ({
+  value,
+  state,
+  imageStyles,
+}: {
+  value: (key: string) => string;
+  state: CellState;
+  imageStyles: ImageStyle;
+}) => {
+  return {
+    type: "BorderContainerView",
+    style: {
+      ...getImageContainerMarginStyles({ value }),
+      position: "absolute",
+      top: 0,
+      zIndex: 1,
+      borderWidth: value("image_border_size"),
+      borderColor: ifElseFocusedSelected(
+        state,
+        value("image_focused_border_color"),
+        value("image_selected_border_color"),
+        value("image_focused_selected_border_color"),
+        value("image_border_color")
+      ),
+      borderRadius: toNumberWithDefaultZero(value("image_corner_radius")),
+    },
+    additionalProps: {
+      borderPosition: value("image_border_position"),
+      borderPaddingTop: toNumberWithDefaultZero(
+        value("image_border_padding_top")
+      ),
+      borderPaddingRight: toNumberWithDefaultZero(
+        value("image_border_padding_right")
+      ),
+      borderPaddingBottom: toNumberWithDefaultZero(
+        value("image_border_padding_bottom")
+      ),
+      borderPaddingLeft: toNumberWithDefaultZero(
+        value("image_border_padding_left")
+      ),
+    },
+    elements: [
+      {
+        type: "View",
+        style: imageStyles,
+      },
+    ],
+  };
+};

package/Components/MasterCell/DefaultComponents/index.ts

@@ -15,6 +15,7 @@ import { BorderContainerView } from "./BorderContainerView";
 import { CellBadge } from "./CellBadge";
 import { TvActionButtons } from "./tv/TvActionButtons";
 import { ButtonContainerView } from "./tv/ButtonContainerView";
+import { ImageBorderContainer } from "./ImageBorderContainer";
 
 export const defaultComponents = {
   View,
@@ -28,6 +29,7 @@ export const defaultComponents = {
   ProgressBar,
   Toggle,
   LiveImage,
+  ImageBorderContainer,
   BorderContainerView,
   DynamicBadge,
   SecondaryImage,

package/Components/MasterCell/dataAdapter.ts

@@ -37,14 +37,28 @@ function retrieveData(entry, func, args) {
  */
 
 export function configInflater(
-  entry,
-  { type, style, additionalProps = {}, data = [], elements }
+  entry: any,
+  {
+    type,
+    style,
+    additionalProps = {},
+    data = [],
+    elements,
+  }: {
+    type: any;
+    style: any;
+    additionalProps?: Record<string, any>;
+    data?: Array<{ propName: string; func: Function; args: any[] }>;
+    elements?: any[];
+  }
 ) {
-  const props = R.reduce(
-    (acc, curr) =>
-      R.assoc(curr.propName, retrieveData(entry, curr.func, curr.args), acc),
-    additionalProps,
-    data
+  const props = data.reduce(
+    (acc, curr) => {
+      acc[curr.propName] = retrieveData(entry, curr.func, curr.args);
+
+      return acc;
+    },
+    { ...additionalProps }
   );
 
   let adjustedElements;

package/Components/MasterCell/index.tsx

@@ -52,6 +52,8 @@ export function masterCellBuilder({
   const { View } = componentsMap;
   const elementsBuilder = dataAdapter(cellConfiguration);
 
+  // This is very expensive operation
+  // Keep calls to minimum
   const hasFocusableInside = hasFocusableInsideBuilder(elementsBuilder);
 
   /**
@@ -74,8 +76,8 @@ export function masterCellBuilder({
     const selectedState = screen?.selectedEntry;
 
     const entryIsSelected = React.useMemo(
-      () => selectedState?.id === item?.id,
-      [selectedState?.id]
+      () => !!(selectedState?.id && selectedState?.id === item?.id),
+      [selectedState?.id, item?.id]
     );
 
     const elements = React.useMemo(
@@ -84,7 +86,7 @@ export function masterCellBuilder({
           entry: item,
           state: getEntryState(state, entryIsSelected),
         }),
-      [state, item, entryIsSelected]
+      [state, item?.id, entryIsSelected] // Assuming that item won't mutate
     );
 
     const wrapperRef = React.useRef(null);

package/Components/NativeFocusables/{index.ts → index.js}

@@ -1,12 +1,10 @@
 import { requireNativeComponent, View } from "react-native";
 import { isAppleTV } from "@applicaster/zapp-react-native-ui-components/Helpers/Platform";
 
-// @TODO define the types
 export const FocusableGroupNative = isAppleTV()
-  ? requireNativeComponent<any>("FocusableGroupViewModule")
+  ? requireNativeComponent("FocusableGroupViewModule", null)
   : View;
 
-// @TODO define the types
 export const FocusableItemNative = isAppleTV()
-  ? requireNativeComponent<any>("FocusableViewModule")
+  ? requireNativeComponent("FocusableViewModule", null)
   : View;

package/Components/ScreenResolver/index.tsx

@@ -1,6 +1,5 @@
 import * as React from "react";
-import * as R from "ramda";
-import { useDispatch } from "react-redux";
+import { path, prop } from "ramda";
 import {
   findPluginByType,
   findPluginByIdentifier,
@@ -15,7 +14,6 @@ import { componentsLogger } from "../../Helpers/logger";
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { useScreenAnalytics } from "@applicaster/zapp-react-native-utils/analyticsUtils/helpers/hooks";
-import { setAppStateHasFinishedTransitioning } from "@applicaster/zapp-react-native-redux/appState";
 
 const logger = componentsLogger.addSubsystem("ScreenResolver");
 
@@ -54,11 +52,8 @@ export function ScreenResolverComponent(props: Props) {
 
   const [, setScreenContext] = ZappPipesScreenContext.useZappPipesContext();
 
-  const dispatch = useDispatch();
-
   React.useEffect(() => {
     setScreenContext(rivers[screenId]);
-    dispatch(setAppStateHasFinishedTransitioning());
   }, [screenId]);
 
   const ScreenPlugin =
@@ -100,14 +95,14 @@ export function ScreenResolverComponent(props: Props) {
   }
 
   const ScreenComponent =
-    R.path(["module", "Component"], ScreenPlugin) ||
-    R.prop("module", ScreenPlugin) ||
-    R.prop("Component", ScreenPlugin) ||
+    path(["module", "Component"], ScreenPlugin) ||
+    prop("module", ScreenPlugin) ||
+    prop("Component", ScreenPlugin) ||
     ScreenPlugin;
 
   const configuration =
-    R.prop("configuration", ScreenPlugin) ||
-    R.prop("__plugin_configuration", ScreenComponent);
+    prop("configuration", ScreenPlugin) ||
+    prop("__plugin_configuration", ScreenComponent);
 
   if (ScreenComponent) {
     return (

package/Components/Transitioner/Transitioner.tsx

@@ -166,21 +166,23 @@ export class TransitionerComponent extends React.PureComponent<Props, State> {
 
   transitionWithoutAnimation(resetState) {
     const { scenes } = this.state;
-
-    const newState = resetState
-      ? {
-          scenes: [prepareScene(this.props.children)],
-          to: {
-            index: 0,
-          },
-        }
-      : {
-          scenes: R.update(
-            scenes.length - 1,
-            prepareScene(this.props.children),
-            scenes
-          ),
-        };
+    const newScene = prepareScene(this.props.children);
+    const isLastSceneHook = scenes[scenes.length - 1].key.startsWith("/hook");
+
+    let newState;
+
+    if (resetState) {
+      newState = {
+        scenes: [newScene],
+        to: { index: 0 },
+      };
+    } else if (isLastSceneHook || scenes.length === 1) {
+      newState = { scenes: R.update(scenes.length - 1, newScene, scenes) };
+    } else {
+      newState = {
+        scenes: R.compose(R.tail, R.append(newScene))(scenes),
+      };
+    }
 
     this.setState(newState);
   }

package/Components/VideoLive/PlayerLiveImageComponent.tsx

@@ -2,7 +2,7 @@
 //
 import * as React from "react";
 
-import { AppState, AppStateStatus } from "react-native";
+import { AppState, AppStateStatus, View } from "react-native";
 import { TrackedView } from "../TrackedView";
 import { useDimensions } from "@applicaster/zapp-react-native-utils/reactHooks/layout";
 
@@ -25,8 +25,9 @@ import { PlayerRole } from "@applicaster/zapp-react-native-utils/appUtils/player
 import { getAutoplaySettings } from "./utils";
 import { isString } from "@applicaster/zapp-react-native-utils/stringUtils";
 import { BufferAnimation } from "../PlayerContainer/BufferAnimation";
+import { useEffect } from "react";
 
-const { log_error } = loggerLiveImageComponent;
+const { log_error, log_debug } = loggerLiveImageComponent;
 
 const isMeasurement = (item: ZappEntry) =>
   isString(item.id) && item.id.startsWith("pre-measurement-");
@@ -56,6 +57,7 @@ const PlayerLiveImageComponent = (props: Props) => {
   );
 
   const ref = React.useRef(null);
+  const trackViewRef = React.useRef(null);
 
   /**
    * Debounced setMode function.
@@ -86,6 +88,30 @@ const PlayerLiveImageComponent = (props: Props) => {
     [mode]
   );
 
+  const entryToViewIdMapping = React.useRef({});
+
+  useEffect(() => {
+    const nativeTag = trackViewRef.current?._nativeTag?.toString();
+
+    if (!nativeTag) {
+      return;
+    }
+
+    const prevValue = entryToViewIdMapping.current[nativeTag];
+
+    if (prevValue && prevValue.itemId !== item.id) {
+      if (mode === LiveImageType.Video) {
+        log_debug(
+          "Entry to view association changed, stopping current live image"
+        );
+
+        setMode(LiveImageType.Image);
+      }
+    }
+
+    entryToViewIdMapping.current[nativeTag] = { itemId: item.id };
+  }, [trackViewRef.current, item.id, mode]);
+
   const { screenConfig, playerPluginId } = props;
 
   const liveImageItem: LiveImage = React.useMemo(() => {
@@ -295,28 +321,30 @@ const PlayerLiveImageComponent = (props: Props) => {
       testId={`tracked-view-${playerId}-${item.title}`}
       onPositionUpdated={onPositionUpdated}
     >
-      {isVideoMode && (
-        <Player
-          autoplay={false}
-          ref={_assignRoot}
-          entry={item} // Must be passed first in list
-          style={videoStyles}
-          playerId={playerId}
-          muted={muted}
-          listener={controller?.getListener()}
-          resizeMode={"cover"}
-          {...platformSpecificProps}
-        />
-      )}
-      {
-        <AnimatedInOut
-          visible={isBackgroundImageVisible}
-          animationConfig={overlayFadeIn}
-          staticStyles={style}
-        >
-          <Image {...props} resizeMode="cover" style={style} applyMaxSize />
-        </AnimatedInOut>
-      }
+      <View ref={trackViewRef}>
+        {isVideoMode && (
+          <Player
+            autoplay={false}
+            ref={_assignRoot}
+            entry={item} // Must be passed first in list
+            style={videoStyles}
+            playerId={playerId}
+            muted={muted}
+            listener={controller?.getListener()}
+            resizeMode={"cover"}
+            {...platformSpecificProps}
+          />
+        )}
+        {
+          <AnimatedInOut
+            visible={isBackgroundImageVisible}
+            animationConfig={overlayFadeIn}
+            staticStyles={style}
+          >
+            <Image {...props} resizeMode="cover" style={style} applyMaxSize />
+          </AnimatedInOut>
+        }
+      </View>
     </TrackedView>
   );
 };

package/Components/VideoLive/__tests__/__snapshots__/PlayerLiveImageComponent.test.tsx.snap

@@ -5,33 +5,35 @@ exports[`PlayerLiveImageComponent should render correctly with default props 1`]
   onPositionUpdated={[Function]}
   testId="tracked-view-player1-Test"
 >
-  <View
-    collapsable={false}
-    style={
-      Object {
-        "opacity": 1,
-      }
-    }
-  >
-    <Image
-      applyMaxSize={true}
-      audioMutedByDefault={false}
-      imageKey="image1"
-      item={
+  <View>
+    <View
+      collapsable={false}
+      style={
         Object {
-          "id": "1",
-          "title": "Test",
-          "type": Object {
-            "value": "",
-          },
+          "opacity": 1,
         }
       }
-      onError={[Function]}
-      playerId="player1"
-      resizeMode="cover"
-      screenConfig={Object {}}
-      style={Object {}}
-    />
+    >
+      <Image
+        applyMaxSize={true}
+        audioMutedByDefault={false}
+        imageKey="image1"
+        item={
+          Object {
+            "id": "1",
+            "title": "Test",
+            "type": Object {
+              "value": "",
+            },
+          }
+        }
+        onError={[Function]}
+        playerId="player1"
+        resizeMode="cover"
+        screenConfig={Object {}}
+        style={Object {}}
+      />
+    </View>
   </View>
 </TrackedView>
 `;

package/Components/VideoModal/ModalAnimation/AnimatedScrollModal.tsx

@@ -349,7 +349,12 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
 };
 
 export const AnimatedScrollModal = ({ children }: Props) => {
-  const Component = !isTV() ? AnimatedScrollModalComponent : React.Fragment;
+  const {
+    videoModalState: { visible },
+  } = useNavigation();
+
+  const Component =
+    !isTV() && visible ? AnimatedScrollModalComponent : React.Fragment;
 
   return <Component>{children}</Component>;
 };

package/Components/VideoModal/ModalAnimation/AnimatedVideoPlayerComponent.tsx

@@ -155,7 +155,11 @@ export const AnimatedVideoPlayer = ({ children }: Props) => {
 };
 
 export const AnimatedVideoPlayerComponent = ({ children }: Props) => {
-  const Component = !isTV() ? AnimatedVideoPlayer : React.Fragment;
+  const {
+    videoModalState: { visible },
+  } = useNavigation();
+
+  const Component = !isTV() && visible ? AnimatedVideoPlayer : React.Fragment;
 
   return <Component>{children}</Component>;
 };

package/Components/VideoModal/__tests__/__snapshots__/PlayerWrapper.test.tsx.snap

@@ -72,12 +72,34 @@ exports[`PlayerWrapper renders inline 1`] = `
         testID="test-player-container"
       />
       <View
+        animationType="componentFade"
         style={
           Object {
             "flex": 1,
           }
         }
-      />
+      >
+        <View
+          configuration={
+            Object {
+              "tablet_landscape_player_container_background_color": "red",
+              "tablet_landscape_sidebar_width": "35%",
+            }
+          }
+          entry={
+            Object {
+              "id": "test",
+            }
+          }
+          isTabletLandscape={false}
+          style={
+            Object {
+              "flex": 1,
+              "paddingTop": 20,
+            }
+          }
+        />
+      </View>
     </View>
   </RNCSafeAreaView>
 </RNCSafeAreaProvider>
@@ -158,6 +180,7 @@ exports[`PlayerWrapper renders inline and docked 1`] = `
         style={
           Object {
             "flex": 1,
+            "paddingTop": 20,
           }
         }
       />
@@ -254,12 +277,34 @@ exports[`PlayerWrapper renders inline on tablet in landscape orientation 1`] = `
         />
       </View>
       <View
+        animationType="componentFade"
         style={
           Object {
             "flex": 1,
           }
         }
-      />
+      >
+        <View
+          configuration={
+            Object {
+              "tablet_landscape_player_container_background_color": "red",
+              "tablet_landscape_sidebar_width": "35%",
+            }
+          }
+          entry={
+            Object {
+              "id": "test",
+            }
+          }
+          isTabletLandscape={true}
+          style={
+            Object {
+              "flex": 1,
+              "paddingTop": 20,
+            }
+          }
+        />
+      </View>
     </View>
   </RNCSafeAreaView>
 </RNCSafeAreaProvider>
@@ -340,6 +385,7 @@ exports[`PlayerWrapper renders properly 1`] = `
         style={
           Object {
             "flex": 1,
+            "paddingTop": 20,
           }
         }
       />

package/Components/default-cell-renderer/__tests__/__snapshots__/defaultCellRenderer.test.tsx.snap

@@ -16,9 +16,9 @@ exports[`DefaultCellRenderer returns a react component and it renders correctly
     store={null}
     style={
       Object {
-        "backgroundColor": "#CCC",
+        "backgroundColor": "transparent",
         "margin": 12,
-        "opacity": 0.6,
+        "opacity": 1,
         "width": 169,
       }
     }
@@ -105,7 +105,7 @@ exports[`DefaultCellRenderer returns a react component for LG TVs 1`] = `
       store={null}
       style={
         Object {
-          "backgroundColor": "rgba(252,70,27,1.0)",
+          "backgroundColor": "rgba(47,47,47,1.0)",
           "borderRadius": 4,
           "flex": 1,
           "overflow": "hidden",
@@ -238,7 +238,7 @@ exports[`DefaultCellRenderer returns a react component for Samsung TVs 1`] = `
       store={null}
       style={
         Object {
-          "backgroundColor": "rgba(252,70,27,1.0)",
+          "backgroundColor": "rgba(47,47,47,1.0)",
           "borderRadius": 4,
           "flex": 1,
           "overflow": "hidden",

package/Decorators/Analytics/{index.tsx → index.js}

@@ -5,18 +5,18 @@ import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 
 type ComponentProps = {
   component: {
-    id: string;
-    rules: { item_limit: number; component_cells_selectable: boolean };
-    component_type: string;
+    id: string,
+    rules: { item_limit: number, component_cells_selectable: boolean },
+    component_type: string,
     styles: {
-      cell_style: string;
-      header: { visible: boolean };
-      component_cells_selectable: boolean;
-    };
-  };
-  zappPipesData: { url: string; data: { title: string } };
-  selected: boolean;
-  assets: { menu_button: string };
+      cell_style: string,
+      header: { visible: boolean },
+      component_cells_selectable: boolean,
+    },
+  },
+  zappPipesData: { url: string, data: { title: string } },
+  selected: boolean,
+  assets: { menu_button: string },
 };
 
 function withAnalytics(Component) {

package/README.md

@@ -78,6 +78,17 @@ export default MyAwesomeComponent;
 export { MyAwesomeComponent } from "./MyAwesomeComponent";
 ```
 
+We provide flow types for component props - please use it to make sure your component will be compliant
+
+```javascript
+import * as React from "react";
+import type { ZappComponentProps } from "../../flow-types"; // in the root of the project
+
+export class MyComponent extends React.Component<ZappComponentProps> {
+  /* ... */
+}
+```
+
 ## Connecting my component to Zapp Pipes
 
 Zapp App components rely on [Zapp-Pipes](https://github.com/applicaster/zapp-pipes) to load data.
@@ -89,9 +100,10 @@ In order to connect your component to ZappPipes, you simply need to use the `Zap
 import * as React from "react";
 import { View, Text } from "react-native";
 import { zappPipesDataConnector } from "../ZappPipesDataConnector";
+import type { ZappComponentProps } from "../../flow-types";
 
 @zappPipesDataConnector
-export class MyComponent extends React.Component {
+export class MyComponent extends React.Component<ZappComponentProps> {
   renderComponent = (data) => {
     return (
       <View>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "12.0.0-alpha.4043183114",
+  "version": "12.0.0-alpha.4155487673",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -34,10 +34,10 @@
     "redux-mock-store": "^1.5.3"
   },
   "dependencies": {
-    "@applicaster/applicaster-types": "12.0.0-alpha.4043183114",
-    "@applicaster/zapp-react-native-bridge": "12.0.0-alpha.4043183114",
-    "@applicaster/zapp-react-native-redux": "12.0.0-alpha.4043183114",
-    "@applicaster/zapp-react-native-utils": "12.0.0-alpha.4043183114",
+    "@applicaster/applicaster-types": "12.0.0-alpha.4155487673",
+    "@applicaster/zapp-react-native-bridge": "12.0.0-alpha.4155487673",
+    "@applicaster/zapp-react-native-redux": "12.0.0-alpha.4155487673",
+    "@applicaster/zapp-react-native-utils": "12.0.0-alpha.4155487673",
     "promise": "^8.3.0",
     "react-router-native": "^5.1.2",
     "url": "^0.11.0",