1.Integration with React Native

This tutorial will help you integrate Flexmonster with the React Native framework. It is based on the React Native: Getting Started guide.

Prerequisites

To run a simple application, you will need Node.js and npm. Get it here if it’s not already installed on your machine.

Then install the Expo CLI globally by running:

npm install -g expo-cli

After that, choose one of the following options:

Run the sample project from GitHub
Integrate Flexmonster into an existing/new application
Using methods and events in React Native

Run the sample project from GitHub

Step 1. Download the .zip archive with the sample project or clone it from GitHub with the following command:

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

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

npm install

Step 3. Run your application from the console:

expo start

The application can be shut down manually with Ctrl+C.

Integrate Flexmonster into an existing/new application

To integrate Flexmonster into a React Native app, follow these steps:

Step 1. If you don’t have a React Native app, create it by running these commands in the console:

expo init my-app --template blank
cd my-app

Step 2. If you created a new app, install the packages described in package.json:

npm install

Step 3. Install the Flexmonster React Native module with the following command:

npm install react-native-flexmonster --save

Step 4. Import FlexmonsterReactNative into App.js:

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

Step 5. Insert Flexmonster Pivot into App.js:

export default function App() {
    return (
        <View style={{ flex: 1 }}>
            <FlexmonsterReactNative.Pivot
             report="https://cdn.flexmonster.com/reports/report.json" 
            />
        </View>
     );
}

Step 6. Run your application from the console:

expo start

The application can be shut down manually with Ctrl+C.

Using methods and events in React Native

The React Native module provides a lot of Flexmonster’s methods and events that make the component highly customizable in the React Native application. See which methods and events are available for usage out of the box.

The Flexmonster React Native module 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.

This approach imposes limitations on the usage of methods that should be defined in the application and require direct access to Flexmonster. For example, customizeCell, customizeContextMenu, and beforetoolbarcreated.

To use the mentioned features, modify the Flexmonster React Native module. Follow the steps below to see how the React Native module can be customized.

Step 1. Download the sample project from GitHub

Follow steps 1-3 from the guide on how to run the sample project from GitHub.

Step 2. Download Flexmonster React Native module from GitHub

The sample project includes the Flexmonster React Native module as an npm dependency, but we will connect it manually to add the custom functionality.

Download the .zip archive with the module from GitHub or run the following command in the console:

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

Step 3. Add the module to your project

Copy the src/index.js file from the react-native-flexmonster/ folder and add it to the project folder (e.g., pivot-react-native/). Rename the file if needed (e.g., to react-native-flexmonster.js).

Step 4. Use the module from GitHub

Replace the React Native module from npm with the module from GitHub by updating the module import statement in the App.js file:

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

Step 5. Customize the module

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 cells on the grid:

Add customizeCellFunction to the module’s htmlTemplate variable:

<script>
    new Flexmonster({
        // initialization parameters
    });
    function customizeCellFunction (cell, data) {
        if (data.type == "value") {
            if (data.rowIndex % 2 == 0) {
                cell.addClass("alter1");
            } else {
                cell.addClass("alter2");
            }
        }
    }
    ${this.registerEvents()
</script>

Add CSS classes that will be applied to the rows. It can be done right after the <script></script> section of the htmlTemplate variable:

<script>
    new Flexmonster(
        // initialization parameters
    );
    function customizeCellFunction (cell, data) {
        // function implementation
    }
    ${this.registerEvents()}
</script>
<style>
    #fm-pivot-view #fm-grid-view div.alter1 {
        background-color: #f7f7f7;
    }
    #fm-pivot-view #fm-grid-view div.alter2 {
        background-color: #fcfcfc;
    }
</style>

Call the customizeCell method and pass customizeCellFunction to it. Note that customizeCell can be defined in two ways:

As a regular API call

<script>
    new Flexmonster({
        // initialization parameters
    });
    function customizeCellFunction (cell, data) {
        // function implementation
    }
    ${this.registerEvents()}
    flexmonster.customizeCell(customizeCellFunction);
</script>

As an initialization parameter

new Flexmonster({
    container: "#pivot-container",
    //other initialization parameters
    report: JSON.parse('${JSON.stringify(this.props.report)}'),
    customizeCell: customizeCellFunction
});

Step 6. Run the project

Run the project from the console with the following command:

expo start

Now all the cells on the grid will be customized by the customizeCellFunction. Other customizations can be achieved in the same way.

What’s next?

You may be interested in the following articles: