@tecnavia/rn-options-page (1.6.1)
Installation
@tecnavia:registry=npm install @tecnavia/rn-options-page@1.6.1"@tecnavia/rn-options-page": "1.6.1"About this package
rn-options-page
is a library written with React Native and compiled with webpack for web usages
Installation
App
install all packages inside peerDependencies
add the following line as the first import in your index.js file:
import "react-native-gesture-handler";
@Deprecated see the installtion guide of react-native-vector-icons the above library was removed to reduce the size of bundle, we could customize each icons by adding the following style to css class
"class-name": {
..."svg-props",
"paths": [
"d": "string",
..."path-props"
]
}
see the guide of react-native-svg to obtain the correct properties you could use the following web tool svg-to-jsx
Development
if you are developing the library you need to override babel and metro.config
- overriding babel
const { babelConfig } = require("path_to_opt_project"); babelConfig({ presets: ["module:metro-react-native-babel-preset"], plugins }); - overriding metro.config.js
const { metroConfig } = require("path_to_opt_project"); return metroConfig({ transformer: { getTransformOptions: async () => ({ transform: { experimentalImportSupport: false, inlineRequires: true } }) } });
❗ REMEMBER if the library folder is outside project folder
The metro server accepts the request like:
http://localhost:8081/assets/../../../rn-options-page/src/img/header-logo.png
The RN Android image system uses okhttp to send requests but okhttp seems to prune the request as
http://localhost:8081/rn-options-page/src/img/header-logo.png
you need to make a symlink to rn-options-page folder otherwise metro-bundler can't link the assents available from the library, see the below example
#Windows
simply make a link to a folder
#Unix
ln -s path-to-library
see example project for details babel.config.js and metro.config.js
Production
npm install rn-options-page --save
and than import App from the module, all is already compiled
Web
copy dist folder and load index.html
Example Test
To develop the library you could use the example project that is already configured
cd example
npm install
npm run start
npm run android|ios
or for web trigger from main folder the following command
npm run web-start
Build library
App
to build the library you need react-native-builder-bob triggered by the following command
npm run prepare
the output will be put under lib/module/ folder
Web
the build will merge all files into unique bundle and the will put all inside dist folder
npm run web-build
❗ the patches for patch-package are only inside library root because we need to apply the patches only for web development
Usage
App
import library
import OptionsPage from "rn-options-page";
render component
<OptionsPage {...props} />
rn-options-page has others named export, see the section
Web
the library exposes a TaOptionsPage object with render method, the method requires the id of html tag in which load the view
window.TaOptionsPage.render(nodeId, {...props});
Render return a remover function that unmount the entire app
TaOptionsPage has others export, see the section
Props
| prop | type | description |
|---|---|---|
| pSetup | String |
|
| server | String |
|
| initialRoute | String |
to select default route, @see Initial routes |
| entryPoint | String |
DF: default_native_optionspage.php |
| apiParams | Object |
append to api call |
| urlParams | Object |
append to iframe url |
| onPSetupError | Function |
return Error object |
| onLocaleError | Function |
return Error object |
| onEditionsError | Function |
return Error object |
| onSpecialsError | Function |
return Error object |
| onRouteChange | Function |
return Route object |
| onClose | Function |
|
| onMessage | Function |
return { Message: object, jsInject: Function } |
| onLocal | Function |
return { URI: object, jsInject: Function } |
| issueCallbacks | Object |
see Issue callbacks section |
| logCallbacks | Object |
see Log callbacks section |
| LogoComponent | Function |
must be a functional component |
| hideCloseButton | Boolean |
hide the close button from header (default false) |
| hideHamburger | Boolean |
hide the menu button from header (default false) |
| customUserAgent | String |
the custom user agent to use in the webviews |
| favoriteEdition | String |
the user favorite edition |
Methods
| method | type | description |
|---|---|---|
| navigate | Function |
accepts route and params |
| nanavigateToAccess | Function |
|
| navigateToAccessibility | Function |
|
| navigateToAccount | Function |
|
| navigateToArchive | Function |
|
| navigateToCarousel | Function |
|
| navigateToConnection | Function |
|
| navigateToContact | Function |
|
| navigateToCustomHTML1 | Function |
|
| navigateToCustomHTML2 | Function |
|
| navigateToHelp | Function |
|
| navigateToHome | Function |
|
| navigateToLogin | Function |
|
| navigateToRegistration | Function |
|
| navigateToRss | Function |
|
| navigateToSpecialSections | Function |
|
| navigateToSubscribe | Function |
|
| navigateToValidation | Function |
|
| TABS | Object |
available tabs, use above shortcut |
Initial routes
access, accessibility, account, archive, carousel, connection, contact, customhtml1, customhtml2, help, home, login, registration, rss, specialsection, subscribe, validation, latest_editions, penultimate_editions, custom_editions, other_editions, downloaded_editions, archive_editions, newsstand
Issue callbacks
| prop | type | description |
|---|---|---|
| onIssuePress | Function |
return Issue object |
Log callbacks
you could use the following prop to define log behavior and print each kind of log where you wont
| prop | type | description |
|---|---|---|
| onLog | Function |
return message and rest arg |
| onDebug | Function |
return message and rest arg |
| onWarning | Function |
return message and rest arg |
| onError | Function |
return message and rest arg |
Model
each models have private fields accessible from __private__field_n but you must use setter and getter methods available for each fields.
# before a class field represents private field.
Route
base route model
| Field | type | description |
|---|---|---|
| #_route | String |
drawer route name |
| #_level | Number |
depth of route in drawer |
| #_parent | String |
parent route name of current drawer item |
| #_routes | Array |
array of Route models, is filled if there are multiple level, i.e. Avvenire |
| #_collapsed | Boolean |
state of drawer item, if collapsed or expaned, available if there are children |
| #_icon | String |
could be and url or a base64 |
RouteHeader
extends Route with header informations
| Field | type | description |
|---|---|---|
| #_header | String |
header text |
RouteEdition
extends Route with edition informations
| Field | type | description |
|---|---|---|
| #_edition | Object |
see Edition model |
RouteSeparator
extends Route, empty placeholder that display a separator line
Publication
| Field | type | description |
|---|---|---|
| #_name | String |
name of edition |
| #_bought | Boolean |
edition state, if user can access to it |
| #_issues | Array |
issues list availbale for the current edition, see Issue model |
| #_isSecondary | Boolean |
is visible under main editions |
| #_isShortcut | Boolean |
display first issue of edition inside special sections menu and is shortcut to drawer item |
Edition
describe edition item, extends Publication
| Field | type | description |
|---|---|---|
| #_label | String |
label to display |
| #_subLabel | String |
sublabel to display |
| #_group | Array |
editions list that are children for current edition, see Edition model |
Special
describe special item, extends Publication
| Field | type | description |
|---|
Issue
describe issue item from edition or special
| Field | type | description |
|---|---|---|
| #_edition | String |
name of edition that contains the issue |
| #_issue | String |
|
| #_filename | String |
|
| #_public | Number |
|
| #_lastClosed | String |
|
| #_dayOfWeek | String |
|
| #_dayOfWeekComplete | String |
|
| #_pSetup | String |
|
| #_dateLabelAccessibility | String |
|
| #_dateLabel | String |
|
| #_pathEdition | String |
|
| #_siteDomain | String |
|
| #_machine | String |
URI
describe edition item, extends Publication
| Field | type | description |
|---|---|---|
| #_mUrl | URL |
URL js object |
| #_params | Object |
get params |
| #_port | Number |
domain port |
| #_domain | String |
domain |
| #_protocol | String |
protocol (protocol:) |
Message.native
describe edition item, extends Publication
| Field | type | description |
|---|---|---|
| #_data | String |
data is string, could be parsed to obtain an object |
Message.web
describe edition item, extends Publication
| Field | type | description |
|---|---|---|
| #_data | String |
data is string, could be parsed to obtain an object |
| #_origin | String |
iframe origin |
| #_lastEventId | String |
on message event id |
Others export
Models
contains classes described above
Methods
- Navigation
Object: provides navigation utils to change screens from code out of options page - jsInjectionOnActiveWebViews
Function: to inject js inside active webviews - setFavoriteEdition
Function: to update the favorite edition after user selection - getVersion
Function: returns the optionspage version
Web
open index.html to see an example of the following methods
//return object with all GET params
_GET()
//run a postMessage over window or ReactNativeWebView interface if exists
emit({/* payload */ }):
/**
* emulate a promise, usefull when we want call something on native side (android/ios) and await a response before continue the execution
* emit a postMessage by emit mehtod, the payload contains asyncKey and all of your data attributes, asyncKey must be use from awaitPostMessage to resolve the promise
* @param payload: object
*/
asyncPostMessage({ /* payload */ });
/**
* inject this js from native side to resolve the promise.
*
* @param asyncKey: key to identify the promise, is asyncKey obtained from asyncPostMessage
* @param method: "resolve|reject"
* @param payload: data returned from await
*/
awaitPostMessage(asyncKey, method, payload);
/**
* inject a js inside active iframe
* @param js: string to execute
*/
iframeInjection(js)
Demo
To test web version see Demo
Dependencies
Dependencies
| ID | Version |
|---|---|
| html-entities | ^2.3.3 |
| react-calendar | 5.1.0 |
| react-native-builder-bob | ^0.18.3 |
| react-native-calendars | 1.1307.0 |
| react-native-url-polyfill | ^1.3.0 |
| react-native-web | ^0.18.9 |
| react-native-web-linear-gradient | ^1.1.2 |
| resize-observer-polyfill | ^1.5.1 |
Development Dependencies
| ID | Version |
|---|---|
| @arkweid/lefthook | ^0.7.7 |
| @babel/core | ^7.13.16 |
| @babel/plugin-proposal-private-methods | ^7.18.6 |
| @babel/plugin-syntax-dynamic-import | ^7.8.3 |
| @babel/plugin-transform-property-mutators | ^7.17.12 |
| @react-native-async-storage/async-storage | ^1.17.7 |
| @react-native-community/eslint-config | ^1.1.0 |
| @react-native-community/netinfo | ^9.3.0 |
| @react-navigation/drawer | ^6.4.2 |
| @react-navigation/elements | ^1.3.3 |
| @react-navigation/material-top-tabs | ^6.2.4 |
| @react-navigation/native | ^6.0.10 |
| @tecnavia/react-native-css | git+https://ussvc01.newsmemory.com:3000/tecnavia/react-native-css.git#1.3.2 |
| axios | ^0.27.2 |
| babel-loader | ^8.2.5 |
| babel-merge | ^3.0.0 |
| babel-plugin-import-rename | ^1.0.1 |
| babel-plugin-module-resolver | ^4.1.0 |
| babel-plugin-react-native-web | ^0.18.7 |
| babel-plugin-strip-function-call | ^1.0.2 |
| babel-plugin-transform-react-remove-prop-types | ^0.4.24 |
| babel-plugin-transform-remove-console | ^6.9.4 |
| babel-plugin-transform-remove-imports | ^1.7.0 |
| babel-preset-react-native | 5.0.0 |
| compression-webpack-plugin | ^10.0.0 |
| css-loader | ^6.7.1 |
| dotenv | ^8.2.0 |
| eslint | ^7.25.0 |
| eslint-config-airbnb | ^18.2.1 |
| eslint-plugin-import | ^2.22.1 |
| eslint-plugin-jsx-a11y | ^6.4.1 |
| eslint-plugin-react | ^7.23.2 |
| eslint-plugin-react-hooks | ^2.1.2 |
| html-webpack-plugin | ^5.5.0 |
| i18n-js | ^3.9.2 |
| install | ^0.13.0 |
| interpolate-html-plugin | ^4.0.0 |
| jetifier | ^1.6.6 |
| md5 | ^2.3.0 |
| metro-react-native-babel-preset | ^0.66.2 |
| moment | ^2.29.4 |
| moment-locales-webpack-plugin | ^1.2.0 |
| npm | ^8.13.1 |
| patch-package | ^6.4.7 |
| pod-install | ^0.1.0 |
| process | ^0.11.10 |
| promise-queue | ^2.2.5 |
| prop-types | ^15.8.1 |
| react | ^17.0.2 |
| react-dom | ^17.0.2 |
| react-native | ^0.67.4 |
| react-native-builder-bob | ^0.18.3 |
| react-native-config-node | 0.0.3 |
| react-native-fast-image | ^8.5.11 |
| react-native-gesture-handler | ^1.10.3 |
| react-native-linear-gradient | ^2.8.3 |
| react-native-modal | ^13.0.1 |
| react-native-pager-view | ^6.0.0 |
| react-native-progress | 5.0.1 |
| react-native-reanimated | ^1.13.2 |
| react-native-safe-area-context | ^3.3.2 |
| react-native-screens | ^3.13.1 |
| react-native-svg | 15.4.0 |
| react-native-tab-view | ^3.1.1 |
| react-native-webview | 12.4.0 |
| style-loader | ^3.3.1 |
| terser-webpack-plugin | ^5.3.5 |
| url-loader | ^4.1.1 |
| webpack | ^5.73.0 |
| webpack-bundle-analyzer | ^4.5.0 |
| webpack-cli | ^4.10.0 |
| webpack-dev-server | ^4.9.2 |
| webpack-manifest-plugin | ^5.0.0 |
| webpack-merge | ^5.8.0 |
| webpack-nano | ^1.1.1 |
Peer Dependencies
| ID | Version |
|---|---|
| @react-native-async-storage/async-storage | * |
| @react-native-community/netinfo | * |
| @react-navigation/drawer | * |
| @react-navigation/elements | * |
| @react-navigation/material-top-tabs | * |
| @react-navigation/native | * |
| @tecnavia/react-native-css | * |
| axios | * |
| i18n-js | * |
| md5 | * |
| moment | * |
| promise-queue | * |
| prop-types | * |
| react | * |
| react-dom | * |
| react-native | * |
| react-native-fast-image | * |
| react-native-gesture-handler | * |
| react-native-linear-gradient | * |
| react-native-modal | * |
| react-native-pager-view | * |
| react-native-progress | * |
| react-native-reanimated | * |
| react-native-safe-area-context | * |
| react-native-screens | * |
| react-native-svg | * |
| react-native-tab-view | * |
| react-native-webview | * |