Quick Brick Utilities

Here are the main utilities available in @applicaster/zapp-react-native-utils. they are not necessarily related to the QuickBrick apps, but provide useful functionality that may be missing from most of the support libraries used



Shifts an array by the given offset. a negative offset will take items from the end of the array and add them at the beginning, while a positive offset will take an item at the beginning and shift it to the end

import { shiftArray } from "@applicaster/zapp-react-native-utils/arrayUtils";
shiftArray(-1, [1,2,3,4]) => [4, 1, 2, 3]
shiftArray(1, [1,2,3,4]) => [2, 3, 4, 1]

An offset of 0 leaves the array unchanged. This function returns a new array and doesn't mutate the original one. Curried function which can be invoked like offset => array => result

  • @param {Number} offset offset to shift the array
  • @param {[any]} array array to shift
  • @returns {[any]}


Tries to remove an item from an array, and returns the array if the item is not found. This function returns a new array and mutate the original array

import { removeItemFromList } from "@applicaster/zapp-react-native-utils/arrayUtils";
const filteredList = removeItemFromList(item, list);


These utilities are only relevant for the web-based platforms (Samsung & LG TV);


returns cookes set in the html document object.

import { getCookies } from "@applicaster/zapp-react-native-utils/domUtils/cookesManager";
const cookes = getCookies();


sets cookies in the html document.

import { setCookies } from "@applicaster/zapp-react-native-utils/domUtils/cookesManager";
setCookies({ foo: "bar" }):



debounces or throttles a function call.

