react-native-device-posture 0.1.0

package/README.md

@@ -0,0 +1,59 @@
+# react-native-device-posture
+
+One fold and hinge status for iOS and Android. Wrap the app once, then read the same state from any screen.
+
+Both platforms emit the listener `onFoldStateChange`.
+
+| `status` | Meaning | `isFlat` |
+|---|---|---|
+| `unknown` | This device has no hinge | `false` |
+| `closed` | Folded | `false` |
+| `partiallyOpen` | Mid-fold | `false` |
+| `fullyOpen` | Unfolded flat | `true` |
+
+`isFlat` is true only when the device is fully open. Use that for the wide Duo layout.
+
+iOS reads `UIHinge` (iOS 27.1 and later). Android reads Jetpack WindowManager `FoldingFeature`. Phones without a hinge stay on `unknown`.
+
+Requires React Native 0.76 or newer with the New Architecture enabled.
+
+## Install
+
+From the app:
+
+```sh
+npm install /Users/shubham/Documents/Learning/react-native-device-posture
+cd ios && pod install
+```
+
+Rebuild the native app after installing. A JavaScript reload is not enough.
+
+## Use
+
+```jsx
+import {
+  FoldStateProvider,
+  useFoldState,
+  FOLD_STATE_EVENT,
+  FOLD_STATUS,
+} from 'react-native-device-posture';
+
+function App() {
+  return (
+    <FoldStateProvider>
+      <Root />
+    </FoldStateProvider>
+  );
+}
+
+function Home() {
+  const { isFoldSupported, isFlat, status } = useFoldState();
+  const isDuoOpen = isFoldSupported && isFlat;
+
+  return isDuoOpen ? <WideHome /> : <PhoneHome />;
+}
+```
+
+`FOLD_STATE_EVENT` is `'onFoldStateChange'` on both platforms. The provider already subscribes to it, so screens only need `useFoldState()`.
+
+`useFoldState()` throws if it is called outside `FoldStateProvider`.

package/android/build.gradle

@@ -0,0 +1,62 @@
+buildscript {
+  def kotlin_version = rootProject.ext.has("kotlinVersion") ? rootProject.ext.get("kotlinVersion") : project.properties["DevicePosture_kotlinVersion"]
+
+  repositories {
+    google()
+    mavenCentral()
+  }
+
+  dependencies {
+    classpath "com.android.tools.build:gradle:8.7.2"
+    classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
+  }
+}
+
+def isNewArchitectureEnabled() {
+  return rootProject.hasProperty("newArchEnabled") && rootProject.getProperty("newArchEnabled") == "true"
+}
+
+apply plugin: "com.android.library"
+apply plugin: "kotlin-android"
+
+if (isNewArchitectureEnabled()) {
+  apply plugin: "com.facebook.react"
+}
+
+def getExtOrDefault(name) {
+  return rootProject.ext.has(name) ? rootProject.ext.get(name) : project.properties["DevicePosture_" + name]
+}
+
+def getExtOrIntegerDefault(name) {
+  return rootProject.ext.has(name) ? rootProject.ext.get(name) : (project.properties["DevicePosture_" + name]).toInteger()
+}
+
+android {
+  namespace "com.deviceposture"
+  compileSdkVersion getExtOrIntegerDefault("compileSdkVersion")
+
+  defaultConfig {
+    minSdkVersion getExtOrIntegerDefault("minSdkVersion")
+    targetSdkVersion getExtOrIntegerDefault("targetSdkVersion")
+  }
+
+  compileOptions {
+    sourceCompatibility JavaVersion.VERSION_17
+    targetCompatibility JavaVersion.VERSION_17
+  }
+
+  kotlinOptions {
+    jvmTarget = "17"
+  }
+}
+
+repositories {
+  mavenCentral()
+  google()
+}
+
+dependencies {
+  implementation "com.facebook.react:react-android"
+  implementation "androidx.window:window:1.3.0"
+  implementation "androidx.window:window-java:1.3.0"
+}

