Category: React Native Answers

To fix the parent opacity not affecting text issue with React Native, we should try changing the opacity using alpha-value of the background color instead of opacity props.

For example, we write

<View style={{ backgroundColor: "rgba(0,0,0,0.5)" }} />;

to set the backgroundColor style to "rgba(0,0,0,0.5)".

The last number is the opacity.

Then it should be possible applying different opacities for the children components.

To pass parameters to nested navigators with React Native, we call navigation.navigate with an object with the params property.

For instance, we write

navigation.navigate('Account', {
  screen: 'Settings',
  params: { user: 'jane' },
});

to set the params property to an object with the data that we want to pass to the destination component.

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.