import { debounce } from "@applicaster/zapp-react-native-utils/functionUtils";
type DebounceFunctionOptions = {
fn: (...any) => void;
wait: number; // default 200ms
immediate: boolean; // default to true,
context: any;
const options = {
fn: () => {}, // function do debounce
wait: 200, // duration of debounce / throttle in ms
immediate: true, // if true, will call the function instantly and then wait
context: this, // function call will be bound to this
const debouncedFunction = debounce(options);
setInterval(() => {
}, 10);
// function will rune once immediately, then only once every 200ms


this function does nothing. Simply a shorthand for () => {}

import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
// see ? nothing happened


tells wether the provided argument is a function

import { isFunction } from "@applicaster/zapp-react-native-utils/functionUtils";
function func() {}
const obj = {
fn: () => {},
class Obj {
method() {}
const object = new Obj();
isFunction(null); // false
isFunction("foo"); // false
isFunction(func); // true
isfunction(obj.fn); // true
isFunction(object.method); // true
isFunction(() => {}); // true


This function allows to add the ability to subsribe & trigger events on any object. it attaches the functionality on the provided object.

This is the method used to wrap most of our managers with the ability to invoke events & listen to them. all the methods return the provided object, which allows to chain calls.

import { subscriber } from "@applicaster/zapp-react-native-utils/functionUtils";
const manager = subscriber({
foo: "bar",
hello() {
console.log("hi !");
const someEventHandler = (flag, prop) => {
// handle event
const someOtherHandler = (...args) => {
/* ... */
.on("some_event_name", someEventhandler)
.on("some_other_event", someOtherHandler);
// when invoking an event, all but the first arguments are passed to the handler
manager.invokeHandler("some_event_name", true, "some prop");
.removeHandler("some_event_name", someEventHandler)
.removeHandler("some_other_event", someOtherHandler);
// it retains the properties passed initially
manager.foo; // => "bar"
manager.hello(); // "Hi" !


will try to parse a json string, return the object if it succeeds, or the initial argument otherwise

import { parseJsonIfNeeded } from "@applicaster/zapp-react-native-utils/functionUtils";
// both of these will return the same thing
parseJsonIfNeeded({ foo: "bar" });
parseJsonIfNeeded('{foo: "bar"}');


Will map over an array with a promise, and return a promise which will resolve when all of the promises resolve

import { mapAsync } from "@applicaster/zapp-react-native-utils/functionUtils";
const fetchUrl = async (url) => {
const response = await fetch(url);
return response.json();
const urls = ["https://foo.com/api", "https://bar.com/api"];
const result = await mapAsync(fetchUrl, urls);
const sameResult = await mapAsync(fetchUrl)(urls);



filters an object, allowing to access keys & values. The function is curried.

import { filterObj } from "@appicaster/zapp-react-native-utils/objectUtils";
const obj = { foo: "bar", bar: "baz", meaningOfLife: 42 };
const predicate = (key, value) => key !== "bar" && value !== "bar";
const theAnswer = filterObj(predicate, obj);
const theSameAnswer = filterObj(predicate)(obj);


this function will map over the keys of an object

import { mapKeys } from "@applicaster/zapp-react-native-utils";
const obj = {
foo: "bar",
bar: "baz",
const result = mapKeys((key) => key.toUpperCase(), obj);
FOO: "bar",
BAR: "baz"


This parses recursively two javascript objects and returns the diffs between these two objects.


All these utilities import from there

import { [functionName] } from "@applicaster/zapp-react-native-utils/reactUtils";


returns true if the platform is a web based platform (samsung, LG)


return true if the platform is a TV platform (samsung, LG, tvos, android TV, amazon fire)


returns the current platform, using React Native's Platform module. But unline the React Native module, this will return specifically tvos, android_tv when relevant, instead of simply returning ios or android


returns the react environment for the current app. Will return native for iOS, android, android TV, amazon fire, and tvOS, and web for the web-based platforms


Wrapper around React Native Platform.select to include the variants relevant for QuickBrick apps.

// by platform
const someVal = platformSelect({
ios: "foo",
android: "foo",
android_tv: "foo",
tvos: "foo",
samsung_tv: "foo",
lg_tv: "foo",
// by environment
const someVal = platformSelect({
native: "foo", // will apply to all native platforms
web: "foo", // will apply to all web based platforms
// supports defaults if you don't want to set all values
const someVal = platformSelect({
android_tv: "specific value for android TV",
default: "all the other platforms",


all these utilities are imported from

import { [functionName] } from "@applicaster/zapp-react-native-utils/stringUtils";


Returns a new string where the first character is uppercase


Changes a string in sentence case to camelCase


Changes a string in sentence case to PascalCase


Encodes a string to base64, using a polyfll for node.js Buffer module


Decodes a base64 string, using a polyfll for node.js Buffer module


creates a unique id with the form "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx" and unique random characters


allows to leverage handlebars parser to inject an object properties into a string with handlebars syntax

import { inflateString } from "@applicaster/zapp-react-native-utils/stringUtils";
const object = {
vars: "variables",
const template = "this is a template string with {{ vars }} inside";
const result = inflateString({ string: template, data: object });
// separators can be changed
const template2 = "this is a template with custom <% seps %>";
const object2 = {
seps: "separators",
const result = inflateString({
string: template2,
data: object2,
separators: { start: "<%", end: "%>" },
// works with nested properties too
const result = inflateString({
string: "allows for {{ deep.nested }} props",
data: { deep: { nested: "deeply nested" } },



Hex color codes provided by Zapp have the alpha layer at the start #AARRGGBB instead of having it at the end as React Native expectes #RRGGBBAA

this utilities allows to transform the color so that it looks as expected

import { fixColorHexCode } from "@applicaster/zapp-react-native-utils/styleUtils";
const correctColor = fixColorHexCode("#FFE7E7E7");
// => #E7E7E7FF


This function will return a key-value pair object mapping a plugin manifest configuration keys with their expected default values from the plugin configuration

import { parseDefaultStyles } from "@applicaster/zapp-react-native-utils/styleUtils";
const defaults = parseDefaultStyles(require("../manifest.json").styles.fields);


This function will parse a plugin or screen configuration coming from zapp, sanitizes the results (numbers cast to number, booleans with proper true / false, etc) and apply defaults when property is missing or invalid. Can be used as a curried function

import { populateConfigurationValues } from "@applicaster/zapp-react-native-utils/styleUtils";
const config = populateConfigurationValues(