npm package: @maestro_io/mobile_sdk
Description: The Maestro Mobile SDK is a collection of React Native components that allow you to embed portions or all of Maestro into your own mobile application.
Latest version: 0.0.227

# Maestro Mobile SDK

The Maestro Mobile SDK is a collection of React Native components that
allow you to embed portions or all of Maestro into your own mobile application.

## Installation

Using npm:

```bash
npm install --save @maestro_io/mobile_sdk @precor/web-api-bridge @react-native-community/async-storage @react-native-community/clipboard @react-native-community/masked-view @react-native-firebase/app @react-native-firebase/database react-native-gesture-handler react-native-get-random-values react-native-linear-gradient react-native-modal react-native-progress react-native-safe-area-context react-native-screens react-native-vector-icons react-native-video react-native-webview@8.1.2
```

or using yarn:

```bash
yarn add @maestro_io/mobile_sdk @precor/web-api-bridge @react-native-community/async-storage @react-native-community/clipboard @react-native-community/masked-view @react-native-firebase/app @react-native-firebase/database react-native-gesture-handler react-native-get-random-values react-native-linear-gradient react-native-modal react-native-progress react-native-safe-area-context react-native-screens react-native-vector-icons react-native-video react-native-webview@8.1.2
```

### Android installation

#### Add this line in your android/app/build.gradle to make vector icons work

```gradle
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
```

#### Add `multiDexEnabled true` app/build.grandle to enable multidex

```
    defaultConfig {
        + multiDexEnabled true
        applicationId "com.myapp"
        minSdkVersion rootProject.ext.minSdkVersion
        targetSdkVersion rootProject.ext.targetSdkVersion
        versionCode 1
        versionName "1.0"
    }

```

#### Adding fireabse

First, place google-services.json inside of your project at the following location: /android/app/google-services.json.
Then, add the google-services plugin as a dependency inside of your /android/build.gradle file:

```
buildscript {
  dependencies {
    // ... other dependencies
    classpath 'com.google.gms:google-services:4.2.0'
    // Add me --- /\
  }
}
```

Lastly, execute the plugin by adding the following to the very bottom of your /android/app/build.gradle file:

```
apply plugin: 'com.google.gms.google-services'
```

[Read more about firebase for android](https://rnfirebase.io/#configure-firebase-with-android-credentials)

- To make react native video works run the next command

```
react-native link react-native-video
```

### IOS installation

#### Go to ios and run

```bash
  pod install
```

#### Put your GoogleService-Info.plist file into your xcode project.

[Read more about firebase for IOS](https://rnfirebase.io/#generating-ios-credentials)

## Setup

Befor start to use these components you need no wrap your app with `MaestroMobileSdkProvider` and pass your siteId through props

#### Example

```tsx
const SITE_ID = "site-id";
const App = () => {
  return (
    <MaestroMobileSdkProvider siteId={SITE_ID}>
      <MyAppContent />
    </MaestroMobileSdkProvider>
  );
};
```

### Components

#### ChannelSelect

Displays all channels availables to select then you can catch which one was selected through events

[read more](https://github.com/lessthan3/SDK/blob/feature/sdk-refresh/app/components/channel-select/README.MD)

<img src="https://user-images.githubusercontent.com/21212247/83314151-41f6fb80-a1d6-11ea-8f6b-01d59371309e.gif" width="300"  />

#### EmbedPanels

Shows the panels based on the page slug you have selected

[read more](https://github.com/lessthan3/SDK/blob/feature/sdk-refresh/app/components/embed-panels/README.md)

<img  src="https://user-images.githubusercontent.com/21212247/83314933-03fbd680-a1da-11ea-98ee-26276c3d406b.gif"  width="300"  />

#### Header

It contains the action buttons such Login, open channel select, open navbar select and when the logo is pressed.

[read more](https://github.com/lessthan3/SDK/blob/feature/sdk-refresh/app/components/header/README.md)

<img  src="https://user-images.githubusercontent.com/21212247/83314154-458a8280-a1d6-11ea-97ba-24f41e951016.gif"  width="300"  />

#### LoginModal

Displays the loginForm based on your site and then you will be able to know if the user is authenticated or not.

[read more](https://github.com/lessthan3/SDK/blob/feature/sdk-refresh/app/components/login-modal/README.MD)

<img  src="https://user-images.githubusercontent.com/21212247/83314096-0ceaa900-a1d6-11ea-98e2-a47f6bf8036d.gif"  width="300"  />

#### NavBar

Contains all nav bar items so you can select one and then you will get what nav item was selected, url and its name.

[read more](https://github.com/lessthan3/SDK/blob/feature/sdk-refresh/app/components/nav-bar/README.md)

<img  src="https://user-images.githubusercontent.com/21212247/83314109-13792080-a1d6-11ea-87d2-9e645d877a2f.gif"  width="300"  />

#### Page

It is going to show playlist, video row or different things depending of id you pass by props. Also it receive a callback when it request to change to another page and if the user press a video item so you will be able to start the video using `VideoPlayerCollapse`

[read more](https://github.com/lessthan3/SDK/blob/feature/sdk-refresh/app/components/page/README.md)

<img  src="https://user-images.githubusercontent.com/21212247/83314129-2855b400-a1d6-11ea-8cfc-85305c325e23.gif"  width="300"  />

#### UserModal

It shows the settings about the current user loged it and its logout button.

[read more](https://github.com/lessthan3/SDK/blob/feature/sdk-refresh/app/components/user-modal/README.MD)

<img  src="https://user-images.githubusercontent.com/21212247/83314134-2c81d180-a1d6-11ea-8784-31c80abf6c49.gif"  width="300"  />

#### VideoPlayerCollapse

It shows the video with depending of the `VideoItem` provided by `Page`

[read more](https://github.com/lessthan3/SDK/blob/feature/sdk-refresh/app/components/video-player-collapse/README.MD)

<img  src="https://user-images.githubusercontent.com/21212247/83314102-0f4d0300-a1d6-11ea-96a2-d74a3501029f.gif"  width="300"  />

[read]: https://precor.github.io/web-api-bridge/docs/WEBAPIBRIDGE.html
[click here]: https://precor.github.io/web-api-bridge/docs/WEBAPIBRIDGE.html