I am using react-native-webview for loading url in webview. For first load it works fine with both the orientations i.e. landscape and portrait. But when i switch from portrait to landscape and vice versa, touch doesn't work for some area.
Briefly explained
I am testing in iPhone 7 device so, in portrait mode width and height of screen is 375 and 667 respectively. When i switch orientation from portrait to landscape mode width and height of screen become 667 and 375 respectively. Webview width should become 667 from 375 (you can see the style in code, width and height is set to screen width and screen height respectively) and width is taken 667 that is perfect but touch area is not working from 376 to 667.
Here is my code:
const isPortrait = () => { const dim = Dimensions.get('screen'); console.log('is_Portrait', dim.height >= dim.width); return dim.height >= dim.width;};export default class App extends Component { constructor(props) { super(props); this.state = { url: null, deviceToken: '', webViewLoaded: false, key: 1, orientation: isPortrait() ? 'portrait' : 'landscape' }; Dimensions.addEventListener('change', () => { this.setState({ orientation: isPortrait() ? 'portrait' : 'landscape' }); }); }render() { const {url, deviceToken, safeArea, orientation} = this.state; let screenWidth = Dimensions.get('window').width let screenHeight = Dimensions.get('window').height return (<WebView style={{width: screenWidth, height: screenHeight, position: 'absolute'}} containerStyle={{width: screenWidth, height: screenHeight}} onError={({nativeEvent}) => { alert('Internet not available, Cross check your internet connectivity and try again') }} source={{uri: url}} /> ); }}