How to unlock rotation on one screen in react native

Question

I tried using react-native-orientation in a webview to get it being the only view that would rotate.

import React, {useEffect} from 'react';
import { WebView } from 'react-native-webview';
import Orientation from "react-native-orientation"

export function GameWebViewScreen({navigation}) {
const link = ****

useEffect(() => {
    Orientation.unlockAllOrientations();
}, [])

return <WebView source={{uri: link}}/>
}

I am getting TypeError: null in not an object on unlockAllOrientations call. Does anyone know is this a problem because I haven't configured the native files as it says in instructions here since I don't have the access to them yet or?

I also tried with class component and got the same result.

I am also open for any other suggestions on libraries for controlling rotation on single views.

Answer 1

If ready to use native-stack

in React Navigation v6 use below import

import { createNativeStackNavigator } from '@react-navigation/native-stack';
const Stack = createNativeStackNavigator();

function MyStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={Home}/>
      <Stack.Screen 
        name="Website" 
        component={Website} 
        options={{orientation: 'all'}} 
      />
    </Stack.Navigator>
  );
}

in React Navigation v5 use below import

import { createNativeStackNavigator } from 'react-native-screens/native-stack';
const Stack = createNativeStackNavigator();

function MyStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={Home}/>
      <Stack.Screen 
        name="Website"
        component={Website} 
        options={{screenOrientation: 'all'}} 
      />
    </Stack.Navigator>
  );
}