package/android/gradle.properties

@@ -0,0 +1,4 @@
+DevicePosture_kotlinVersion=1.9.24
+DevicePosture_minSdkVersion=24
+DevicePosture_targetSdkVersion=35
+DevicePosture_compileSdkVersion=35

package/android/src/main/AndroidManifest.xml

@@ -0,0 +1 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android" />

package/android/src/main/java/com/deviceposture/DevicePostureModule.kt

@@ -0,0 +1,131 @@
+package com.deviceposture
+
+import android.content.pm.PackageManager
+import android.os.Build
+import androidx.core.util.Consumer
+import androidx.window.java.layout.WindowInfoTrackerCallbackAdapter
+import androidx.window.layout.FoldingFeature
+import androidx.window.layout.WindowInfoTracker
+import androidx.window.layout.WindowLayoutInfo
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.LifecycleEventListener
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.bridge.WritableMap
+import java.util.concurrent.ExecutorService
+import java.util.concurrent.Executors
+
+class DevicePostureModule(reactContext: ReactApplicationContext) :
+  NativeDevicePostureSpec(reactContext), LifecycleEventListener {
+
+  private data class Posture(
+    val isFoldSupported: Boolean,
+    val status: String,
+    val isFlat: Boolean,
+  )
+
+  private val executor: ExecutorService = Executors.newSingleThreadExecutor()
+  private var tracker: WindowInfoTrackerCallbackAdapter? = null
+  private var listening = false
+
+  @Volatile private var posture = Posture(false, "unknown", false)
+
+  private val layoutCallback =
+    Consumer<WindowLayoutInfo> { info ->
+      publish(info)
+    }
+
+  init {
+    if (hasHinge()) {
+      tracker = WindowInfoTrackerCallbackAdapter(WindowInfoTracker.getOrCreate(reactContext))
+      posture = Posture(true, "unknown", false)
+    }
+    reactContext.addLifecycleEventListener(this)
+  }
+
+  override fun getName(): String = NAME
+
+  override fun getFoldState(): WritableMap = posture.toMap()
+
+  override fun startListening() {
+    listening = true
+    attachListener()
+  }
+
+  override fun stopListening() {
+    listening = false
+    detachListener()
+  }
+
+  override fun onHostResume() {
+    if (listening) {
+      attachListener()
+    }
+  }
+
+  override fun onHostPause() = Unit
+
+  override fun onHostDestroy() {
+    stopListening()
+    reactApplicationContext.removeLifecycleEventListener(this)
+    executor.shutdown()
+  }
+
+  private fun attachListener() {
+    val activity = reactApplicationContext.currentActivity
+    val windowTracker = tracker
+    if (!listening || activity == null || windowTracker == null) {
+      return
+    }
+    windowTracker.removeWindowLayoutInfoListener(layoutCallback)
+    windowTracker.addWindowLayoutInfoListener(activity, executor, layoutCallback)
+  }
+
+  private fun detachListener() {
+    tracker?.removeWindowLayoutInfoListener(layoutCallback)
+  }
+
+  private fun publish(info: WindowLayoutInfo) {
+    val supported = hasHinge()
+    val foldingFeature = info.displayFeatures.filterIsInstance<FoldingFeature>().firstOrNull()
+    val next =
+      when {
+        !supported -> Posture(false, "unknown", false)
+        foldingFeature == null -> Posture(true, "closed", false)
+        foldingFeature.state == FoldingFeature.State.FLAT -> Posture(true, "fullyOpen", true)
+        foldingFeature.state == FoldingFeature.State.HALF_OPENED ->
+          Posture(true, "partiallyOpen", false)
+        else -> Posture(true, "unknown", false)
+      }
+
+    if (next == posture) {
+      return
+    }
+    posture = next
+    val snapshot = next
+    reactApplicationContext.runOnUiQueueThread {
+      emitOnFoldStateChange(snapshot.toMap())
+    }
+  }
+
+  private fun hasHinge(): Boolean {
+    val feature =
+      if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.R) {
+        PackageManager.FEATURE_SENSOR_HINGE_ANGLE
+      } else {
+        "android.hardware.sensor.hinge_angle"
+      }
+    return reactApplicationContext.packageManager.hasSystemFeature(feature)
+  }
+
+  private fun Posture.toMap(): WritableMap {
+    return Arguments.createMap().apply {
+      putBoolean("isFoldSupported", isFoldSupported)
+      putString("status", status)
+      putBoolean("isFlat", isFlat)
+    }
+  }
+
+  companion object {
+    const val NAME = "NativeDevicePosture"
+  }
+}

