Author: John Au-Yeung

To add a password input with React Native, we can set the secureTextEntry prop to true.

For instance, we write

<TextInput secureTextEntry={true} style={styles.default} value="abc" />

to set secureTextEntry to true to make the TextInput a password input.

To add a password input with React Native, we can set the secureTextEntry prop to true.

For instance, we write

<TextInput secureTextEntry={true} style={styles.default} value="abc" />

to set secureTextEntry to true to make the TextInput a password input.

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.