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

arrayUtils

shiftArray

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]}

removeItemFromList

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);

domUtils

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

getCookies

returns cookes set in the html document object.

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

setCookies

sets cookies in the html document.

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

functionUtils

debounce

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(() => {
debouncedFunction();
}, 10);
// function will rune once immediately, then only once every 200ms

noop

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

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

isFunction

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

subscriber

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) => {
/* ... */
};
manager
.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");
manager
.removeHandler("some_event_name", someEventHandler)
.removeHandler("some_other_event", someOtherHandler);
// it retains the properties passed initially
manager.foo; // => "bar"
manager.hello(); // "Hi" !

parseJsonIfNeeded

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"}');

mapAsync

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);

objectUtils

filterObj

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);

mapKeys

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"
}
*/

objectDiff

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

reactUtils

All these utilities import from there

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

isWeb

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

isTV

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

getPlatform

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

getEnvironment

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

platformSelect

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",
});

stringUtils

all these utilities are imported from

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

capitalize

Returns a new string where the first character is uppercase

toCamelCase

Changes a string in sentence case to camelCase

toPascalCase

Changes a string in sentence case to PascalCase

to64

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

from64

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

createUUID

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

inflateString

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" } },
});

styleUtils

fixColorHexCode

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

parseDefaultStyles

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);

populateConfigurationValues

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(
require("../manifest.json").styles.fields,
pluginConfiguration.styles
);