Overview

Native Module to control the app's orientation. Features: - Lock Portrait Mode - Lock Landscape Mode - Get Device Orientation - Get UI Orientation - Listen to orientation change widget (UI and Device) - Unlock Orientation

Documentation

Description

This module gives you control over the orientation of your native app. you can force lock it into different positions and you can listen to any changes to the device orientation.

Typical usage scenario

This module comes with a widget and some javascript actions. 

Add widget to the page and add an action to it where you want to add a trigger for orientation changes. This also gets triggered when using one the lock actions. The widget has 2 different listen types. The Device listen type will trigger the action when the user actually moves their phone and the UI listen type will trigger when the orientation changes based on the other Javascript actions. Make sure to close the page if you want the listener to be destroyed.
There is however a bug in React Native that on iOS also triggers the action in UI listen mode when moving the phone without using the javascript actions. You can use the get ui/device orientation actions to check the states to see which one actually moved.

Add the javascript actions to nanoflows where you want to check, lock or unlock the orientation. Use the Get UI Orientation action if you want to check the orientation thats set by the lock javascript actions, use the Get Device Orientation to check what the actual device orientation is held by the user.

Features and limitations

• Lock Portrait Mode
• Lock Landscape Mode
• Get Device Orientation
• Get UI Orientation
• Listen to orientation change widget (UI and Device)
• Unlock Orientation

Dependencies

This module uses the @wonday/react-native-orientation-locker native dependency. This repo is actively being maintained. With Mendix 9, native dependencies are managed automatically when you build the app. Because this is a custom dependency this module does not work in the Make It Native app. 
https://github.com/wonday/react-native-orientation-locker

Installation

Apart from the installing the dependency itself, which is handled my Mendix automatically (see Native Dependency chapter below). We also have to add some configurations to the build itself for it to work correctly. This is currently only necessary for iOS because the latest already Native Template already has the correct settings for Android. The full readme can be found HERE. See section configuration.

- iOS
In de file AppDelegate.m in the iOS folder (ios/AppDelegate.m) you have to add the following import at the top: 

#import "Orientation.h"

Further below just before the @end statement add the following code:

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

Issues, suggestions and feature requests

https://github.com/hunterkoppenclevr/nativeOrientationListener/issues

Widget

The widget can also be found seperately on my github:
https://github.com/hunterkoppenclevr/nativeOrientationListener