React Native Zapp Bridge

A React Native package that includes bridging from React Native to Applicaster Zapp Platform native framework.

Please Read before you contribute

Commit messages are strictly enforced in this pattern:

type(scope?): subject
body?
footer?

Types can be one of the following: [build, chore, ci, docs, feat, fix, perf, refactor, revert, style, test][type-enum]

Continuous deployment

Deployment is automated by Semantic Release. When PRs are merged to master Semantic Release will analyse the commit log, increment version, tag a release and publish directly to public NPM.

Features

React-Native-Zapp-Bridge is a util package that enable you to:

1. Analytics - use sendAnalyticEvent to send an analytics event throw Zapp Morpheus (Zapp Analytics Manager).

2. Video Player - use APVideoPlayer to add a video player to your React-Native screen, this will add the chosen pluggable player on the Zapp Platform.

3. Zapp login - methods for logging in users and checking their login status

4. Data source plugin - This class helps you to interact with the DS plugin. Use DataSourceService to make http request from DS plugin (DS plugin returns Atom model as result).

5. Zapp player - methods for playing videos fullscreen

6. reminders - An API for adding, removing & checking status of program reminders.

7. navigation - An API for navigating within Zapp apps.

8. withZapp - A React Native HoC for parsing plugin properties making them consistent across platforms.

9. Zapp Plugin - An API for getting information about plugin

Installation

$ npm install --save applicaster/react-native-zapp-bridge

Usage

Analytics

1. import:

1import { sendAnalyticEvent } from 'react-native-zapp-bridge';

2. send event:

1sendAnalyticEvent(`Your Screen Name`, {
2    param: value,
3  })
4    .then(console.log)
5    .catch(console.warn);
6}

Video Player

1. import:

1import { APVideoPlayer } from 'react-native-zapp-bridge';

2. create your video view:

1  const streamUrl = `your_stream_url`
2  const style = {
3    backgroundColor: '#ffffff'
4  }
5  const maxWidth = 200;
6  const src = {
7    type: Platform.OS === 'android' ? 'vod' : 'url',
8    object: {
9      id: `your_item_id`,
10      name: `your_item_title`,
11      thumbnail_url: `your_item_image_url`
12      stream_url: streamUrl,
13    },
14    player_configuration: {
15      inline_player_should_auto_mute: true,
16    },
17  };
18
19  // Example
20  const onChange = event => {
21    event.persist();
22
23    if (event.nativeEvent.eventName === 'onVideoEnd') {
24      this.playNextVideo()
25    }
26  };
27
28  /*
29  List of events you can receive from onChange
30
31  onVideoEnd
32  playerRemoved
33
34  */
35
36
37  return <APVideoPlayer {...{ src, maxwidth, style }} onChange={onChange}/>;

3. onChange callback prop

The onchange callback occurs when a native event of the video has been changed, it returns an object with the event information.

Support events

Native Event	Description
onVideoEnd	The ended event occurs when the video has reached the end.
playerRemoved	The playerRemoved occurs when the player is unmounted.

Data Source Plugin

1. import:

1import { ZappPipesService } from 'react-native-zapp-bridge';

2. make a request:

1ZappPipesService.getDataSourceData(`Url To Load From DS Plugin`)
2    .then(content)
3    .catch(error);
4}

Zapp login

1. import:

1import { NativeModules } from 'react-native';

2. check if user is logged in

1NativeModules.ZappLogin.isUserLoggedIn();

Returns: Promise - resolves: { isUserLoggedIn: bool }

3. login user

1NativeModules.ZappLogin.login(additionalParams);

parameters: additionalParams: Object - can be empty. This parameter is being delieved as the additionalParams to the native login method. So any values in this object will be available to the receiver login plugin.

Returns: Promise - resolves: { isUserLoggedIn: bool }

4. get user token

1NativeModules.ZappLogin.getUserToken();

Returns: Promise - resolves: { token: string }

5. check if user is authorized.

Unlike the login check - this can be used to check if user is authorized to play some content or check entitlements beyond just the login itself.

1NativeModules.ZappLogin.isUserAuthorized(additionalParams);

parameters: additionalParams: Object - can be empty. This parameter is being delieved as the additionalParams to the native authorization check method. So any values in this object will be available to the receiver login plugin.

Returns: Promise - resolves: { authorized: bool }

Zapp player

1. import:

1import { NativeModules } from 'react-native';

2. call player

1NativeModules.ZappPlayer.playFullScreen(type, playable, configuration);

parameters: type: String playable: Object configuration: Object - can be empty

Supported values for configuration keys:

• configuration['custom_configuration'] - This value is being delivered to the player plug as the player configuration dictionary.

Returns: Promise - resolves: true

Reminders

1. import:

1import { reminders } from 'react-native-zapp-bridge';

2. methods:

reminders.addReminder({
  id: PROGRAM_ID_STR,
  channel_id: CHANNEL_ID_STR,
  starts_at: '2016-12-20T14:00:00+00:00',
  ends_at: '2016-12-20T15:00:00+00:00',
  name: PROGRAM_NAME_STR
}).then(PROGRAM_ID_STR => {
  // success
});
reminders.removeReminder(PROGRAM_ID_STR).then(PROGRAM_ID_STR => {
  // success
});
reminders.hasReminder(PROGRAM_ID_STR).then(RESULT_BOOL => {
  // success
});
reminders.checkReminders(PROGRAM_ID_STR_ARR).then(RESULT_OBJ => {
  // success
  // result object should look like:
  // { PROGRAM_ID: REMINDER_SET_BOOL, ... }
});

Navigation

1. import:

1import { navigation } from 'react-native-zapp-bridge';

2. methods:

closeModalScreen

extraParams available in iOS only

• @type {('push' string)} animation_type - Allowed animation types**
• @param {object} [extraParams = {} ] - An extra params.
• @param {bool*} [extraParams.animated = 1] - If close action should be animated.
• @param {string} [extraParams.animation_type = undefined] - Close animation typr.

* bool in this scope represents 0 or 1;
** `push` present push close animation, any other string uses modal animation.

1navigation.closeModalScreen(extraParams);

openInternalURL

• @param {string} urlscheme - UrlScheme for your app
• @param {Object} params - configuration params this will be appended to the url as an arguments;
• @param {('present'|'push'|'presentNoNavigation'|'pushNoNavigation'|'asAChild')} params.presentation - How screen should be presented.
• @param {string} params.plugin - Plugin name (name fild from the manifest)
• @param {string} params.bundle - s3 folder name /react-native-bundles/yourName/Rn_version.
• @param {any} reactProps[nameofTheProp] - this will be injected to the RN instance inside props.extra_props ...

navigation.openInternalURL(urlscheme, params);

withZapp

1. import:

1import { withZapp } from 'react-native-zapp-bridge';

2. usage:

1// in the entry point to the plugin import the root of your app
2import App from './src/App';
3
4// Augment your app with Zapp for consistent props to be passed cross platform
5const AppWithZapp = withZapp(App);
6
7const RNRoot = props => <AppWithZapp {...props} />;
8
9// Module name
10AppRegistry.registerComponent('RNRoot', () => RNRoot);

Zapp Plugin

1. import:

1import { NativeModules } from 'react-native';
2const { ZappPlugin } = NativeModules;

2. methods:

ZappPlugin.getConfiguration(PLUGIN_IDENTIFIER).then(PLUGIN_CONFIGURATION => {
    // success
});