Highlight problem on android with streamer

[HDSnarathorn]

Hi,

I try to create highlight when the user selects text, but when I change to the next 5 pages then come back. The highlight is gone. sometimes time it shows sometimes is not.

`/**

• Sample React Native App
• https://github.com/facebook/react-native
• @format
• @flow */

import React, { Component } from 'react'; import { Platform, StyleSheet, Text, View, ScrollView } from 'react-native'; import { Epub, Streamer } from 'epubjs-rn';

const instructions = Platform.select({ ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu', android: 'Double tap R on your keyboard to reload,\n' + 'Shake or press menu button for dev menu', });

export default class App extends Component {

constructor(props) { super(props); this.state = { src: "", //url : "https://s3-us-west-2.amazonaws.com/pressbooks-samplefiles/MetamorphosisJacksonTheme/Metamorphosis-jackson.epub", url: "http://192.168.2.40/epub/book2.epub", sliderDisabled: false, }; this.streamer = new Streamer(); }

componentDidMount() {

console.log('EPUB_TEST ==> : componentDidMount')
this.streamer.start()
  .then((origin) => {
    this.setState({ origin })
    console.log('EPUB_TEST ==> : setState ' + origin)
    console.log('EPUB_TEST ==> : get ' + this.state.url)
    return this.streamer.get(this.state.url);
  })
  .then((src) => {
    console.log('EPUB_TEST ==> : get source ' + src)
    return this.setState({ src });
  })
  .catch((error) => {
    console.log('EPUB_TEST ==> : Error : ' + error)

  });

}

componentWillUnmount() { this.streamer.kill(); }

render() { return (

  <Epub
    ref={component => this.epub = component}
    height='100%'
    //src={"https://s3.amazonaws.com/epubjs/books/moby-dick/OPS/package.opf"}
    //src={ "http://192.168.2.40/epub/book4.epub" }
    src={this.state.src}

    onLocationChange={(visibleLocation) => {
      console.log("locationChanged : ", visibleLocation.start.displayed)

    }}

    onLocationsReady={(locations) => {

      this.setState({ sliderDisabled: false });
      console.log("onLocationsReady : " + locations);
    }}

    onReady={(book) => {

      this.setState({
        book: book,
        title: book.package.metadata.title,
        toc: book.navigation.toc,
        isscreenloading: false
      });

    }}

    onPress={(cfi, position, rendition) => {

      console.log("press", cfi);
    }}

    onLongPress={(cfi, rendition, cfiRange) => {
      console.log("longpress", cfiRange);
      //rendition.highlight(cfiRange, {});
    }}

    onViewAdded={(index) => {
      console.log("added", index)
    }}

    beforeViewRemoved={(index) => {
      console.log("removed", index)
    }}

    onSelected={(cfiRange, rendition) => {

      console.log("onSelected", cfiRange)

      let datatext = ''

      // Add marker
      this.epub.rendition.highlight(cfiRange, { msg : "Hello"});

    }}

    onMarkClicked={(cfiRange) => {

    }}

    flow={"paginated"} />
);

} }

const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#EEEEEE', }, welcome: { fontSize: 20, textAlign: 'center', margin: 10, }, instructions: { textAlign: 'center', color: '#333333', marginBottom: 5, }, }); `

[HDSnarathorn]

Here is the video link (link)