package/android/src/main/java/com/deviceposture/DevicePosturePackage.kt

@@ -0,0 +1,32 @@
+package com.deviceposture
+
+import com.facebook.react.BaseReactPackage
+import com.facebook.react.bridge.NativeModule
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.module.model.ReactModuleInfo
+import com.facebook.react.module.model.ReactModuleInfoProvider
+
+class DevicePosturePackage : BaseReactPackage() {
+  override fun getModule(name: String, reactContext: ReactApplicationContext): NativeModule? {
+    return if (name == DevicePostureModule.NAME) {
+      DevicePostureModule(reactContext)
+    } else {
+      null
+    }
+  }
+
+  override fun getReactModuleInfoProvider(): ReactModuleInfoProvider {
+    return ReactModuleInfoProvider {
+      mapOf(
+        DevicePostureModule.NAME to ReactModuleInfo(
+          DevicePostureModule.NAME,
+          DevicePostureModule::class.java.name,
+          false,
+          true,
+          false,
+          true
+        )
+      )
+    }
+  }
+}

package/ios/DevicePostureModule.h

@@ -0,0 +1 @@
+#import <Foundation/Foundation.h>

package/ios/DevicePostureModule.mm

@@ -0,0 +1,164 @@
+#import <RNDevicePostureSpec/RNDevicePostureSpec.h>
+#import <UIKit/UIHinge.h>
+#import <UIKit/UIHingeInteraction.h>
+#import <objc/runtime.h>
+
+@class DevicePostureModule;
+
+static NSDictionary *DevicePostureCurrentState;
+static __weak DevicePostureModule *DevicePostureInstance;
+static const void *DevicePostureInteractionKey = &DevicePostureInteractionKey;
+
+static NSDictionary *DevicePostureState(BOOL isFoldSupported, NSString *status, BOOL isFlat)
+{
+  return @{
+    @"isFoldSupported" : @(isFoldSupported),
+    @"status" : status ?: @"unknown",
+    @"isFlat" : @(isFlat),
+  };
+}
+
+static UIView *DevicePostureRootView(void)
+{
+  for (UIScene *scene in UIApplication.sharedApplication.connectedScenes) {
+    if (![scene isKindOfClass:[UIWindowScene class]]) {
+      continue;
+    }
+    UIWindowScene *windowScene = (UIWindowScene *)scene;
+    for (UIWindow *window in windowScene.windows) {
+      if (window.isKeyWindow && window.rootViewController.view != nil) {
+        return window.rootViewController.view;
+      }
+    }
+  }
+  return nil;
+}
+
+@interface DevicePostureModule : NativeDevicePostureSpecBase <NativeDevicePostureSpec>
++ (void)applySupported:(BOOL)isFoldSupported status:(NSString *)status isFlat:(BOOL)isFlat;
+- (void)attachHingeObserver;
+- (void)detachHingeObserver;
+@end
+
+@implementation DevicePostureModule
+
+RCT_EXPORT_MODULE(NativeDevicePosture);
+
++ (void)initialize
+{
+  if (self == [DevicePostureModule class] && DevicePostureCurrentState == nil) {
+    DevicePostureCurrentState = DevicePostureState(NO, @"unknown", NO);
+  }
+}
+
++ (BOOL)requiresMainQueueSetup
+{
+  return YES;
+}
+
+- (instancetype)init
+{
+  if (self = [super init]) {
+    DevicePostureInstance = self;
+  }
+  return self;
+}
+
+- (void)startListening
+{
+  dispatch_async(dispatch_get_main_queue(), ^{
+    [self attachHingeObserver];
+  });
+}
+
+- (void)stopListening
+{
+  dispatch_async(dispatch_get_main_queue(), ^{
+    [self detachHingeObserver];
+  });
+}
+
+- (void)attachHingeObserver
+{
+  if (@available(iOS 27.1, *)) {
+    UIView *view = DevicePostureRootView();
+    if (view == nil || objc_getAssociatedObject(view, DevicePostureInteractionKey) != nil) {
+      return;
+    }
+
+    UIHingeInteraction *interaction = [[UIHingeInteraction alloc]
+        initWithUpdateHandler:^(__unused UIHingeInteraction *hingeInteraction,
+                                UIHingeInteractionUpdate *update) {
+          UIHinge *hinge = update.hinge;
+          if (hinge == nil) {
+            [DevicePostureModule applySupported:NO status:@"unknown" isFlat:NO];
+            return;
+          }
+
+          switch (hinge.status) {
+            case UIHingeStatusClosed:
+              [DevicePostureModule applySupported:YES status:@"closed" isFlat:NO];
+              break;
+            case UIHingeStatusPartiallyOpen:
+              [DevicePostureModule applySupported:YES status:@"partiallyOpen" isFlat:NO];
+              break;
+            case UIHingeStatusFullyOpen:
+              [DevicePostureModule applySupported:YES status:@"fullyOpen" isFlat:YES];
+              break;
+            default:
+              [DevicePostureModule applySupported:YES status:@"unknown" isFlat:NO];
+              break;
+          }
+        }];
+
+    objc_setAssociatedObject(
+        view, DevicePostureInteractionKey, interaction, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
+    [view addInteraction:interaction];
+  }
+}
+
+- (void)detachHingeObserver
+{
+  if (@available(iOS 27.1, *)) {
+    UIView *view = DevicePostureRootView();
+    id interaction = view ? objc_getAssociatedObject(view, DevicePostureInteractionKey) : nil;
+    if (view != nil && interaction != nil) {
+      [view removeInteraction:interaction];
+      objc_setAssociatedObject(view, DevicePostureInteractionKey, nil, OBJC_ASSOCIATION_ASSIGN);
+    }
+  }
+}
+
++ (void)applySupported:(BOOL)isFoldSupported status:(NSString *)status isFlat:(BOOL)isFlat
+{
+  void (^apply)(void) = ^{
+    NSDictionary *next = DevicePostureState(isFoldSupported, status, isFlat);
+    if ([DevicePostureCurrentState isEqualToDictionary:next]) {
+      return;
+    }
+    DevicePostureCurrentState = next;
+    DevicePostureModule *module = DevicePostureInstance;
+    if (module != nil) {
+      [module emitOnFoldStateChange:next];
+    }
+  };
+
+  if ([NSThread isMainThread]) {
+    apply();
+  } else {
+    dispatch_async(dispatch_get_main_queue(), apply);
+  }
+}
+
+- (NSDictionary *)getFoldState
+{
+  return DevicePostureCurrentState ?: DevicePostureState(NO, @"unknown", NO);
+}
+
+- (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:
+    (const facebook::react::ObjCTurboModule::InitParams &)params
+{
+  return std::make_shared<facebook::react::NativeDevicePostureSpecJSI>(params);
+}
+
+@end

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "react-native-device-posture",
+  "version": "0.1.0",
+  "description": "Shared fold and hinge posture for iOS and Android, available through one provider.",
+  "main": "src/index.js",
+  "react-native": "src/index.js",
+  "files": [
+    "src",
+    "ios",
+    "android",
+    "react-native-device-posture.podspec",
+    "react-native.config.js",
+    "README.md"
+  ],
+  "scripts": {
+    "test": "node --test __tests__/normalizeFoldState.test.js"
+  },
+  "keywords": [
+    "react-native",
+    "fold",
+    "hinge",
+    "device-posture",
+    "iphone-duo",
+    "foldable"
+  ],
+  
+  "license": "MIT",
+  "peerDependencies": {
+    "react": ">=18",
+    "react-native": ">=0.76"
+  },
+  "codegenConfig": {
+    "name": "RNDevicePostureSpec",
+    "type": "modules",
+    "jsSrcsDir": "src",
+    "android": {
+      "javaPackageName": "com.deviceposture"
+    }
+  },
+  "publishConfig": {
+  "access": "public"
+}
+}

package/react-native-device-posture.podspec

@@ -0,0 +1,35 @@
+require "json"
+
+package = JSON.parse(File.read(File.join(__dir__, "package.json")))
+folly_compiler_flags = '-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1 -Wno-comma -Wno-shorten-64-to-32'
+
+Pod::Spec.new do |s|
+  s.name         = "react-native-device-posture"
+  s.version      = package["version"]
+  s.summary      = package["description"]
+  s.homepage     = "https://github.com/device-posture/react-native-device-posture"
+  s.license      = "MIT"
+  s.authors      = "device-posture"
+  s.platforms    = { :ios => "15.1" }
+  s.source       = { :git => "https://github.com/device-posture/react-native-device-posture.git", :tag => "#{s.version}" }
+  s.source_files = "ios/**/*.{h,m,mm}"
+
+  if respond_to?(:install_modules_dependencies, true)
+    install_modules_dependencies(s)
+  else
+    s.dependency "React-Core"
+    if ENV["RCT_NEW_ARCH_ENABLED"] == "1"
+      s.compiler_flags = folly_compiler_flags + " -DRCT_NEW_ARCH_ENABLED=1"
+      s.pod_target_xcconfig = {
+        "HEADER_SEARCH_PATHS" => "\"$(PODS_ROOT)/boost\"",
+        "OTHER_CPLUSPLUSFLAGS" => "-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1",
+        "CLANG_CXX_LANGUAGE_STANDARD" => "c++20"
+      }
+      s.dependency "React-Codegen"
+      s.dependency "RCT-Folly"
+      s.dependency "RCTRequired"
+      s.dependency "RCTTypeSafety"
+      s.dependency "ReactCommon/turbomodule/core"
+    end
+  end
+end

package/react-native.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  dependency: {
+    platforms: {
+      ios: {},
+      android: {},
+    },
+  },
+};

