Orientation issue

[sw-tt-hitendrachavda]

Summary

When i rotate the device i am getting the wrong size and it showing half.

The below is the code for reading the ebook file.

<Reader width={viewWidth} height={viewHeight} fileSystem={useFileSystem} src={epubURL} flow="scrolled-doc" />

So please check and provide solution ASAP.

What platform(s) does this occur on?

Android, iOS

Environment

expo-env-info@1.2.0

Minimal reproducible example

Just rotate the device landscape to PORTRAIT and PORTRAIT to LANDSCAPE.

[victorsoares96]

You're using widthand height prop? Please show me the code

[sw-tt-hitendrachavda]

const [viewHeight, setViewHeight] = useState(0);
  const [viewWidth, setviewWidth] = useState(0);

const handleLayout = event => {
    const {height, width} = event.nativeEvent.layout;
    setViewHeight(height);
    setviewWidth(width);
  };

  <View
          style={{flex: 1, backgroundColor: 'white'}}
          onLayout={handleLayout}>
            <View
              style={{
                flexDirection: 'row',
                justifyContent: 'space-between',
                paddingHorizontal: 5,
                paddingTop: 5,
                paddingBottom: 5,
              }}>
              {atStart === false ? (
              <TouchableOpacity
                style={storiesDetailStyles.epubbuttonsStyle}
                onPress={() => goToPreviousPage()}>
                <Text style={storiesDetailStyles.epubbuttonsText}>
                  PREVIOUS PAGE
                </Text>
              </TouchableOpacity>
            ) : (
              <TouchableOpacity style={storiesDetailStyles.epubbuttonsStyle}>
                <Text
                  style={[storiesDetailStyles.epubbuttonsText, {opacity: 0.5}]}>
                  PREVIOUS PAGE
                </Text>
              </TouchableOpacity>)}

              {atEnd === false ? 
                <TouchableOpacity
                style={storiesDetailStyles.epubbuttonsStyle}
                onPress={() => goToNextPage()}>
                <Text style={storiesDetailStyles.epubbuttonsText}>
                  NEXT PAGE
                </Text>
              </TouchableOpacity> : (<TouchableOpacity
                style={storiesDetailStyles.epubbuttonsStyle}
                >
                <Text style={[storiesDetailStyles.epubbuttonsText, {opacity:0.5}]}>
                  NEXT PAGE
                </Text>
              </TouchableOpacity>)}
            </View>
          <Reader
            width={viewWidth}
            height={viewHeight}
            fileSystem={useFileSystem}
            src={epubURL}
            flow="scrolled-doc"
          />
        </View>

[victorsoares96]

i try to reproduce this scenario in basic example, but i not catch the bug, see my code below:

import * as React from 'react';
import { SafeAreaView, Text, TouchableOpacity, View } from 'react-native';
import { Reader, ReaderProvider, useReader } from '@epubjs-react-native/core';
import { useFileSystem } from '@epubjs-react-native/file-system';

function Book() {
  const [viewHeight, setViewHeight] = React.useState(0);
  const [viewWidth, setviewWidth] = React.useState(0);
  const {
    atStart,
    atEnd,
    goPrevious: goToPreviousPage,
    goNext: goToNextPage,
  } = useReader();

  const handleLayout = (event: any) => {
    const { height, width } = event.nativeEvent.layout;
    setViewHeight(height);
    setviewWidth(width);
  };

  return (
    <View style={{ flex: 1, backgroundColor: 'white' }} onLayout={handleLayout}>
      <View
        style={{
          backgroundColor: 'black',
          width: viewWidth,
          height: viewHeight * 0.5,
        }}
      />
      <View
        style={{
          flexDirection: 'row',
          justifyContent: 'space-between',
          paddingHorizontal: 5,
          paddingTop: 5,
          paddingBottom: 5,
        }}
      >
        {atStart === false ? (
          <TouchableOpacity onPress={() => goToPreviousPage()}>
            <Text>PREVIOUS PAGE</Text>
          </TouchableOpacity>
        ) : (
          <TouchableOpacity>
            <Text style={[{ opacity: 0.5 }]}>PREVIOUS PAGE</Text>
          </TouchableOpacity>
        )}

        {atEnd === false ? (
          <TouchableOpacity onPress={() => goToNextPage()}>
            <Text>NEXT PAGE</Text>
          </TouchableOpacity>
        ) : (
          <TouchableOpacity>
            <Text style={[{ opacity: 0.5 }]}>NEXT PAGE</Text>
          </TouchableOpacity>
        )}
      </View>
      <Reader
        width={viewWidth}
        height={viewHeight}
        fileSystem={useFileSystem}
        src="https://s3.amazonaws.com/moby-dick/OPS/package.opf"
        flow="scrolled-doc"
      />
    </View>
  );
}

export function Basic() {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <ReaderProvider>
        <Book />
      </ReaderProvider>
    </SafeAreaView>
  );
}

try to send me an minimal reproducible example @sw-tt-hitendrachavda