@h5mag/react-native-h5mag v1.0.2

React-native-h5mag

Welcome to the react-native-h5mag framework readme.

With the react-native-h5mag framework, you can easily access H5mag public API. It is a flexible framework that developers can use in new and existing React Native projects.

React-native-h5mag supports both iOS and Android and has been tested on the following OS versions:

List Of Contents

• Installation
• Usage
• API
  • getProjectAndEditions()
  • getProjectsList()
  • downloadEdition()
  • deleteEdition()
  • readEditionOffline()
• Components
• Building react-native-h5mag

Installation

You need NPM to install the H5mag framework. For installation use this command:

npm i @h5mag/react-native-h5mag

Usage

In order to use the API, you will need to set the API key first. Here is an example:

// App.js
import H5mag from 'react-native-h5mag';

H5mag.setApiKey('h5_public_Fn30x...Wvay2g');

API

After setting the API key you can use the functions below.

getProjectAndEditions

async getProjectAndEditions() : Promise<any>

Retrieves one project.

Options object: | Parameter | Type | Description | | ------ | ------ | ------ | | apiKey | string | Manually set/override API key | | sort | boolean | Sort editions by date |

Example:

const getProjectData = async () => {
	try {
		await getProjectAndEditions(projectDomain, { sort: true }).then((result) => {
			// Do something with the project data...
		});
	} catch (error) {
		console.error(error);
	}
};

getProjectsList

async getProjectsList() : Promise<any>

Retrieves all projects.

Options object: | Parameter | Type | Description | | ------ | ------ | ------ | | apiKey | string | Manually set/override API key | | filterByHasLatestEdition | boolean | Only retrieves projects with at least one published edition |

Example:

const getProjectsData = async () => {
	try {
		const response = await getProjectsList({ filterByHasLatestEdition: true });
                // Do something with the projects data...
	} catch (error) {
		console.error(error);
	}
};

downloadEdition

downloadEdition() : Promise<any>

Downloads the specified editon.

Options object: | Parameter | Type | Description | | ------ | ------ | ------ | | apiKey | string | Manually set/override API key |

Example:

// You could get the **editionPath** and **projectDomain** through props.

const targetPath = (Platform.OS === 'android' ? DocumentDirectoryPath : MainBundlePath) + '/' + projectDomain + edition.path;
const charset = 'UTF-8';

const startEditionDownload = () => {
	downloadEdition(targetPath, charset, editionPath, projectDomain).then((result) => {
		if (result === 'downloaded') {
			// Do something after the edition has been downloaded....
		}
	}).catch((err) => {
		console.log(err);
	});
};

deleteEdition

deleteEdition() : Promise<any>

Deletes the specified folder and all files in it.

Example:

deleteEdition(targetPath).then((result) => {
	if (result === 'deleted') {
		// Do something after the deletion...
	}
});

readEditionOffline

readEditionOffline() : Promise<any>

Starts a local server for offline edition reading.

Example:

const osPath = Platform.OS === 'android' ? DocumentDirectoryPath : MainBundlePath;

readEditionOffline(osPath, targetPath).then((result) => {
	if (result === 'success') {
                // Server is ready!
		// Update a state...
	}
});

if (readyToReadEdition) {
	return (<EditionReader targetPath={targetPath} />);
}

Components

EditionReader

<EditionReader targetPath={...} />

The EditionReader component uses a Webview wrapped inside a SafeAreaView to load the selected edition.

Building react-native-h5mag

Ensure you have npm installed

1) mpm install -g bob 2) npm pack

License

MIT