package/src/FoldStateProvider.js

@@ -0,0 +1,69 @@
+const React = require('react');
+const { FOLD_STATE_EVENT } = require('./constants');
+const { EMPTY_FOLD_STATE, normalizeFoldState } = require('./normalizeFoldState');
+
+const FoldStateContext = React.createContext(null);
+
+function readInitialState() {
+  let NativeDevicePosture;
+  try {
+    NativeDevicePosture = require('./NativeDevicePosture').default;
+  } catch (error) {
+    return EMPTY_FOLD_STATE;
+  }
+
+  if (!NativeDevicePosture || typeof NativeDevicePosture.getFoldState !== 'function') {
+    return EMPTY_FOLD_STATE;
+  }
+
+  return normalizeFoldState(NativeDevicePosture.getFoldState());
+}
+
+function FoldStateProvider({ children }) {
+  const [foldState, setFoldState] = React.useState(readInitialState);
+
+  React.useEffect(() => {
+    let NativeDevicePosture;
+    try {
+      NativeDevicePosture = require('./NativeDevicePosture').default;
+    } catch (error) {
+      return undefined;
+    }
+
+    const listen = NativeDevicePosture && NativeDevicePosture[FOLD_STATE_EVENT];
+    if (!NativeDevicePosture || typeof listen !== 'function') {
+      return undefined;
+    }
+
+    NativeDevicePosture.startListening();
+    const subscription = listen((next) => {
+      setFoldState(normalizeFoldState(next));
+    });
+
+    return () => {
+      subscription?.remove?.();
+      NativeDevicePosture.stopListening?.();
+    };
+  }, []);
+
+  return React.createElement(
+    FoldStateContext.Provider,
+    { value: foldState },
+    children
+  );
+}
+
+function useFoldState() {
+  const foldState = React.useContext(FoldStateContext);
+  if (foldState == null) {
+    throw new Error(
+      'useFoldState must be used within FoldStateProvider'
+    );
+  }
+  return foldState;
+}
+
+module.exports = {
+  FoldStateProvider,
+  useFoldState,
+};

