This component opens embeded PowerBI reports. It uses the WebView on Android and the WKWebView on iOS the display them.
$ 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.
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"
/>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"
/>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}
/>- More layout options
- Event communication from PowerBI to component