Quick Brick Core Components

React Components

River

the River component is the implementation of the general_content screen in Zapp. Usually it is not needed to use this component directly, but if you want to leverage a screen and render it in another screen or plugin, you can use the River component

Props

  • riverId (string): id of the screen to present
  • groupId (?string): id of the parent focusable group if relevant (useful on TV platforms to properly handle focus)
  • feedUrl (?string): url of the feed to use as source for the river screen

Example

import { River } from "@applicaster/zapp-react-native-ui-components/Components/River";
function MyComponent(props) {
return <River riverId={riverId} />;
}

ComponentsMap

Maps ui components declared in a Zapp screen or group from the layout.json, and render the content. This is used internally by the River component, but it can be useful in some scenarios to use the ComponentsMap component directly

Props

  • riverComponents ([ZappUIComponents]): ui components to render in the river. comes from layout.json provided by zapp
  • groupId (?string): id of the parent focusable group if relevant (useful on TV platforms to properly handle focus)
  • feed (?ZappFeed): optional feed to use as input for the rendering of the components

Example

import { ComponentsMap } from "@applicaster/zapp-react-native-ui-components/Components/River/ComponentsMap";
function MyComponent(props) {
return <ComponentsMap riverComponents={riverComponents} />;
}

SafeAreaView

This component extends the SafeAreaView component provided by React Native to properly work on android devices with Notches and pinhole cameras. On iOS, it proxies the React Native SafeAreaView component which behaves as expected with all devices.

Props

this component extends React Native's View props

Example

import { SafeAreaView } from "@applicaster/zapp-react-native-ui-components/Components/SafeAreaView";
export function MyComponent(props) {
return <SafeAreaView {...viewProps}>{/* ... */}</SafeAreaView>;
}

Touchable

The Touchable component extends React Native's Touchable component by assigning the relevant props we are using for our automated tests (accessibility ID, testID, etc)

Props

extends TouchableOpacityProps from React Native

  • testID (string): test ID to use in our test infrastructure

Example

import { Touchable } from "@applicaster/zapp-react-native-ui-components/Components/Touchable";
export function MyComponent(props) {
return (
<Touchable
testID="touchable-1"
onPress={() => {
console.log("click me "!);
}}
>
{/* ... */}
</Touchable>
);
}

FeedLoader

This component can be used to retrieve a the content of a feed. This functionality is also available as a hook, which would be the preferred approach if you are using a functional component.

Props

  • feedUrl (string): url of the feed to load
  • children ((ZappFeed) => React.Node): render function which will be invoked with the loaded feed
  • onFeedLoader (?(ZappFEed) => void): optional callback invoked when the feed is loaded
  • onError (?(error) => void): optional error callback invoked if loading of the feed fails

Example

import { FeedLoader } from "@applicaster/zapp-react-native-ui-component/Components/FeedLoader";
export function MyComponent(props) {
return (
<FeedLoader
feedUrl={feedUrl}
onError={(error) => {
console.error("oups", { error });
}}
onFeedLoaded={(feed) => console.log("feed is loaded");}
>
{(feed) => {
if (feed) {
return /* ... */;
}
}}
</FeedLoader>
);
}

Decorators

The functionality of the decorators below can be achieved with our react hooks. However, if you need to use a class component for some reason, you will be able to achieve similar functionality with these decorators

WithNavigator

Will inject the navigator object in the provided component's props

Signature

  • Component (React.FC | React.classComponent): React component to decorate.

Example

import { withNavigator } from "@applicaster/zapp-react-native-ui-components/Decorators/Navigator";
export const MyComponent = withNavigator((props) => {
const { navigator } = this.props;
/* ... */
});

WithAnalytics

Injects functions to send analytic events

Signature

  • Component (React.FC | React.classComponent): React component to decorate.

Example

import { withAnalytics } from "@applicaster/zapp-react-native-ui-components/Decorators/Analytics";
export const MyComponent = withAnalytics((props) => {
const {
sendOnClickEvent,
sendMenuClickEvent,
sendMenuToggleEvent,
sendBackButtonClickEvent,
sendOnNavItemClickEvent,
sendHeaderClickEvent,
sendHardwareBackButtonClickEvent,
sendScreenEvent,
sendVideoItemPlayStartTimedEvent,
sendVideoItemPlayStopTimedEvent,
sendVideoItemPlayEvent,
} = props;
/* ... */
});

connectToStore

This decorator is a proxy of react-redux's connect function and automatically binds actions with redux's bindActionCreator function. it also provides redux's dispatch function for the component

Signature

  • mapStateToProps ((ReduxState) => { [string]: any }): function invoked with the redux state, which should return the props you want to inject in the decorated component. Works well with Ramda's pick function
  • actions (?{[string]: ReduxAction}): optional map of redux actions to inject into the component as props. these actions will be bound to the component with redux's bindActionCreator

Example

import { connectToStore } from "@applicaster/zapp-react-native-redux";
import { loadPipesData } from "@applicaster/zapp-react-native-redux/ZappPipes";
const storeConnector = connectToStore((state) => ({ plugins: state.plugins }), {
loadPipesData,
});
export const myComponent = storeConnector((props) => {
const { plugins, loadPipesData, dispatch } = props;
/* ... */
});