Integration with React Native

This tutorial will help you integrate Flexmonster with the React Native framework.

Prerequisites

• Node.js

Run a sample React Native project from GitHub

Step 1. To get our sample project, download it as ZIP or clone it with the following commands:

git clone https://github.com/flexmonster/pivot-react-native
cd pivot-react-native 

Step 2. Install the npm dependencies described in package.json:

npm install

If the above command fails, run it with the --force flag:

npm install --force

Step 3. If you are using React 17 or earlier, change the last two lines of code in the component/PivotTable.js file:

• Uncomment the following line:
  

  //export { PivotTable as PivotTableComponent };

• Comment the line below:
  

  export var PivotTableComponent = React.forwardRef((props, ref) => <PivotTable />);

Step 4. Run the sample project from the console:

npx expo start

To shut down the project from the console, press Ctrl + C (Control + C on macOS).

Note If you get an error at this step, refer to the troubleshooting section.

Usage examples

The sample project contains several examples of using Flexmonster methods and events in React Native:

• When initialized, the component is subscribed to the cellclick event. As a cell is clicked for the first time, the cellclick's handler is removed, and the component subscribes to the update event.
• The application also has two buttons: Show chart and Show grid. The Show chart button switches to the charts view using the showCharts() method. Show grid uses the showGrid() method to switch to the grid view.

Learn more about using methods and events in this section.

Integrate Flexmonster into a React Native application

Follow the steps below to integrate Flexmonster into a React Native project.

Step 1. (optional) Create a React Native project

Skip this step if you already have a React Native project.

Create a React Native project by running the following commands in the console:

npx create-expo-app my-app --template blank
cd my-app

Step 2. Get Flexmonster

To get Flexmonster for React Native, run the following command inside your project:

npm install react-native-flexmonster --save-exact

Note We recommend installing Flexmonster with the --save-exact flag to avoid unexpected component updates.

Step 3. Embed Flexmonster

Step 3.1. Import FlexmonsterReactNative into App.js:

import * as FlexmonsterReactNative from "react-native-flexmonster";

Step 3.2. Insert Flexmonster Pivot into App.js:

import { View } from "react-native";
import React from "react";
import * as FlexmonsterReactNative from "react-native-flexmonster";

class App extends React.Component {
  render() {
    return (
      <View style={{ flex: 1 }}>
        <FlexmonsterReactNative.Pivot
          report="https://cdn.flexmonster.com/reports/report.json"
        />
      </View>
    );
  }
}

export default App;

Step 4. Run the project

Run your application from the console:

npx expo start

To shut down the project from the console, press Ctrl + C (Control + C on macOS).

Use methods and events in React Native

In this section, you will learn how to use Flexmonster’s methods and events in a React Native project.

Create a React reference

To use Flexmonster methods and events in React Native, we will need a React ref to the Flexmonster instance. Create a ref and attach it to the FlexmonsterReactNative.Pivot element:

<FlexmonsterReactNative.Pivot
 ref={flexmonster => this.flexmonster = flexmonster}
 report="https://cdn.flexmonster.com/reports/report.json"
/>

Now we can reference the Flexmonster instance throughout the React component.

See how the ref is attached to the component in the sample project.

Use methods

You can call methods using the ref to Flexmonster instance:

showMyChart = () => {
  this.flexmonster.showCharts("pie");
}

render() {
  return (
    <View style={{ flex: 1 }}> 
      <FlexmonsterReactNative.Pivot
       ref={flexmonster => this.flexmonster = flexmonster}
       report="https://cdn.flexmonster.com/reports/report.json"
      />
    </View>
  );
}

Methods that return a value are asynchronous. To get their returned value, use the then() method or the await operator:

reportComplete = () => {
  this.flexmonster.getReport().then(function(report) {
    console.log(report);
  });
}

render() {
  return (
    <View style={{ flex: 1 }}> 
      <FlexmonsterReactNative.Pivot
       ref={flexmonster => this.flexmonster = flexmonster}
       report="https://cdn.flexmonster.com/reports/report.json"
      />
    </View>
  );
}

reportComplete = async () => {
  const report = await this.flexmonster.getReport();
  console.log(report);
}

render() {
  return (
    <View style={{ flex: 1 }}> 
      <FlexmonsterReactNative.Pivot
       ref={flexmonster => this.flexmonster = flexmonster}
       report="https://cdn.flexmonster.com/reports/report.json"
      />
    </View>
  );
}

Check out how Flexmonster methods are used in our sample project.

Use events

You can subscribe to events in two ways:

• Via props
• Via the on() method

For details on unsubscribing from events, see this section.

Subscribing to events via props

To subscribe to events via props, simply define the needed event as a FlexmonsterReactNative.Pivot prop and assign an event handler to it:

onclickHandler = () => {
  alert("The cell was clicked!");
}

render() {
  return (
    <View style={{ flex: 1 }}> 
      <FlexmonsterReactNative.Pivot
       ref={flexmonster => this.flexmonster = flexmonster}
       cellclick={this.onclickHandler}
       report="https://cdn.flexmonster.com/reports/report.json"
      />
    </View>
  );
}

