Tecnavia
Repositories
3
 Projects Packages

@tecnavia/rn-options-page (1.5.1)

Published 2024-08-08 08:33:44 +00:00 by naquilini

Installation

@tecnavia:registry=
npm install @tecnavia/rn-options-page@1.5.1
"@tecnavia/rn-options-page": "1.5.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
@react-native-picker/picker ^2.4.8
@react-navigation/material-top-tabs ^6.2.4
html-entities ^2.3.3
react-calendar ^4.0.0
react-native-calendars ^1.1291.1
react-native-modal ^13.0.1
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/native ^6.0.10
@tecnavia/react-native-css 1.2.0
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-pager-view ^6.0.0
react-native-progress ^5.0.0
react-native-reanimated ^1.13.2
react-native-safe-area-context ^3.3.2
react-native-screens ^3.13.1
react-native-svg ^12.4.0
react-native-tab-view ^3.1.1
react-native-webview ^11.22.7
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/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-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 *

Keywords

react-native
Details
npm
2024-08-08 08:33:44 +00:00
8
amauri
MIT
latest
405 KiB
Assets (1)
rn-options-page-1.5.1.tgz 405 KiB
Versions (1) View all
1.5.1 2024-08-08