CODEWITHSUNDEEP
typescriptreact-nativerotationscreen-rotation
schmru
schmru

Reputation: 619

How to unlock rotation on one screen in react native

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.

Upvotes: 4

Views: 15488

Answers (3)

M_droid
M_droid

Reputation: 2778

I'm using useEffect instead of component...Mount and I didn't manage to only lock a single screen to landscape and go back to portrait afterwards. I really tried everything like: addOrientationListener , unlockAllOrientations, configurations in Xcode etc. but it just didn't work.

Out of desperation I finally rotated the whole view like transform: [{rotate: '90deg'}],. I know it's not THE answer but at least in my case (interactive videos with selection options) it was an acceptable alternative, especially since the rest of the app is in portrait mode.

Upvotes: 0

Muhammed Yasir MT
Muhammed Yasir MT

Reputation: 2014

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>
  );
}

Upvotes: 8

Harshal Valanda
Harshal Valanda

Reputation: 5451

You need to set native files as per instructions and Try to do manual linking.

Listen to device orientation changes in React Native applications and programmatically set preferred orientation on a per screen basis. Works on both Android and iOS.

Example:-

import Orientation from 'react-native-orientation'

componentDidMount() {
   Orientation.unlockAllOrientations();
}

componentWillUnmount() {
   Orientation.lockToPortrait();
}

You need to set app delegate as follow in ios

#import "Orientation.h"

- (UIInterfaceOrientationMask)application:(UIApplication *)application supportedInterfaceOrientationsForWindow:(UIWindow *)window {
  return [Orientation getOrientation];
}

Android need to set Orientation Package

Implement onConfigurationChanged method in MainActivity.java

import android.content.Intent; // <--- import 
import android.content.res.Configuration; // <--- import 

public class MainActivity extends ReactActivity {
  @Override
  public void onConfigurationChanged(Configuration newConfig) {
     super.onConfigurationChanged(newConfig);
     Intent intent = new Intent("onConfigurationChanged");
     intent.putExtra("newConfig", newConfig);
     this.sendBroadcast(intent);
  }
}

You can find more information here react-native-orientation

Upvotes: 4

Related Questions