Android Orientation

[salisuabubakar]

Hi @grahammendick,
Is there a way one can set orientation based on a scene ? I would like to be able to do that on android and ios.

Thanks

[grahammendick]

That isn't part of the Navigation router. Is there a 3rd party library you can use?

[grahammendick]

Everything ok? Have you found a 3rd party library?

[salisuabubakar]

Hi ,
I couldn’t get the 3rd party library, am sure most people would love to see this on The navigation router.

Thanks

[grahammendick]

I try to only bring the navigation primitives into the Navigation router. But orientation might be one that I've missed. Thanks for bringing it to my attention.

[grahammendick]

Early thoughts, I'm planning on adding an 'orientation' prop to Scene

<Scene stateKey="movie" orientation="landscape">

It will also accept a function so you can set the orientation based on navigation data

<Scene stateKey="movie" orientation={({ fullScreen }) => fullScreen ? 'landscape' : undefined}>

So you can also change the orientation from a button press within the movie scene

<Button onPress={() => stateNavigator.refresh({ fullScreen: true })} >

How does that sound?

[salisuabubakar]

Wow that would be awesome. Am really looking forward to that. Thanks for your time.

[salisuabubakar]

HI, Any Specific time to get this done. Thanks for your time.

[grahammendick]

I've started working on this, you can follow along if you want

[grahammendick]

I've got landscape working with Android but I'm struggling with iOS. I get the feeling that you're only meant to change the orientation for full screen modals on iOS. I don't have an iPhone so I can't look at any real life examples. Do you know?

[grahammendick]

I'm convinced that's right because React Native's Modal has a supportedOrientations prop that rotates the screen when set to 'landscape'. And if you watch Apple's UIKit video at 23:20 it basically says it's only supported in full screen view controllers.

Is that why you only asked for Android?

[salisuabubakar]

Yes. Can you please do the update for the android you got working?. Thanks

[grahammendick]

Can you explain a bit more about why you want to change the orientation, please?

[salisuabubakar]

Am using it in my app that I migrated from Wix RNN to The Navigation Router. It’s a video streaming app and when user click to watch any movie the orientation should change from portrait to landscape. Thank you.

…

On Sunday, April 30, 2023, Graham Mendick ***@***.***> wrote: Can you explain a bit more about why you want to change the orientation, please? — Reply to this email directly, view it on GitHub <#690 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABURJHF6GO3BL37SLLDIFGLXDYPSVANCNFSM6AAAAAAVZWFDMI> . You are receiving this because you authored the thread.Message ID: ***@***.*** com>

-- *SALISU ABUBAKAR* Fullstack Developer / Consultant *Mobile: 233257335982* *Email : ***@***.***

[grahammendick]

Thanks for the info. What happens on iOS when the user clicks to watch a movie? Are you opening the movie in a Modal and setting the supportedOrientations prop to 'landscape'?
What do apps like Netflix do on an iPhone?

[salisuabubakar]

Hi,
Sorry for the delay. When the user navigate to the video page i want the default orientation to change from Portrait to landscape. Am using react native webview to play the video. Sorry once again for the delay. Thanks

[grahammendick]

How are you going to handle orientation change on iOS?

[salisuabubakar]

Hi, am not sure how to do that. Is it possible you add screen orientation for both android and ios so that we can change the screen orientation for each screen. I came from the web background. Am not good with java/kotlin or swift. Thanks

[grahammendick]

I'm pretty sure you're not meant to change the screen orientation on iOS anymore. Apple's UIKit video at 23:20 basically says it's only supported in full screen view controllers. So only in a Modal with presentationStyle set to fullScreen. Then you can set the supportedOrientations prop to landscape.

[salisuabubakar]

Hi, I think I understood what you mean. I'll use modal on ios. Can you help me get the android done? Thank you

…

On Tue, Jun 13, 2023 at 1:02 PM Graham Mendick ***@***.***> wrote: I'm pretty sure you're not meant to change the screen orientation on iOS anymore. Apple's UIKit video at 23:20 <https://developer.apple.com/videos/play/wwdc2022/10068/> basically says it's only supported in full screen view controllers. So only in a Modal with presentationStyle set to fullScreen. Then you can set the supportedOrientations prop to landscape <https://reactnative.dev/docs/modal#supportedorientations-ios>. — Reply to this email directly, view it on GitHub <#690 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABURJHDQHHJPNQ5AZFYHTMTXLBQETANCNFSM6AAAAAAVZWFDMI> . You are receiving this because you authored the thread.Message ID: ***@***.*** com>

-- *SALISU ABUBAKAR* Fullstack Developer / Consultant *Mobile: 233257335982* *Email : ***@***.***

[salisuabubakar]

Thanks for this wonderful library. The Navigation Router has given me absolute confidence. Thanks soo much. Really appreciate.

[grahammendick]

Ok, it's ready for testing.

1. Clone the navigation repository and check out the scene-orientation branch
2. Run npm run package from the top level folder
3. Copy the navigation-react-native folder from the generated build/npm folder into the node_modules of your app
4. Set the landscape prop to true on the Scene you want to be in landscape

Any questions please let me know.

I did that to the Timeline Scene of the twitter sample and it looks like the vid below.

<Scene stateKey="timeline" landscape><Timeline /></Scene>

Screen.Recording.2023-06-14.at.14.56.43.mov

[salisuabubakar]

Yes i have tested and its working just like your video. Thanks. How soon are you going to merge or update the library. Thanks

[grahammendick]

Just merged in landscape support in #706. Thanks for raising the issue. I'll thank you in the release notes, too

[grahammendick]

Just published navigation-react-native 9.3.0 with landscape support. I thanked you in the release notes