Alternative to React-Native-Webview

Are there any alternative packages to React-Native-Webview that actually work?

Thanks!

you will need to be much more precise than this in your query. what are you trying to do? on what platform? what is it that does not work for you? can you share the code?

Sorry for being vague. My app needs to render webpages and for that I’m currently using react-native-webview. However, when I launch any video from any website (from Webview) it messes up the orientation (full screen video exit messes up layout in Webview)

So I would like to find out if that bug is coming from Webview itself or from another package. When I hardcode the video (using expo-av) it works fine.

Also, I recently started the dev. from scratch, using React-Navigation 5.0 and Hooks only… Same result.

it’s worth creating an issue on the react-native-webview github repository and explaining your problem, perhaps they are aware of it and have a solution or are working on one

I actually did, a while ago. Luckily, I found a way around the bug after right after I posted here. I shared my solution on github but couldn’t do it on the expo forum since the thread is closed.

What is the solution that you found? :thinking: :face_with_monocle:

If you want just to open a video on the browser just use Web Browser component from expo

I concur, this is still an issue, coming out of webview after watching fullscreen video on iOS expo app which is locked to portrait mode in ‘app.js’, header’s top margin and tab navigator’s styles are messed up severely, no solution is working till now. I have tried everything.

The shortest solution I found:

  1. Give a height to your header
  2. Check if your screen is in Portrait before using screen sizes:

width: Dimensions.get(“window”).width > Dimensions.get(“window”).height ? Dimensions.get(“window”).height : Dimensions.get(“window”).width;
height: Dimensions.get(“window”).width > Dimensions.get(“window”).height ? Dimensions.get(“window”).width: Dimensions.get(“window”).height;

What I personally do is this:

const [OrientationMode, setOrientationMode] = useState({
width: Dimensions.get(“window”).width,
height: Dimensions.get(“window”).height,
});

const CheckMode = () => {
const Width = Dimensions.get(“window”).width;
const Height = Dimensions.get(“window”).height;
const DimWidth = Width > Height ? Height : Width;
const DimWHeight = Width > Height ? Width : Height;
setOrientationMode({ width: DimWidth, height: DimWHeight });
};

useEffect(() => {
const unsubscribe = navigation.addListener(“focus”, () => {
CheckMode();
});
return unsubscribe;
}, );

Then I use OrientationMode.width and OrientationMode.height when needed.

EDIT: I just read your post on Github. The only way is to unlock when you play the video. There should be a callback for that. Then you lock again as you perform another action, including a change in device orientation. But I agree with you. We need a better solution.

@mobshed Yeah I replaced WebView screen with openBrowerAsync and fortunately openBrowserAsync resolves the promise after browser is closed with a type, but only on iOS, on android it resolves right away as soon as browser window is open, but I am not sure till when iOS / expo is going to keep that behavior, because it doesn’t feel right, it should resolve right away after opening the browser window with a type like android.

But In my case it serves me right, after user closes the browser window I am locking orientation again which i unlocked before opening the browser, it resolves the issue of react-navigation being messed up after closing the browser window. doing it only for iOS, as android doesn’t need unlocking / locking orientation, in android react-navigation header / tabNavigator doesn’t mess up at least for me.

Still the issue remains is, user can see app rotating back to portrait mode after closing the browser window, which I don’t want him to see, because my app is not for landscape view and all layouts feel broken for a second and then get right when original orientation sets back in, on top of that my scrollable tabs moves to last tab which is another issue.

So exact solution for me would be app staying in portrait all the time, WebView or Browser show the page in unlocked orientation and user able to watch video or whatever in that page on any direction but coming back to app, react-navigation should be in proper position and layout not matter what orientation user exit out of the WebView or Browser window.

1 Like

P.S someone needs to open that original thread:

full screen video exit messes up layout in Webview