React Native is a cross-platform JavaScript framework for developing natively rendering mobile applications for iOS and Android. It’s based on the React framework which is developed by Facebook for building UI interfaces.
It has a large community, so that’s why it has many libraries to make development easier. I was working on a project, in which I needed to show PDF inside my app. I was wondering how to do that. Then I found the react-native-pdf package. It is too easy and good, anyone having little knowledge of react native can implement it in his app.
Today, I am gonna tell you how you can add this feature to your app. So, let’s get started.
1. Firstly, you need to install the library. You can refer to its documentation for installation here.
2. Create a new page with the name whatever you want then add the below code to that file.
import React, { Component } from 'react';
import { View } from 'react-native';
import PDFView from 'react-native-view-pdf';
class PDFView extends Component {
state = {
data: '',
isParsed: false,
}
componentDidMount() {
this.setState({data:'base64 pdf content'}) // load PDF content with base64 string of the file.
}
render() {
const resourceType = 'base64'; // set resource type to base64
return (
<View style={{ flex: 1 }}>
<PDFView
fadeInDuration={250.0} //It will smoothly fade the view when loading is completed.
style={{ flex: 1 }}
resource={this.state.data}
resourceType={resourceType}
onLoad={() => console.log(`PDF rendered`)}
onError={(error) => console.log('Cannot render PDF', error)}
/> // This is the component which is provided by the library to abstract the difficulties from the developers.
</View>
);
}
}
export default PDFView;
3. Now, add this Component to the App.js file of your application. Then run your application, and you will be able to see the screen on your emulator/device as shown below.
If you have knowledge of financial accounting and you are in search of a good job, financial accounting certification can help you reach your desired goals. StudySection provides Financial accounting certification for beginner level as well as expert level people in the commerce stream. You can appear in the certification exam for free to get certified.
