Category: React

To create PDF from HTML with React Native, we use the react-native-html-to-pdf library.

To install it, we run

npm i react-native-html-to-pdf

Then we use it by writing

import React, { Component } from 'react';

import {
  Text,
  TouchableHighlight,
  View,
} from 'react-native';

import RNHTMLtoPDF from 'react-native-html-to-pdf';

export default class Example extends Component {
  async createPDF() {
    let options = {
      html: '<h1>PDF TEST</h1>',
      fileName: 'test',
      directory: 'Documents',
    };

    let file = await RNHTMLtoPDF.convert(options)
    alert(file.filePath);
  }

  render() {
    return(
      <View>
        <TouchableHighlight onPress={this.createPDF}>
          <Text>Create PDF</Text>
        </TouchableHighlight>
      </View>
    )
  }
}

to add the createPdf method.

We call RNHTMLtoPDF.convert with the options obnject to create the PDF.

The html property has the content of the PDF.

And then we get the PDF file path from file.filePath.

To get the platform the app is running on with React Native, we use the Platform.OS property.

For instance, we write

import { Platform, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  height: Platform.OS === 'ios' ? 200 : 100
});

to use the Platform.OS property to check if the platform is 'ios‘ when setting the height style.

To set the port of a React Native app, we can set the port option when we run our app.

From the command line, we run

react-native start --port 9988

to set the port to 9988

In package.json, we can add the port by writing

{
  "scripts": { "start": "react-native start --port 9988" }
}

to add the port option into the start script.

To make a React Native app portrait only, we change our app’s manifest.xml.

For instance, we write

<activity
  android:name=".MainActivity"
  android:configChanges="orientation"
  android:screenOrientation="portrait"
>
  ...
</activity>

to set android:configChanges to orientation to change the orientation of our app.

And we set android:screenOrientation to portrait to keep the app in portrait mode.