TypeScript icon, indicating that this package has built-in type declarations

    0.2.0 • Public • Published


    The communication layer between Editions and editions-rendering.


    The raw communication

    React Native app communicates with its WebView in two different ways, based on the direction:

    • From React Native to the WebView: The native app has access to the global context of the WebView and you can inject JavaScript code either as a prop for code you want executed for example on content loaded or with an injectJavaScript method which is what this library uses.
    • From WebView to React Native The web context can use postMessage to send data to React Native

    You can learn more about this in the official guide.

    The problems

    The first problem is the fact these two ways of communicating are different in the ways the developer would use them, the methods are very different. One can execute any JavaScript string and the other can only send stringified data. The second problem being we want our hydrated React components to be able to listen to messages from the native layer. We want these messages to be typed and consitent between the two layers.

    The solution

    Something like Bridget would be very heavy in this instance with additional set of its own challenges and cost. The solution in this repo is very simple in a way that it is a bunch of types and helper methods that could be used by both editions-rendering and Editions. The functions pingEditionsNative and pingEditionsRenderingJsString both take the same type, a Message and the rest is abstracted away from the developer.

    Under the hood, all this does is either use postMessage to the native app with the right message type, or trigger a Custom Event editionsPing that the web context, be it the hydrated React components or vanilla JavaScript can listen to.


    You can install the library inside your project by adding the appropriate git reference in your package.json

      "dependencies": {
      // ...,
      "@guardian/renditions": "git+https://github.com/guardian/renditions.git#0.1.0"

    To use inside editions-rendering, make use of the pingEditionsNative function:

    import {
    } from '@guardian/renditions';
    pingEditionsNative({ kind: MessageKind.Share })

    To use inside the Editions app, make use of the pingEditionsRenderingJsString function:

    import {
    } from '@guardian/renditions';
    ... // webView code
    const platformMessage: PlatformMessage = {
      kind: MessageKind.Platform;
      value: Platform.IOS;

    Publish to NPM

    We use the np library to publish.

    $ npm run release




    npm i @guardian/renditions

    DownloadsWeekly Downloads






    Unpacked Size

    7.79 kB

    Total Files


    Last publish


    • unmesh_malvankar
    • zekehg
    • rtyley
    • dlawes
    • ghaberis
    • jsherbert
    • david.furey.gu
    • tonymccraeguardian
    • jlieb10
    • guardian-developers
    • simonadcock-gu
    • maxspencer
    • akash1810
    • reetta
    • ajwl
    • tomrf1
    • mchv
    • itsibitzi
    • justinpinner
    • jranks123
    • nicl
    • philmcmahon
    • tjmw
    • thaliasilver
    • sndrs
    • sam.hession
    • jfsoul
    • 0x101
    • frankie_hammond
    • aoifemcl15
    • ioanna0
    • mxdvl
    • rhysmills
    • jamie-lynch
    • amyhughes-gu
    • oliverlloyd
    • jacobwinch
    • dskamiotis
    • marjank
    • annabeddow
    • fweddi
    • michaelclapham_gnm
    • olly.namey.guardian