goNext and goPrevious dosnt work!!!

[Mehdi Hosseini]

goNext and goPrevious dosnt work!!!

[João Victor Moreira Soares]

Can you provide me with more details? are you calling these methods within context?

If possible, provide an example of the problem

[Mehdi Hosseini]

Can you provide me with more details? are you calling these methods within context?

If possible, provide an example of the problem

I wrapped my entire component in a ReaderProvider and also used the const { goPrevious, goNext, ... } = useReader() structure to add the hooks as per the document and after calling the methods, the mentioned methods do nothing.
Also, the {changeTheme,goToLocation,changeFontFamily} methods does not work in lastest react-native versions

[smallbone]

It seems that the ReactContext data is not refreshed when you following the documentation. You can create a wrapper component(Inner) for the Reader like this to workaround it:

function Inner() {
  const { width, height } = useWindowDimensions();
  const { addMark, removeMark, goNext, goPrevious } = useReader();
  const handleAddMark = (text, cfiRange) => {
    addMark(text, cfiRange);
  };
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <TouchableOpacity onPress={() => goPrevious()}>
        <Text>Previous</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => goNext()}>
        <Text>Next</Text>
      </TouchableOpacity>
      <Reader
        src="https://s3.amazonaws.com/moby-dick/OPS/package.opf"
        width={width}
        height={height}
        fileSystem={useFileSystem}
      />
    </SafeAreaView>
  );
}

export function Basic() {
  return (
    <ReaderProvider>
      <Inner />
    </ReaderProvider>
  );
}

[João Victor Moreira Soares]

It seems that the ReactContext data is not refreshed when you following the documentation. You can create a wrapper component(Inner) for the Reader like this to workaround it:

function Inner() {
  const { width, height } = useWindowDimensions();
  const { addMark, removeMark, goNext, goPrevious } = useReader();
  const handleAddMark = (text, cfiRange) => {
    addMark(text, cfiRange);
  };
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <TouchableOpacity onPress={() => goPrevious()}>
        <Text>Previous</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => goNext()}>
        <Text>Next</Text>
      </TouchableOpacity>
      <Reader
        src="https://s3.amazonaws.com/moby-dick/OPS/package.opf"
        width={width}
        height={height}
        fileSystem={useFileSystem}
      />
    </SafeAreaView>
  );
}

export function Basic() {
  return (
    <ReaderProvider>
      <Inner />
    </ReaderProvider>
  );
}

Yes! To use the useReader hook methods you must create a wrapper component and use them inside them. The hook will not work outside of <ReaderProvider>

[João Victor Moreira Soares]

I'll close this issue, if you need you can reopen this