feat(web): remove next and previous buttons in favor of a ref api

example-web/src/App.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
 import { View } from 'react-native';
 import './App.css';
 // @ts-ignore - FIXME: webpack not resolving types
@@ -9,12 +9,14 @@ import type { Locator, Link } from 'react-native-readium';
 import {
   Settings as ReaderSettings,
   TableOfContents,
+  ReaderButton,
 } from './components';
 
 const DEFAULT_SETTINGS = new Settings();
 DEFAULT_SETTINGS.appearance = Appearance.NIGHT;
 
 function App() {
+  const ref = useRef<any>();
   const [toc, setToc] = useState<Link[]>([]);
   const [location, setLocation] = useState<Link | Locator>();
   const [settings, setSettings] = useState<Partial<Settings>>(DEFAULT_SETTINGS);
@@ -34,8 +36,11 @@ function App() {
           onSettingsChanged={(s) => setSettings(s)}
         />
       </View>
-      <View style={{ height: '90%' }}>
+      <View style={{ flexDirection: 'row', width: '100%', height: '90%' }}>
+        <ReaderButton name="chevron-left" onPress={() => ref.current?.nextPage() } />
+        <View style={{ width: '80%', height: '100%' }}>
         <ReadiumView
+          ref={ref}
           file={{
             url: 'https://alice.dita.digital/manifest.json',
             initialLocation: {
@@ -55,6 +60,8 @@ function App() {
           }}
         />
       </View>
+        <ReaderButton name="chevron-right" onPress={() => ref.current?.prevPage() } />
+      </View>
     </div>
   );
 }

example-web/src/components/ReaderButton.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import { Button, Icon } from '@rneui/themed';
+
+export interface ReaderButtonProps {
+  name: string;
+  onPress: () => void;
+}
+
+export const ReaderButton: React.FC<ReaderButtonProps> = ({
+  name,
+  onPress,
+}) => {
+  return (
+    <Button
+      icon={<Icon name={name} size={60} />}
+      onPress={onPress}
+      containerStyle={[{ width: '10%' }, styles.height]}
+      style={styles.height}
+      buttonStyle={styles.height}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  height: {
+    height: '100%',
+  },
+});

example-web/src/components/index.ts

@@ -1,2 +1,3 @@
 export * from './Settings';
 export * from './TableOfContents';
+export * from './ReaderButton';

src/web/ReadiumView.tsx

@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { useImperativeHandle } from 'react';
+import type { CSSProperties } from 'react';
 import { View, StyleSheet } from 'react-native';
 
 import type { ReadiumProps } from '../components/ReadiumView';
@@ -8,41 +9,62 @@ import {
   useLocationObserver,
 } from './hooks';
 
-export const ReadiumView: React.FC<ReadiumProps> = ({
+export const ReadiumView = React.forwardRef<{
+  nextPage: () => void;
+  prevPage: () => void;
+}, ReadiumProps>(({
   file,
   settings,
   location,
   onLocationChange,
   onTableOfContents,
-}) => {
+  style = {},
+  height,
+  width,
+}, ref) => {
   const readerRef = useReaderRef({
     file,
     onLocationChange,
     onTableOfContents,
   });
   const reader = readerRef.current;
 
+  useImperativeHandle(ref, () => ({
+    nextPage: () => {
+      readerRef.current?.nextPage();
+    },
+    prevPage: () => {
+      readerRef.current?.previousPage();
+    },
+  }));
+
   useSettingsObserver(reader, settings);
   useLocationObserver(reader, location);
 
+  const mainStyle = {
+    ...styles.maximize,
+    ...(style as CSSProperties),
+  };
+
+  if (height) mainStyle.height = height;
+  if (width) mainStyle.width = width;
+
   return (
     <View style={styles.container}>
       {!reader && <div style={styles.loader}>Loading reader...</div>}
       <div id="D2Reader-Container" style={styles.d2Container}>
-        {reader && <button onClick={reader.previousPage} style={styles.button}>&lsaquo;</button>}
         <main
-          style={styles.maximize}
+          style={mainStyle}
           tabIndex={-1}
           id="iframe-wrapper"
         >
           <div id="reader-loading" className="loading" style={styles.loader}></div>
           <div id="reader-error" className="error"></div>
         </main>
-        {reader && <button onClick={reader.nextPage} style={styles.button}>&rsaquo;</button>}
       </div>
     </View>
   );
-};
+});
 
 const styles = StyleSheet.create({
   container: {
@@ -55,7 +77,7 @@ const styles = StyleSheet.create({
     display: 'flex',
   },
   maximize: {
-    width: 'calc(100% - 100px)',
+    width: '100%',
     height: '100%',
     display: 'flex',
   },

src/web/hooks/useReaderRef.ts

@@ -15,6 +15,7 @@ export const useReaderRef = ({
     D2Reader.load({
       url: new URL(file.url),
       lastReadingPosition: file.initialLocation,
+      userSettings: { verticalScroll: false },
       api: {
         updateCurrentLocation: async (location: Locator) => {
           if (onLocationChange) onLocationChange(location);