/react-native-powerbi

PowerBI Embed for React Native

Primary LanguageJavaScriptMIT LicenseMIT

PowerBI Embed for React Native

This component opens embeded PowerBI reports. It uses the WebView on Android and the WKWebView on iOS the display them.

Installation

$ npm install --save react-native-powerbi

The solution depends on react-native-wkwebview-reborn for iOS, please refer to them if you have any troubles on iOS with linkink.

Usage

import PowerBIEmbed from 'react-native-powerbi';

For a report to display you need at least three parts: AccessToken, Embed URL and the ID of the report. (these can be obtained thru the rest api)

<PowerBIEmbed
  accessToken="H4sIAAAAAAAEACVW...NH8v_8HNiWyTi4LAAA="
  embedUrl="https://app.powerbi.com/reportEmbed?reportId=bac25fa7-d58d-40b6-8b01-606d165c3b43&groupId=be8908da-da25-452e-b220-163f52476cdd"
  id="bac25fa7-d58d-40b6-8b01-606d165c3b43"
/>

Language

You can also pass the language the report must use

<PowerBIEmbed
  accessToken="H4sIAAAAAAAEACVW...NH8v_8HNiWyTi4LAAA="
  embedUrl="https://app.powerbi.com/reportEmbed?reportId=bac25fa7-d58d-40b6-8b01-606d165c3b43&groupId=be8908da-da25-452e-b220-163f52476cdd"
  id="bac25fa7-d58d-40b6-8b01-606d165c3b43"
  language="en"
/>

Embed configuration

You can pass your own configuration object from the PowerBI JS library

const config = {
      type: 'report',
      tokenType: 1,
      accessToken: "H4sIAAAAAAAEACVW...NH8v_8HNiWyTi4LAAA=",
      embedUrl: "https://app.powerbi.com/reportEmbed?reportId=bac25fa7-d58d-40b6-8b01-606d165c3b43&groupId=be8908da-da25-452e-b220-163f52476cdd",
      id: "bac25fa7-d58d-40b6-8b01-606d165c3b43",
      settings: {
        filterPaneEnabled: false,
        navContentPaneEnabled: true,
      },
    }

    <PowerBIEmbed
      embedConfiguration={config}
    />

Roadmap / todo

  • More layout options
  • Event communication from PowerBI to component

Authors