The sample React Native project demonstrates how to subscribe to an event via props.

Subscribing to events via the on() method

You can also subscribe to an event using the on() API call. Now we will need the previously created ref to Flexmonster instance:

myFunction = () => {
  this.flexmonster.on("aftergriddraw", () => {
    alert("aftergriddraw");
  });
}

render() {
  return (
    <View style={{ flex: 1 }}> 
      <FlexmonsterReactNative.Pivot
       ref={flexmonster => this.flexmonster = flexmonster}
       report="https://cdn.flexmonster.com/reports/report.json"
      />
    </View>
  );
}

Check out how the on() method is used in the sample React Native project.

Unsubscribing from events

To unsubscribe from an event, use the off() method:

myFunction = () => {
  this.flexmonster.on("aftergriddraw", () => {
    alert("aftergriddraw");
    this.flexmonster.off("aftergriddraw"); 
  });
}

render() {
  return (
    <View style={{ flex: 1 }}> 
      <FlexmonsterReactNative.Pivot
       ref={flexmonster => this.flexmonster = flexmonster}
       report="https://cdn.flexmonster.com/reports/report.json"
      />
    </View>
  );
}

Have a look at the sample React Native project and see how the off() method is used.

Specifics of using Flexmonster’s methods and events in React Native

Most of Flexmonster’s methods and events work in React Native just like in plain JavaScript. However, some of them are not available, which include:

• beforetoolbarcreated
• customizeCell()
• customizeContextMenu()
• getData() — as a result, integrating with 3rd party charting libraries is not supported in React Native. Nevertheless, you can use our built-in Flexmonster Pivot Charts to visualize your data.

See which methods and events can be used in React Native out of the box.

Customizing Flexmonster in React Native

This section describes the specifics of customizing Flexmonster in React Native.

The Flexmonster React Native wrapper embeds the component into a React Native application using the WebView library, which creates a separate browser window with Flexmonster. Since WebView is an independent part of the application, the component cannot be accessed directly from the app and vice versa. That's why methods and events that are defined in the application and require direct access to Flexmonster cannot be used. This includes, for example, customizeContextMenu() and beforetoolbarcreated.

You can still use these methods and events by modifying the Flexmonster React Native wrapper. Follow the steps below to see how the React Native wrapper can be customized. Note that this approach will not work for the customizeCell() method.

Prerequisites

• A React Native application with Flexmonster embedded into it.
  If Flexmonster is not yet embedded, integrate Flexmonster into your React Native application or get a sample project.

Step 1. Import the Flexmonster React Native wrapper from GitHub

Currently, the Flexmonster React Native wrapper is used in the project as an npm dependency, but we will connect the wrapper manually to modify it.

Step 1.1. Download the .zip archive with the wrapper from GitHub or run the following command in the console:

git clone https://github.com/flexmonster/react-native-flexmonster

Step 1.2. Copy the src/index.js file from the react-native-flexmonster/ folder to your project folder. Rename the file if needed (e.g., to react-native-flexmonster.js).

Step 1.3. Replace the React Native wrapper from npm with the wrapper from GitHub in the files where the wrapper is used (e.g., App.js):

import * as FlexmonsterReactNative from "./react-native-flexmonster";

Step 2. Add custom functionality to the wrapper

Make the necessary updates to the react-native-flexmonster.js file. Note that all the updates should be made in the HTML template.

The steps below describe how to customize a context menu:

Step 2.1. Add a customizeContextMenuFunction() to the wrapper's htmlTemplate variable:

<script>
  new Flexmonster({
    // Initialization parameters
  });
  function customizeContextMenuFunction (items, data, viewType) {
    if (viewType == "pivot") {
      items.push({
        label: "Switch to charts",
        handler: function() {
          flexmonster.showCharts();
        }
      });
    }
    return items;
  }
  ${this.registerEvents()}
</script>

Step 2.2. Call the customizeContextMenu() method and pass the customizeContextMenuFunction() to it. Note that customizeContextMenu() can be defined in two ways:

<script>
  new Flexmonster({
    // Initialization parameters
  });
  function customizeContextMenuFunction (cell, data) {
    // Function implementation
  }
  ${this.registerEvents()}
  flexmonster.customizeContextMenu(customizeContextMenuFunction);
</script>

new Flexmonster({
  container: "pivotContainer",
  // Other initialization parameters
  report: JSON.parse('${JSON.stringify(this.props.report)}'),
  customizeContextMenu: customizeContextMenuFunction
});

Step 3. Run the project

Run the project from the console with the following command:

npx expo start

Now the context menu will be customized by the customizeContextMenuFunction(). Other customizations can be achieved in the same way.

Note If you get an error at this step, refer to the troubleshooting section.

Troubleshooting

This section describes errors specific to the Flexmonster React Native wrapper. If your issue is not listed here, check out the Troubleshooting Flexmonster guide.

Error: EMFILE: too many open files, watch

If you receive this error message, add the fb-watchman npm package to your project:

npm install fb-watchman

What’s next?

You may be interested in the following articles:

• Add localization
• Apply a CSS theme
• Define a format for date and time
• Set configurations common for all reports
• Configure the data export