package/src/NativeDevicePosture.ts

@@ -0,0 +1,21 @@
+import type { TurboModule } from 'react-native';
+import { TurboModuleRegistry } from 'react-native';
+import type { EventEmitter } from 'react-native/Libraries/Types/CodegenTypes';
+
+export type FoldState = {
+  isFoldSupported: boolean;
+  status: string;
+  isFlat: boolean;
+};
+
+export interface Spec extends TurboModule {
+  getFoldState(): FoldState;
+  startListening(): void;
+  stopListening(): void;
+  /**
+   * Shared listener for iOS and Android. The property name is `onFoldStateChange`.
+   */
+  readonly onFoldStateChange: EventEmitter<FoldState>;
+}
+
+export default TurboModuleRegistry.get<Spec>('NativeDevicePosture');

package/src/constants.js

@@ -0,0 +1,17 @@
+/**
+ * Same listener name on iOS and Android.
+ * Subscribe with `nativeModule[FOLD_STATE_EVENT](handler)`.
+ */
+const FOLD_STATE_EVENT = 'onFoldStateChange';
+
+const FOLD_STATUS = {
+  UNKNOWN: 'unknown',
+  CLOSED: 'closed',
+  PARTIALLY_OPEN: 'partiallyOpen',
+  FULLY_OPEN: 'fullyOpen',
+};
+
+module.exports = {
+  FOLD_STATE_EVENT,
+  FOLD_STATUS,
+};

