5-stones / react-native-readium

📚 📖 React Native ebook reader for iOS, Android, & Web via Readium
MIT License
83 stars 25 forks source link

Help Needed In Using File #31

Closed Faseeh-Abbas-Khan closed 1 year ago

Faseeh-Abbas-Khan commented 1 year ago

I need help on giving file path to ReadiumView @jspizziri @mrogers-5s @Ken-Michalak

import { observer } from "mobx-react-lite"
import React, { FC, useEffect, useMemo } from "react"
import {
  ActivityIndicator,
  StyleSheet,
  View,
  SafeAreaView,
  useWindowDimensions
} from "react-native"
import { Reader, ReaderProvider, useReader, ePubCfi } from '@epubjs-react-native/core'
import { useFileSystem } from '@epubjs-react-native/file-system'
import { AppStackScreenProps } from "../../navigators"
import WebView from "react-native-webview"
import AppHeader from "../../components/AppHeader"
import { spacing } from "../../theme"
import { ReadiumView } from 'react-native-readium';
import type { File } from 'react-native-readium';

export const ReadFile: FC<AppStackScreenProps<"ReadFile">> = observer(({ route }) => {
  const { width, height } = useWindowDimensions();
  const [file] = React.useState<File>({
    url: require('../../../assets/storybook/book.epub'),
  });

  return (
    <SafeAreaView style={styles.container}>
      <View style={{flex:1, marginTop: spacing.extraLarge}}>
      <AppHeader backButton/>
      </View>
      <ReadiumView file={file}/>
    </SafeAreaView>
  )
})

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'orange',
  },
})
jspizziri commented 1 year ago

@Faseeh-Abbas-Khan currently we're using RNFS to store files. It's been a while since I've tried doing it directly with require (if ever). I'd recommend trying to use RNFS as require isn't a big priority for us (unless you'd like to do debugging and submit a PR).

Take a look at how it's done in the example: https://github.com/5-stones/react-native-readium/blob/main/example/src/components/Reader.tsx

Faseeh-Abbas-Khan commented 1 year ago

@jspizziri I have managed to open the file thanks to the example you have given, but the epub file I am using has interaction, sounds, and animation but, I cannot make them run for my particular file, can you also suggest me any specific change to be made to make them run.

jspizziri commented 1 year ago

@Faseeh-Abbas-Khan I've never worked with an epub like that. You'll need to do some digging on the underlying readium libraries to see what is supported there and how.

mickael-menu commented 1 year ago

If the EPUB is a fixed-layout, then interactions won't work in Readium on Android, see https://github.com/readium/kotlin-toolkit/issues/131