react-native-readium 1.0.0-alpha.8 → 1.0.0-alpha.9

package/README.md

@@ -1,6 +1,19 @@
 # react-native-readium
 
-A react-native wrapper for https://readium.org/
+A react-native wrapper for https://readium.org/. At a high level this package
+allows you to do things like:
+
+- Render an ebook view.
+- Register for location changes (as the user pages through the book).
+- Register for the Table of Contents (so that you can display things like chapters in your app)
+- Control settings of the Reader. Things like:
+  - Dark Mode, Light Mode, Sepia Mode
+  - Font Size
+  - Page Margins
+  - More (see the `Settings` documentation in the [API section](#api))
+- Etc. (read on for more details. :book:)
+
+## Overview
 
 - [Installation](#installation)
 - [Usage](#usage)
@@ -128,6 +141,7 @@ DRM is not supported at this time. However, there is a clear path to [support it
 | `settings` | [`Partial<Settings>`](https://github.com/5-stones/react-native-readium/blob/main/src/interfaces/Settings.ts)  | :white_check_mark: | An object that allows you to control various aspects of the reader's UI (epub only) |
 | `style`    | `ViewStyle`          | :white_check_mark: | A traditional style object. |
 | `onLocationChange` | `(locator: Locator) => void` | :white_check_mark: | A callback that fires whenever the location is changed (e.g. the user transitions to a new page)|
+| `onTableOfContents` | `(toc: Link[] \| null) => void` | :white_check_mark: | A callback that fires once the file is parsed and emits the table of contents embedded in the file. Returns `null` or an empty `[]` if no TOC exists. See the [`Link`](https://github.com/5-stones/react-native-readium/blob/main/src/interfaces/Link.ts) interface for more info. |
 
 ## Contributing
 

package/android/src/main/java/com/reactnativereadium/ReadiumView.kt

@@ -45,9 +45,9 @@ class ReadiumView(
       .replace(this.id, frag, this.id.toString())
       .commit()
 
+    val module = reactContext.getJSModule(RCTEventEmitter::class.java)
     // subscribe to reader events
     frag.channel.receive(frag) { event ->
-      val module = reactContext.getJSModule(RCTEventEmitter::class.java)
       when (event) {
         is ReaderViewModel.Event.LocatorUpdate -> {
           val json = event.locator.toJSON()
@@ -58,6 +58,15 @@ class ReadiumView(
             payload
           )
         }
+        is ReaderViewModel.Event.TableOfContentsLoaded -> {
+          val map = event.toc.map { it.toJSON().toMap() }
+          val payload = Arguments.makeNativeMap(mapOf("toc" to map))
+          module.receiveEvent(
+            this.id.toInt(),
+            ReadiumViewManager.ON_TABLE_OF_CONTENTS,
+            payload
+          )
+        }
       }
     }
   }

package/android/src/main/java/com/reactnativereadium/ReadiumViewManager.kt

@@ -25,13 +25,22 @@ class ReadiumViewManager(
   }
 
   override fun getExportedCustomBubblingEventTypeConstants(): Map<String, Any> {
-    return MapBuilder.builder<String, Any>().put(
-      ON_LOCATION_CHANGE,
-      MapBuilder.of(
-        "phasedRegistrationNames",
-        MapBuilder.of("bubbled", ON_LOCATION_CHANGE)
+    return MapBuilder.builder<String, Any>()
+      .put(
+        ON_LOCATION_CHANGE,
+        MapBuilder.of(
+          "phasedRegistrationNames",
+          MapBuilder.of("bubbled", ON_LOCATION_CHANGE)
+        )
       )
-    ).build()
+      .put(
+        ON_TABLE_OF_CONTENTS,
+        MapBuilder.of(
+          "phasedRegistrationNames",
+          MapBuilder.of("bubbled", ON_TABLE_OF_CONTENTS)
+        )
+      )
+      .build()
   }
 
   override fun getCommandsMap(): MutableMap<String, Int> {
@@ -108,6 +117,7 @@ class ReadiumViewManager(
 
   companion object {
     var ON_LOCATION_CHANGE = "onLocationChange"
+    var ON_TABLE_OF_CONTENTS = "onTableOfContents"
     var COMMAND_CREATE = 1
   }
 }

package/android/src/main/java/com/reactnativereadium/reader/BaseReaderFragment.kt

@@ -10,6 +10,7 @@ import org.readium.r2.navigator.*
 import org.readium.r2.shared.publication.Locator
 import com.reactnativereadium.utils.EventChannel
 import kotlinx.coroutines.channels.Channel
+import org.readium.r2.shared.publication.Link
 
 /*
  * Base reader fragment class
@@ -24,37 +25,38 @@ abstract class BaseReaderFragment : Fragment() {
   )
 
   protected abstract val model: ReaderViewModel
-    protected abstract val navigator: Navigator
-
-    override fun onCreate(savedInstanceState: Bundle?) {
-        setHasOptionsMenu(true)
-        super.onCreate(savedInstanceState)
-    }
-
-    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
-        super.onViewCreated(view, savedInstanceState)
-
-        val viewScope = viewLifecycleOwner.lifecycleScope
-
-        navigator.currentLocator
-            .onEach { channel.send(ReaderViewModel.Event.LocatorUpdate(it))  }
-            .launchIn(viewScope)
+  protected abstract val navigator: Navigator
+
+  override fun onCreate(savedInstanceState: Bundle?) {
+    setHasOptionsMenu(true)
+    super.onCreate(savedInstanceState)
+  }
+
+  override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
+    super.onViewCreated(view, savedInstanceState)
+
+    val viewScope = viewLifecycleOwner.lifecycleScope
+
+    channel.send(ReaderViewModel.Event.TableOfContentsLoaded(model.publication.tableOfContents))
+    navigator.currentLocator
+      .onEach { channel.send(ReaderViewModel.Event.LocatorUpdate(it)) }
+      .launchIn(viewScope)
+  }
+
+  override fun onHiddenChanged(hidden: Boolean) {
+    super.onHiddenChanged(hidden)
+    setMenuVisibility(!hidden)
+    requireActivity().invalidateOptionsMenu()
+  }
+
+  fun go(locator: Locator, animated: Boolean): Boolean {
+    // don't attempt to navigate if we're already there
+    val currentLocator = navigator.currentLocator.value
+    if (locator.hashCode() == currentLocator.hashCode()) {
+      return true
     }
 
-    override fun onHiddenChanged(hidden: Boolean) {
-        super.onHiddenChanged(hidden)
-        setMenuVisibility(!hidden)
-        requireActivity().invalidateOptionsMenu()
-    }
-
-    fun go(locator: Locator, animated: Boolean): Boolean {
-      // don't attempt to navigate if we're already there
-      val currentLocator = navigator.currentLocator.value
-      if (locator.hashCode() == currentLocator.hashCode()) {
-        return true
-      }
-
-      return navigator.go(locator, animated)
-    }
+    return navigator.go(locator, animated)
+  }
 
 }

package/android/src/main/java/com/reactnativereadium/reader/ReaderViewModel.kt

@@ -20,6 +20,7 @@ import org.readium.r2.shared.publication.services.search.SearchIterator
 import org.readium.r2.shared.publication.services.search.SearchTry
 import org.readium.r2.shared.Search
 import org.readium.r2.shared.UserException
+import org.readium.r2.shared.publication.Link
 import org.readium.r2.shared.util.Try
 
 @OptIn(Search::class, ExperimentalDecorator::class)
@@ -111,6 +112,7 @@ class ReaderViewModel(
         object StartNewSearch : Event()
         class Failure(val error: UserException) : Event()
         class LocatorUpdate(val locator: Locator) : Event()
+        class TableOfContentsLoaded(val toc: List<Link>) : Event()
     }
 
     sealed class FeedbackEvent {

package/ios/ReadiumView.swift

@@ -37,6 +37,7 @@ class ReadiumView : UIView, Loggable {
     }
   }
   @objc var onLocationChange: RCTDirectEventBlock?
+  @objc var onTableOfContents: RCTDirectEventBlock?
 
   func loadBook(url: String) {
     guard let rootViewController = UIApplication.shared.delegate?.window??.rootViewController else { return }
@@ -128,9 +129,7 @@ class ReadiumView : UIView, Loggable {
   private func addViewControllerAsSubview(_ vc: ReaderViewController) {
     vc.publisher.sink(
       receiveValue: { locator in
-        if (self.onLocationChange != nil) {
-          self.onLocationChange!(locator.json)
-        }
+        self.onLocationChange?(locator.json)
       }
     )
     .store(in: &self.subscriptions)
@@ -155,5 +154,11 @@ class ReadiumView : UIView, Loggable {
     rootView.bottomAnchor.constraint(equalTo: self.bottomAnchor).isActive = true
     rootView.leftAnchor.constraint(equalTo: self.leftAnchor).isActive = true
     rootView.rightAnchor.constraint(equalTo: self.rightAnchor).isActive = true
+
+    self.onTableOfContents?([
+      "toc": vc.publication.tableOfContents.map({ link in
+        return link.json
+      })
+    ])
   }
 }

package/ios/ReadiumViewManager.m

@@ -6,5 +6,6 @@ RCT_EXPORT_VIEW_PROPERTY(file, NSDictionary *)
 RCT_EXPORT_VIEW_PROPERTY(location, NSDictionary *)
 RCT_EXPORT_VIEW_PROPERTY(settings, NSDictionary *)
 RCT_EXPORT_VIEW_PROPERTY(onLocationChange, RCTDirectEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(onTableOfContents, RCTDirectEventBlock)
 
 @end

package/lib/commonjs/components/BaseReadiumView.js.map

@@ -1 +1 @@
-{"version":3,"sources":["BaseReadiumView.tsx"],"names":["BaseReadiumView","UIManager","getViewManagerConfig","COMPONENT_NAME","Error","LINKING_ERROR"],"mappings":";;;;;;;AAAA;;AAOA;;AAaO,MAAMA,eAAe,GAC1BC,uBAAUC,oBAAV,CAA+BC,qBAA/B,KAAkD,IAAlD,GACI,yCAA6CA,qBAA7C,CADJ,GAEI,MAAM;AACJ,QAAM,IAAIC,KAAJ,CAAUC,oBAAV,CAAN;AACD,CALA","sourcesContent":["import {\n  requireNativeComponent,\n  UIManager,\n  ViewStyle,\n} from 'react-native';\n\nimport type { Settings, Locator, File, } from '../interfaces';\nimport { COMPONENT_NAME, LINKING_ERROR } from '../utils';\n\nexport type BaseReadiumViewProps = {\n  file: File;\n  location?: Locator;\n  settings?: Partial<Settings>;\n  style?: ViewStyle;\n  onLocationChange?: (locator: Locator) => void;\n  ref?: any;\n  height?: number;\n  width?: number;\n};\n\nexport const BaseReadiumView =\n  UIManager.getViewManagerConfig(COMPONENT_NAME) != null\n    ? requireNativeComponent<BaseReadiumViewProps>(COMPONENT_NAME)\n    : () => {\n        throw new Error(LINKING_ERROR);\n      };\n"]}
+{"version":3,"sources":["BaseReadiumView.tsx"],"names":["BaseReadiumView","UIManager","getViewManagerConfig","COMPONENT_NAME","Error","LINKING_ERROR"],"mappings":";;;;;;;AAAA;;AAOA;;AAcO,MAAMA,eAAe,GAC1BC,uBAAUC,oBAAV,CAA+BC,qBAA/B,KAAkD,IAAlD,GACI,yCAA6CA,qBAA7C,CADJ,GAEI,MAAM;AACJ,QAAM,IAAIC,KAAJ,CAAUC,oBAAV,CAAN;AACD,CALA","sourcesContent":["import {\n  requireNativeComponent,\n  UIManager,\n  ViewStyle,\n} from 'react-native';\n\nimport type { Settings, Link, Locator, File, } from '../interfaces';\nimport { COMPONENT_NAME, LINKING_ERROR } from '../utils';\n\nexport type BaseReadiumViewProps = {\n  file: File;\n  location?: Locator;\n  settings?: Partial<Settings>;\n  style?: ViewStyle;\n  onLocationChange?: (locator: Locator) => void;\n  onTableOfContents?: (toc: Link[] | null) => void;\n  ref?: any;\n  height?: number;\n  width?: number;\n};\n\nexport const BaseReadiumView =\n  UIManager.getViewManagerConfig(COMPONENT_NAME) != null\n    ? requireNativeComponent<BaseReadiumViewProps>(COMPONENT_NAME)\n    : () => {\n        throw new Error(LINKING_ERROR);\n      };\n"]}

package/lib/commonjs/components/ReadiumView.js

@@ -24,6 +24,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 const ReadiumView = _ref => {
   let {
     onLocationChange: wrappedOnLocationChange,
+    onTableOfContents: wrappedOnTableOfContents,
     settings: unmappedSettings,
     ...props
   } = _ref;
@@ -56,6 +57,12 @@ const ReadiumView = _ref => {
       wrappedOnLocationChange(event.nativeEvent);
     }
   }, [wrappedOnLocationChange]);
+  const onTableOfContents = (0, _react.useCallback)(event => {
+    if (wrappedOnTableOfContents) {
+      const toc = event.nativeEvent.toc || null;
+      wrappedOnTableOfContents(toc);
+    }
+  }, [wrappedOnTableOfContents]);
   (0, _react.useEffect)(() => {
     if (_reactNative.Platform.OS === 'android') {
       const viewId = (0, _reactNative.findNodeHandle)(ref.current);
@@ -70,6 +77,7 @@ const ReadiumView = _ref => {
     width: width
   }, props, {
     onLocationChange: onLocationChange,
+    onTableOfContents: onTableOfContents,
     settings: unmappedSettings ? _interfaces.Settings.map(unmappedSettings) : undefined,
     ref: ref
   })));

package/lib/commonjs/components/ReadiumView.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ReadiumView.tsx"],"names":["ReadiumView","onLocationChange","wrappedOnLocationChange","settings","unmappedSettings","props","ref","height","width","setDimensions","onLayout","nativeEvent","layout","event","Platform","OS","viewId","current","styles","container","Settings","map","undefined","StyleSheet","create"],"mappings":";;;;;;;AAAA;;AACA;;AAGA;;AACA;;AAEA;;;;;;;;AAIO,MAAMA,WAAmC,GAAG,QAI7C;AAAA,MAJ8C;AAClDC,IAAAA,gBAAgB,EAAEC,uBADgC;AAElDC,IAAAA,QAAQ,EAAEC,gBAFwC;AAGlD,OAAGC;AAH+C,GAI9C;AACJ,QAAMC,GAAG,GAAG,mBAAO,IAAP,CAAZ;AACA,QAAM,CAAC;AAAEC,IAAAA,MAAF;AAAUC,IAAAA;AAAV,GAAD,EAAoBC,aAApB,IAAqC,qBAAqB;AAC9DD,IAAAA,KAAK,EAAE,CADuD;AAE9DD,IAAAA,MAAM,EAAE;AAFsD,GAArB,CAA3C,CAFI,CAMJ;;AACA,QAAMG,QAAQ,GAAG,wBAAY,SAAmD;AAAA,QAAlD;AAAEC,MAAAA,WAAW,EAAE;AAAEC,QAAAA,MAAM,EAAE;AAAEJ,UAAAA,KAAF;AAASD,UAAAA;AAAT;AAAV;AAAf,KAAkD;AAC9EE,IAAAA,aAAa,CAAC;AACZD,MAAAA,KAAK,EAAE,kCAAUA,KAAV,CADK;AAEZD,MAAAA,MAAM,EAAE,kCAAUA,MAAV;AAFI,KAAD,CAAb;AAID,GALgB,EAKd,EALc,CAAjB,CAPI,CAaJ;;AACA,QAAMN,gBAAgB,GAAG,wBAAaY,KAAD,IAAgB;AACnD,QAAIX,uBAAJ,EAA6B;AAC3BA,MAAAA,uBAAuB,CAACW,KAAK,CAACF,WAAP,CAAvB;AACD;AACF,GAJwB,EAItB,CAACT,uBAAD,CAJsB,CAAzB;AAMA,wBAAU,MAAM;AACd,QAAIY,sBAASC,EAAT,KAAgB,SAApB,EAA+B;AAC7B,YAAMC,MAAM,GAAG,iCAAeV,GAAG,CAACW,OAAnB,CAAf;AACA,iCAAeD,MAAf;AACD;AACF,GALD,EAKG,EALH;AAOA,sBACE,6BAAC,iBAAD;AACE,IAAA,KAAK,EAAEE,MAAM,CAACC,SADhB;AAEE,IAAA,QAAQ,EAAET;AAFZ,kBAIE,6BAAC,gCAAD;AACE,IAAA,MAAM,EAAEH,MADV;AAEE,IAAA,KAAK,EAAEC;AAFT,KAGMH,KAHN;AAIE,IAAA,gBAAgB,EAAEJ,gBAJpB;AAKE,IAAA,QAAQ,EAAEG,gBAAgB,GAAGgB,qBAASC,GAAT,CAAajB,gBAAb,CAAH,GAAoCkB,SALhE;AAME,IAAA,GAAG,EAAEhB;AANP,KAJF,CADF;AAeD,CA9CM;;;;AAgDP,MAAMY,MAAM,GAAGK,wBAAWC,MAAX,CAAkB;AAC/BL,EAAAA,SAAS,EAAE;AAAEX,IAAAA,KAAK,EAAE,MAAT;AAAiBD,IAAAA,MAAM,EAAE;AAAzB;AADoB,CAAlB,CAAf","sourcesContent":["import React, { useCallback, useState, useRef, useEffect } from 'react';\nimport { View, Platform, findNodeHandle, StyleSheet } from 'react-native';\n\nimport type { Dimensions } from '../interfaces';\nimport { Settings } from '../interfaces';\nimport { createFragment, getWidthOrHeightValue as dimension } from '../utils';\nimport type { BaseReadiumViewProps } from './BaseReadiumView';\nimport { BaseReadiumView } from './BaseReadiumView';\n\ntype ReadiumProps = BaseReadiumViewProps;\n\nexport const ReadiumView: React.FC<ReadiumProps> = ({\n  onLocationChange: wrappedOnLocationChange,\n  settings: unmappedSettings,\n  ...props\n}) => {\n  const ref = useRef(null);\n  const [{ height, width }, setDimensions] = useState<Dimensions>({\n    width: 0,\n    height: 0,\n  });\n  // set the view dimensions on layout\n  const onLayout = useCallback(({ nativeEvent: { layout: { width, height } }}) => {\n    setDimensions({\n      width: dimension(width),\n      height: dimension(height),\n    });\n  }, []);\n  // wrap the native onLocationChange and extract the raw event value\n  const onLocationChange = useCallback((event: any) => {\n    if (wrappedOnLocationChange) {\n      wrappedOnLocationChange(event.nativeEvent);\n    }\n  }, [wrappedOnLocationChange]);\n\n  useEffect(() => {\n    if (Platform.OS === 'android') {\n      const viewId = findNodeHandle(ref.current);\n      createFragment(viewId);\n    }\n  }, [])\n\n  return (\n    <View\n      style={styles.container}\n      onLayout={onLayout}\n    >\n      <BaseReadiumView\n        height={height}\n        width={width}\n        {...props}\n        onLocationChange={onLocationChange}\n        settings={unmappedSettings ? Settings.map(unmappedSettings) : undefined}\n        ref={ref}\n      />\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: { width: '100%', height: '100%' },\n});\n"]}
+{"version":3,"sources":["ReadiumView.tsx"],"names":["ReadiumView","onLocationChange","wrappedOnLocationChange","onTableOfContents","wrappedOnTableOfContents","settings","unmappedSettings","props","ref","height","width","setDimensions","onLayout","nativeEvent","layout","event","toc","Platform","OS","viewId","current","styles","container","Settings","map","undefined","StyleSheet","create"],"mappings":";;;;;;;AAAA;;AACA;;AAGA;;AACA;;AAEA;;;;;;;;AAIO,MAAMA,WAAmC,GAAG,QAK7C;AAAA,MAL8C;AAClDC,IAAAA,gBAAgB,EAAEC,uBADgC;AAElDC,IAAAA,iBAAiB,EAAEC,wBAF+B;AAGlDC,IAAAA,QAAQ,EAAEC,gBAHwC;AAIlD,OAAGC;AAJ+C,GAK9C;AACJ,QAAMC,GAAG,GAAG,mBAAO,IAAP,CAAZ;AACA,QAAM,CAAC;AAAEC,IAAAA,MAAF;AAAUC,IAAAA;AAAV,GAAD,EAAoBC,aAApB,IAAqC,qBAAqB;AAC9DD,IAAAA,KAAK,EAAE,CADuD;AAE9DD,IAAAA,MAAM,EAAE;AAFsD,GAArB,CAA3C,CAFI,CAMJ;;AACA,QAAMG,QAAQ,GAAG,wBAAY,SAAmD;AAAA,QAAlD;AAAEC,MAAAA,WAAW,EAAE;AAAEC,QAAAA,MAAM,EAAE;AAAEJ,UAAAA,KAAF;AAASD,UAAAA;AAAT;AAAV;AAAf,KAAkD;AAC9EE,IAAAA,aAAa,CAAC;AACZD,MAAAA,KAAK,EAAE,kCAAUA,KAAV,CADK;AAEZD,MAAAA,MAAM,EAAE,kCAAUA,MAAV;AAFI,KAAD,CAAb;AAID,GALgB,EAKd,EALc,CAAjB,CAPI,CAaJ;;AACA,QAAMR,gBAAgB,GAAG,wBAAac,KAAD,IAAgB;AACnD,QAAIb,uBAAJ,EAA6B;AAC3BA,MAAAA,uBAAuB,CAACa,KAAK,CAACF,WAAP,CAAvB;AACD;AACF,GAJwB,EAItB,CAACX,uBAAD,CAJsB,CAAzB;AAMA,QAAMC,iBAAiB,GAAG,wBAAaY,KAAD,IAAgB;AACpD,QAAIX,wBAAJ,EAA8B;AAC5B,YAAMY,GAAG,GAAGD,KAAK,CAACF,WAAN,CAAkBG,GAAlB,IAAyB,IAArC;AACAZ,MAAAA,wBAAwB,CAACY,GAAD,CAAxB;AACD;AACF,GALyB,EAKvB,CAACZ,wBAAD,CALuB,CAA1B;AAOA,wBAAU,MAAM;AACd,QAAIa,sBAASC,EAAT,KAAgB,SAApB,EAA+B;AAC7B,YAAMC,MAAM,GAAG,iCAAeX,GAAG,CAACY,OAAnB,CAAf;AACA,iCAAeD,MAAf;AACD;AACF,GALD,EAKG,EALH;AAOA,sBACE,6BAAC,iBAAD;AACE,IAAA,KAAK,EAAEE,MAAM,CAACC,SADhB;AAEE,IAAA,QAAQ,EAAEV;AAFZ,kBAIE,6BAAC,gCAAD;AACE,IAAA,MAAM,EAAEH,MADV;AAEE,IAAA,KAAK,EAAEC;AAFT,KAGMH,KAHN;AAIE,IAAA,gBAAgB,EAAEN,gBAJpB;AAKE,IAAA,iBAAiB,EAAEE,iBALrB;AAME,IAAA,QAAQ,EAAEG,gBAAgB,GAAGiB,qBAASC,GAAT,CAAalB,gBAAb,CAAH,GAAoCmB,SANhE;AAOE,IAAA,GAAG,EAAEjB;AAPP,KAJF,CADF;AAgBD,CAvDM;;;;AAyDP,MAAMa,MAAM,GAAGK,wBAAWC,MAAX,CAAkB;AAC/BL,EAAAA,SAAS,EAAE;AAAEZ,IAAAA,KAAK,EAAE,MAAT;AAAiBD,IAAAA,MAAM,EAAE;AAAzB;AADoB,CAAlB,CAAf","sourcesContent":["import React, { useCallback, useState, useRef, useEffect } from 'react';\nimport { View, Platform, findNodeHandle, StyleSheet } from 'react-native';\n\nimport type { Dimensions } from '../interfaces';\nimport { Settings } from '../interfaces';\nimport { createFragment, getWidthOrHeightValue as dimension } from '../utils';\nimport type { BaseReadiumViewProps } from './BaseReadiumView';\nimport { BaseReadiumView } from './BaseReadiumView';\n\ntype ReadiumProps = BaseReadiumViewProps;\n\nexport const ReadiumView: React.FC<ReadiumProps> = ({\n  onLocationChange: wrappedOnLocationChange,\n  onTableOfContents: wrappedOnTableOfContents,\n  settings: unmappedSettings,\n  ...props\n}) => {\n  const ref = useRef(null);\n  const [{ height, width }, setDimensions] = useState<Dimensions>({\n    width: 0,\n    height: 0,\n  });\n  // set the view dimensions on layout\n  const onLayout = useCallback(({ nativeEvent: { layout: { width, height } }}) => {\n    setDimensions({\n      width: dimension(width),\n      height: dimension(height),\n    });\n  }, []);\n  // wrap the native onLocationChange and extract the raw event value\n  const onLocationChange = useCallback((event: any) => {\n    if (wrappedOnLocationChange) {\n      wrappedOnLocationChange(event.nativeEvent);\n    }\n  }, [wrappedOnLocationChange]);\n\n  const onTableOfContents = useCallback((event: any) => {\n    if (wrappedOnTableOfContents) {\n      const toc = event.nativeEvent.toc || null;\n      wrappedOnTableOfContents(toc);\n    }\n  }, [wrappedOnTableOfContents]);\n\n  useEffect(() => {\n    if (Platform.OS === 'android') {\n      const viewId = findNodeHandle(ref.current);\n      createFragment(viewId);\n    }\n  }, [])\n\n  return (\n    <View\n      style={styles.container}\n      onLayout={onLayout}\n    >\n      <BaseReadiumView\n        height={height}\n        width={width}\n        {...props}\n        onLocationChange={onLocationChange}\n        onTableOfContents={onTableOfContents}\n        settings={unmappedSettings ? Settings.map(unmappedSettings) : undefined}\n        ref={ref}\n      />\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: { width: '100%', height: '100%' },\n});\n"]}

package/lib/commonjs/index.js

@@ -3,11 +3,21 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {
+  RANGES: true
+};
+Object.defineProperty(exports, "RANGES", {
+  enumerable: true,
+  get: function () {
+    return _utils.RANGES;
+  }
+});
 
 var _enums = require("./enums");
 
 Object.keys(_enums).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _enums[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -21,6 +31,7 @@ var _interfaces = require("./interfaces");
 
 Object.keys(_interfaces).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _interfaces[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -30,10 +41,13 @@ Object.keys(_interfaces).forEach(function (key) {
   });
 });
 
+var _utils = require("./utils");
+
 var _ReadiumView = require("./components/ReadiumView");
 
 Object.keys(_ReadiumView).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ReadiumView[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,

package/lib/commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.tsx"],"names":[],"mappings":";;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from './enums';\nexport * from './interfaces';\nexport * from './components/ReadiumView';\n"]}
+{"version":3,"sources":["index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from './enums';\nexport * from './interfaces';\nexport { RANGES } from './utils';\nexport * from './components/ReadiumView';\n"]}

package/lib/commonjs/interfaces/Link.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=Link.js.map

package/lib/commonjs/interfaces/Link.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}

package/lib/commonjs/interfaces/index.js

@@ -30,6 +30,19 @@ Object.keys(_File).forEach(function (key) {
   });
 });
 
+var _Link = require("./Link");
+
+Object.keys(_Link).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Link[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Link[key];
+    }
+  });
+});
+
 var _Locator = require("./Locator");
 
 Object.keys(_Locator).forEach(function (key) {

package/lib/commonjs/interfaces/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from './Dimensions';\nexport * from './File';\nexport * from './Locator';\nexport * from './Settings';\n"]}
+{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from './Dimensions';\nexport * from './File';\nexport * from './Link';\nexport * from './Locator';\nexport * from './Settings';\n"]}

package/lib/module/components/BaseReadiumView.js.map

@@ -1 +1 @@
-{"version":3,"sources":["BaseReadiumView.tsx"],"names":["requireNativeComponent","UIManager","COMPONENT_NAME","LINKING_ERROR","BaseReadiumView","getViewManagerConfig","Error"],"mappings":"AAAA,SACEA,sBADF,EAEEC,SAFF,QAIO,cAJP;AAOA,SAASC,cAAT,EAAyBC,aAAzB,QAA8C,UAA9C;AAaA,OAAO,MAAMC,eAAe,GAC1BH,SAAS,CAACI,oBAAV,CAA+BH,cAA/B,KAAkD,IAAlD,GACIF,sBAAsB,CAAuBE,cAAvB,CAD1B,GAEI,MAAM;AACJ,QAAM,IAAII,KAAJ,CAAUH,aAAV,CAAN;AACD,CALA","sourcesContent":["import {\n  requireNativeComponent,\n  UIManager,\n  ViewStyle,\n} from 'react-native';\n\nimport type { Settings, Locator, File, } from '../interfaces';\nimport { COMPONENT_NAME, LINKING_ERROR } from '../utils';\n\nexport type BaseReadiumViewProps = {\n  file: File;\n  location?: Locator;\n  settings?: Partial<Settings>;\n  style?: ViewStyle;\n  onLocationChange?: (locator: Locator) => void;\n  ref?: any;\n  height?: number;\n  width?: number;\n};\n\nexport const BaseReadiumView =\n  UIManager.getViewManagerConfig(COMPONENT_NAME) != null\n    ? requireNativeComponent<BaseReadiumViewProps>(COMPONENT_NAME)\n    : () => {\n        throw new Error(LINKING_ERROR);\n      };\n"]}
+{"version":3,"sources":["BaseReadiumView.tsx"],"names":["requireNativeComponent","UIManager","COMPONENT_NAME","LINKING_ERROR","BaseReadiumView","getViewManagerConfig","Error"],"mappings":"AAAA,SACEA,sBADF,EAEEC,SAFF,QAIO,cAJP;AAOA,SAASC,cAAT,EAAyBC,aAAzB,QAA8C,UAA9C;AAcA,OAAO,MAAMC,eAAe,GAC1BH,SAAS,CAACI,oBAAV,CAA+BH,cAA/B,KAAkD,IAAlD,GACIF,sBAAsB,CAAuBE,cAAvB,CAD1B,GAEI,MAAM;AACJ,QAAM,IAAII,KAAJ,CAAUH,aAAV,CAAN;AACD,CALA","sourcesContent":["import {\n  requireNativeComponent,\n  UIManager,\n  ViewStyle,\n} from 'react-native';\n\nimport type { Settings, Link, Locator, File, } from '../interfaces';\nimport { COMPONENT_NAME, LINKING_ERROR } from '../utils';\n\nexport type BaseReadiumViewProps = {\n  file: File;\n  location?: Locator;\n  settings?: Partial<Settings>;\n  style?: ViewStyle;\n  onLocationChange?: (locator: Locator) => void;\n  onTableOfContents?: (toc: Link[] | null) => void;\n  ref?: any;\n  height?: number;\n  width?: number;\n};\n\nexport const BaseReadiumView =\n  UIManager.getViewManagerConfig(COMPONENT_NAME) != null\n    ? requireNativeComponent<BaseReadiumViewProps>(COMPONENT_NAME)\n    : () => {\n        throw new Error(LINKING_ERROR);\n      };\n"]}

package/lib/module/components/ReadiumView.js

@@ -8,6 +8,7 @@ import { BaseReadiumView } from './BaseReadiumView';
 export const ReadiumView = _ref => {
   let {
     onLocationChange: wrappedOnLocationChange,
+    onTableOfContents: wrappedOnTableOfContents,
     settings: unmappedSettings,
     ...props
   } = _ref;
@@ -40,6 +41,12 @@ export const ReadiumView = _ref => {
       wrappedOnLocationChange(event.nativeEvent);
     }
   }, [wrappedOnLocationChange]);
+  const onTableOfContents = useCallback(event => {
+    if (wrappedOnTableOfContents) {
+      const toc = event.nativeEvent.toc || null;
+      wrappedOnTableOfContents(toc);
+    }
+  }, [wrappedOnTableOfContents]);
   useEffect(() => {
     if (Platform.OS === 'android') {
       const viewId = findNodeHandle(ref.current);
@@ -54,6 +61,7 @@ export const ReadiumView = _ref => {
     width: width
   }, props, {
     onLocationChange: onLocationChange,
+    onTableOfContents: onTableOfContents,
     settings: unmappedSettings ? Settings.map(unmappedSettings) : undefined,
     ref: ref
   })));

package/lib/module/components/ReadiumView.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ReadiumView.tsx"],"names":["React","useCallback","useState","useRef","useEffect","View","Platform","findNodeHandle","StyleSheet","Settings","createFragment","getWidthOrHeightValue","dimension","BaseReadiumView","ReadiumView","onLocationChange","wrappedOnLocationChange","settings","unmappedSettings","props","ref","height","width","setDimensions","onLayout","nativeEvent","layout","event","OS","viewId","current","styles","container","map","undefined","create"],"mappings":";;AAAA,OAAOA,KAAP,IAAgBC,WAAhB,EAA6BC,QAA7B,EAAuCC,MAAvC,EAA+CC,SAA/C,QAAgE,OAAhE;AACA,SAASC,IAAT,EAAeC,QAAf,EAAyBC,cAAzB,EAAyCC,UAAzC,QAA2D,cAA3D;AAGA,SAASC,QAAT,QAAyB,eAAzB;AACA,SAASC,cAAT,EAAyBC,qBAAqB,IAAIC,SAAlD,QAAmE,UAAnE;AAEA,SAASC,eAAT,QAAgC,mBAAhC;AAIA,OAAO,MAAMC,WAAmC,GAAG,QAI7C;AAAA,MAJ8C;AAClDC,IAAAA,gBAAgB,EAAEC,uBADgC;AAElDC,IAAAA,QAAQ,EAAEC,gBAFwC;AAGlD,OAAGC;AAH+C,GAI9C;AACJ,QAAMC,GAAG,GAAGjB,MAAM,CAAC,IAAD,CAAlB;AACA,QAAM,CAAC;AAAEkB,IAAAA,MAAF;AAAUC,IAAAA;AAAV,GAAD,EAAoBC,aAApB,IAAqCrB,QAAQ,CAAa;AAC9DoB,IAAAA,KAAK,EAAE,CADuD;AAE9DD,IAAAA,MAAM,EAAE;AAFsD,GAAb,CAAnD,CAFI,CAMJ;;AACA,QAAMG,QAAQ,GAAGvB,WAAW,CAAC,SAAmD;AAAA,QAAlD;AAAEwB,MAAAA,WAAW,EAAE;AAAEC,QAAAA,MAAM,EAAE;AAAEJ,UAAAA,KAAF;AAASD,UAAAA;AAAT;AAAV;AAAf,KAAkD;AAC9EE,IAAAA,aAAa,CAAC;AACZD,MAAAA,KAAK,EAAEV,SAAS,CAACU,KAAD,CADJ;AAEZD,MAAAA,MAAM,EAAET,SAAS,CAACS,MAAD;AAFL,KAAD,CAAb;AAID,GAL2B,EAKzB,EALyB,CAA5B,CAPI,CAaJ;;AACA,QAAMN,gBAAgB,GAAGd,WAAW,CAAE0B,KAAD,IAAgB;AACnD,QAAIX,uBAAJ,EAA6B;AAC3BA,MAAAA,uBAAuB,CAACW,KAAK,CAACF,WAAP,CAAvB;AACD;AACF,GAJmC,EAIjC,CAACT,uBAAD,CAJiC,CAApC;AAMAZ,EAAAA,SAAS,CAAC,MAAM;AACd,QAAIE,QAAQ,CAACsB,EAAT,KAAgB,SAApB,EAA+B;AAC7B,YAAMC,MAAM,GAAGtB,cAAc,CAACa,GAAG,CAACU,OAAL,CAA7B;AACApB,MAAAA,cAAc,CAACmB,MAAD,CAAd;AACD;AACF,GALQ,EAKN,EALM,CAAT;AAOA,sBACE,oBAAC,IAAD;AACE,IAAA,KAAK,EAAEE,MAAM,CAACC,SADhB;AAEE,IAAA,QAAQ,EAAER;AAFZ,kBAIE,oBAAC,eAAD;AACE,IAAA,MAAM,EAAEH,MADV;AAEE,IAAA,KAAK,EAAEC;AAFT,KAGMH,KAHN;AAIE,IAAA,gBAAgB,EAAEJ,gBAJpB;AAKE,IAAA,QAAQ,EAAEG,gBAAgB,GAAGT,QAAQ,CAACwB,GAAT,CAAaf,gBAAb,CAAH,GAAoCgB,SALhE;AAME,IAAA,GAAG,EAAEd;AANP,KAJF,CADF;AAeD,CA9CM;AAgDP,MAAMW,MAAM,GAAGvB,UAAU,CAAC2B,MAAX,CAAkB;AAC/BH,EAAAA,SAAS,EAAE;AAAEV,IAAAA,KAAK,EAAE,MAAT;AAAiBD,IAAAA,MAAM,EAAE;AAAzB;AADoB,CAAlB,CAAf","sourcesContent":["import React, { useCallback, useState, useRef, useEffect } from 'react';\nimport { View, Platform, findNodeHandle, StyleSheet } from 'react-native';\n\nimport type { Dimensions } from '../interfaces';\nimport { Settings } from '../interfaces';\nimport { createFragment, getWidthOrHeightValue as dimension } from '../utils';\nimport type { BaseReadiumViewProps } from './BaseReadiumView';\nimport { BaseReadiumView } from './BaseReadiumView';\n\ntype ReadiumProps = BaseReadiumViewProps;\n\nexport const ReadiumView: React.FC<ReadiumProps> = ({\n  onLocationChange: wrappedOnLocationChange,\n  settings: unmappedSettings,\n  ...props\n}) => {\n  const ref = useRef(null);\n  const [{ height, width }, setDimensions] = useState<Dimensions>({\n    width: 0,\n    height: 0,\n  });\n  // set the view dimensions on layout\n  const onLayout = useCallback(({ nativeEvent: { layout: { width, height } }}) => {\n    setDimensions({\n      width: dimension(width),\n      height: dimension(height),\n    });\n  }, []);\n  // wrap the native onLocationChange and extract the raw event value\n  const onLocationChange = useCallback((event: any) => {\n    if (wrappedOnLocationChange) {\n      wrappedOnLocationChange(event.nativeEvent);\n    }\n  }, [wrappedOnLocationChange]);\n\n  useEffect(() => {\n    if (Platform.OS === 'android') {\n      const viewId = findNodeHandle(ref.current);\n      createFragment(viewId);\n    }\n  }, [])\n\n  return (\n    <View\n      style={styles.container}\n      onLayout={onLayout}\n    >\n      <BaseReadiumView\n        height={height}\n        width={width}\n        {...props}\n        onLocationChange={onLocationChange}\n        settings={unmappedSettings ? Settings.map(unmappedSettings) : undefined}\n        ref={ref}\n      />\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: { width: '100%', height: '100%' },\n});\n"]}
+{"version":3,"sources":["ReadiumView.tsx"],"names":["React","useCallback","useState","useRef","useEffect","View","Platform","findNodeHandle","StyleSheet","Settings","createFragment","getWidthOrHeightValue","dimension","BaseReadiumView","ReadiumView","onLocationChange","wrappedOnLocationChange","onTableOfContents","wrappedOnTableOfContents","settings","unmappedSettings","props","ref","height","width","setDimensions","onLayout","nativeEvent","layout","event","toc","OS","viewId","current","styles","container","map","undefined","create"],"mappings":"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","sourcesContent":["import React, { useCallback, useState, useRef, useEffect } from 'react';\nimport { View, Platform, findNodeHandle, StyleSheet } from 'react-native';\n\nimport type { Dimensions } from '../interfaces';\nimport { Settings } from '../interfaces';\nimport { createFragment, getWidthOrHeightValue as dimension } from '../utils';\nimport type { BaseReadiumViewProps } from './BaseReadiumView';\nimport { BaseReadiumView } from './BaseReadiumView';\n\ntype ReadiumProps = BaseReadiumViewProps;\n\nexport const ReadiumView: React.FC<ReadiumProps> = ({\n  onLocationChange: wrappedOnLocationChange,\n  onTableOfContents: wrappedOnTableOfContents,\n  settings: unmappedSettings,\n  ...props\n}) => {\n  const ref = useRef(null);\n  const [{ height, width }, setDimensions] = useState<Dimensions>({\n    width: 0,\n    height: 0,\n  });\n  // set the view dimensions on layout\n  const onLayout = useCallback(({ nativeEvent: { layout: { width, height } }}) => {\n    setDimensions({\n      width: dimension(width),\n      height: dimension(height),\n    });\n  }, []);\n  // wrap the native onLocationChange and extract the raw event value\n  const onLocationChange = useCallback((event: any) => {\n    if (wrappedOnLocationChange) {\n      wrappedOnLocationChange(event.nativeEvent);\n    }\n  }, [wrappedOnLocationChange]);\n\n  const onTableOfContents = useCallback((event: any) => {\n    if (wrappedOnTableOfContents) {\n      const toc = event.nativeEvent.toc || null;\n      wrappedOnTableOfContents(toc);\n    }\n  }, [wrappedOnTableOfContents]);\n\n  useEffect(() => {\n    if (Platform.OS === 'android') {\n      const viewId = findNodeHandle(ref.current);\n      createFragment(viewId);\n    }\n  }, [])\n\n  return (\n    <View\n      style={styles.container}\n      onLayout={onLayout}\n    >\n      <BaseReadiumView\n        height={height}\n        width={width}\n        {...props}\n        onLocationChange={onLocationChange}\n        onTableOfContents={onTableOfContents}\n        settings={unmappedSettings ? Settings.map(unmappedSettings) : undefined}\n        ref={ref}\n      />\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: { width: '100%', height: '100%' },\n});\n"]}

package/lib/module/index.js

@@ -1,4 +1,5 @@
 export * from './enums';
 export * from './interfaces';
+export { RANGES } from './utils';
 export * from './components/ReadiumView';
 //# sourceMappingURL=index.js.map

package/lib/module/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.tsx"],"names":[],"mappings":"AAAA,cAAc,SAAd;AACA,cAAc,cAAd;AACA,cAAc,0BAAd","sourcesContent":["export * from './enums';\nexport * from './interfaces';\nexport * from './components/ReadiumView';\n"]}
+{"version":3,"sources":["index.tsx"],"names":["RANGES"],"mappings":"AAAA,cAAc,SAAd;AACA,cAAc,cAAd;AACA,SAASA,MAAT,QAAuB,SAAvB;AACA,cAAc,0BAAd","sourcesContent":["export * from './enums';\nexport * from './interfaces';\nexport { RANGES } from './utils';\nexport * from './components/ReadiumView';\n"]}

package/lib/module/interfaces/Link.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=Link.js.map

package/lib/module/interfaces/Link.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}

package/lib/module/interfaces/index.js

@@ -1,5 +1,6 @@
 export * from './Dimensions';
 export * from './File';
+export * from './Link';
 export * from './Locator';
 export * from './Settings';
 //# sourceMappingURL=index.js.map

package/lib/module/interfaces/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAd;AACA,cAAc,QAAd;AACA,cAAc,WAAd;AACA,cAAc,YAAd","sourcesContent":["export * from './Dimensions';\nexport * from './File';\nexport * from './Locator';\nexport * from './Settings';\n"]}
+{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAd;AACA,cAAc,QAAd;AACA,cAAc,QAAd;AACA,cAAc,WAAd;AACA,cAAc,YAAd","sourcesContent":["export * from './Dimensions';\nexport * from './File';\nexport * from './Link';\nexport * from './Locator';\nexport * from './Settings';\n"]}

package/lib/typescript/components/BaseReadiumView.d.ts

@@ -1,11 +1,12 @@
 import { ViewStyle } from 'react-native';
-import type { Settings, Locator, File } from '../interfaces';
+import type { Settings, Link, Locator, File } from '../interfaces';
 export declare type BaseReadiumViewProps = {
     file: File;
     location?: Locator;
     settings?: Partial<Settings>;
     style?: ViewStyle;
     onLocationChange?: (locator: Locator) => void;
+    onTableOfContents?: (toc: Link[] | null) => void;
     ref?: any;
     height?: number;
     width?: number;

package/lib/typescript/index.d.ts

@@ -1,3 +1,4 @@
 export * from './enums';
 export * from './interfaces';
+export { RANGES } from './utils';
 export * from './components/ReadiumView';

package/lib/typescript/interfaces/Link.d.ts

@@ -0,0 +1,18 @@
+/**
+ * An interface representing the Readium Link object.
+ */
+export interface Link {
+    href: string;
+    templated: boolean;
+    type?: string | null;
+    title?: string | null;
+    rels?: Set<string>;
+    properties?: any;
+    height?: number | null;
+    width?: number | null;
+    bitrate?: number | null;
+    duration?: number | null;
+    languages?: string[];
+    alternates?: Link[];
+    children?: Link[];
+}

package/lib/typescript/interfaces/Locator.d.ts

@@ -4,11 +4,11 @@
 export interface Locator {
     href: string;
     type: string;
-    target: number;
+    target?: number;
     title?: string;
-    locations: {
-        position: number;
+    locations?: {
         progression: number;
-        totalProgression: number;
+        position?: number;
+        totalProgression?: number;
     };
 }

package/lib/typescript/interfaces/index.d.ts

@@ -1,4 +1,5 @@
 export * from './Dimensions';
 export * from './File';
+export * from './Link';
 export * from './Locator';
 export * from './Settings';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-readium",
-  "version": "1.0.0-alpha.8",
+  "version": "1.0.0-alpha.9",
   "description": "A react-native wrapper for https://readium.org/",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

package/src/components/BaseReadiumView.tsx

@@ -4,7 +4,7 @@ import {
   ViewStyle,
 } from 'react-native';
 
-import type { Settings, Locator, File, } from '../interfaces';
+import type { Settings, Link, Locator, File, } from '../interfaces';
 import { COMPONENT_NAME, LINKING_ERROR } from '../utils';
 
 export type BaseReadiumViewProps = {
@@ -13,6 +13,7 @@ export type BaseReadiumViewProps = {
   settings?: Partial<Settings>;
   style?: ViewStyle;
   onLocationChange?: (locator: Locator) => void;
+  onTableOfContents?: (toc: Link[] | null) => void;
   ref?: any;
   height?: number;
   width?: number;

package/src/components/ReadiumView.tsx

@@ -11,6 +11,7 @@ type ReadiumProps = BaseReadiumViewProps;
 
 export const ReadiumView: React.FC<ReadiumProps> = ({
   onLocationChange: wrappedOnLocationChange,
+  onTableOfContents: wrappedOnTableOfContents,
   settings: unmappedSettings,
   ...props
 }) => {
@@ -33,6 +34,13 @@ export const ReadiumView: React.FC<ReadiumProps> = ({
     }
   }, [wrappedOnLocationChange]);
 
+  const onTableOfContents = useCallback((event: any) => {
+    if (wrappedOnTableOfContents) {
+      const toc = event.nativeEvent.toc || null;
+      wrappedOnTableOfContents(toc);
+    }
+  }, [wrappedOnTableOfContents]);
+
   useEffect(() => {
     if (Platform.OS === 'android') {
       const viewId = findNodeHandle(ref.current);
@@ -50,6 +58,7 @@ export const ReadiumView: React.FC<ReadiumProps> = ({
         width={width}
         {...props}
         onLocationChange={onLocationChange}
+        onTableOfContents={onTableOfContents}
         settings={unmappedSettings ? Settings.map(unmappedSettings) : undefined}
         ref={ref}
       />

package/src/index.tsx

@@ -1,3 +1,4 @@
 export * from './enums';
 export * from './interfaces';
+export { RANGES } from './utils';
 export * from './components/ReadiumView';

package/src/interfaces/Link.ts

@@ -0,0 +1,18 @@
+/**
+ * An interface representing the Readium Link object.
+ */
+export interface Link {
+  href: string;
+  templated: boolean;
+  type?: string | null;
+  title?: string | null;
+  rels?: Set<string>;
+  properties?: any;
+  height?: number | null;
+  width?: number | null;
+  bitrate?: number | null;
+  duration?: number | null;
+  languages?: string[];
+  alternates?: Link[];
+  children?: Link[];
+}

package/src/interfaces/Locator.ts

@@ -4,11 +4,11 @@
 export interface Locator {
   href: string;
   type: string;
-  target: number;
+  target?: number;
   title?: string;
-  locations: {
-    position: number;
+  locations?: {
     progression: number;
-    totalProgression: number;
+    position?: number;
+    totalProgression?: number;
   };
 }

package/src/interfaces/index.ts

@@ -1,4 +1,5 @@
 export * from './Dimensions';
 export * from './File';
+export * from './Link';
 export * from './Locator';
 export * from './Settings';