package/src/index.js

@@ -0,0 +1,12 @@
+const { FOLD_STATE_EVENT, FOLD_STATUS } = require('./constants');
+const { EMPTY_FOLD_STATE, normalizeFoldState } = require('./normalizeFoldState');
+const { FoldStateProvider, useFoldState } = require('./FoldStateProvider');
+
+module.exports = {
+  FOLD_STATE_EVENT,
+  FOLD_STATUS,
+  EMPTY_FOLD_STATE,
+  normalizeFoldState,
+  FoldStateProvider,
+  useFoldState,
+};

package/src/normalizeFoldState.js

@@ -0,0 +1,26 @@
+const { FOLD_STATUS } = require('./constants');
+
+const KNOWN_STATUSES = new Set(Object.values(FOLD_STATUS));
+
+const EMPTY_FOLD_STATE = {
+  isFoldSupported: false,
+  status: FOLD_STATUS.UNKNOWN,
+  isFlat: false,
+};
+
+function normalizeFoldState(raw) {
+  const isFoldSupported = Boolean(raw && raw.isFoldSupported);
+  const status =
+    raw && KNOWN_STATUSES.has(raw.status) ? raw.status : FOLD_STATUS.UNKNOWN;
+
+  return {
+    isFoldSupported,
+    status: isFoldSupported ? status : FOLD_STATUS.UNKNOWN,
+    isFlat: isFoldSupported && status === FOLD_STATUS.FULLY_OPEN,
+  };
+}
+
+module.exports = {
+  EMPTY_FOLD_STATE,
+  normalizeFoldState,
+};