react-native-orientation-director 1.0.0

package/package.json

@@ -0,0 +1,178 @@
+{
+  "name": "react-native-orientation-director",
+  "version": "1.0.0",
+  "description": "A Modern React Native library that allows you to access orientation",
+  "main": "lib/commonjs/index",
+  "module": "lib/module/index",
+  "types": "lib/typescript/src/index.d.ts",
+  "react-native": "src/index",
+  "source": "src/index",
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "cpp",
+    "*.podspec",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "scripts": {
+    "example": "yarn workspace react-native-orientation-director-example",
+    "test": "jest",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "clean": "del-cli android/build example/android/build example/android/app/build example/ios/build lib",
+    "prepare": "bob build",
+    "release": "release-it"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/gladiuscode/react-native-orientation-director.git"
+  },
+  "author": "gladius <gladiusservices@protonmail.com> (https://github.com/gladiuscode)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/gladiuscode/react-native-orientation-director/issues"
+  },
+  "homepage": "https://github.com/gladiuscode/react-native-orientation-director#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@commitlint/config-conventional": "^17.0.2",
+    "@evilmartians/lefthook": "^1.5.0",
+    "@react-native/eslint-config": "^0.73.1",
+    "@release-it/conventional-changelog": "^5.0.0",
+    "@types/jest": "^29.5.5",
+    "@types/react": "^18.2.44",
+    "commitlint": "^17.0.2",
+    "del-cli": "^5.1.0",
+    "eslint": "^8.51.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-prettier": "^5.0.1",
+    "jest": "^29.7.0",
+    "prettier": "^3.0.3",
+    "react": "18.2.0",
+    "react-native": "0.74.1",
+    "react-native-builder-bob": "^0.23.2",
+    "release-it": "^15.0.0",
+    "turbo": "^1.10.7",
+    "typescript": "^5.2.2"
+  },
+  "resolutions": {
+    "@types/react": "^18.2.44"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
+  },
+  "workspaces": [
+    "example"
+  ],
+  "packageManager": "yarn@3.6.1",
+  "jest": {
+    "preset": "react-native",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/node_modules",
+      "<rootDir>/lib/"
+    ]
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release ${version}",
+      "tagName": "v${version}"
+    },
+    "npm": {
+      "publish": true
+    },
+    "github": {
+      "release": true
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "infile": "CHANGELOG.md",
+        "preset": {
+          "name": "angular",
+          "types": [
+            {
+              "type": "feat",
+              "section": "🚀 Features"
+            },
+            {
+              "type": "fix",
+              "section": "🔨 Bug Fixes"
+            }
+          ]
+        }
+      }
+    }
+  },
+  "eslintConfig": {
+    "root": true,
+    "extends": [
+      "@react-native",
+      "prettier"
+    ],
+    "rules": {
+      "prettier/prettier": [
+        "error",
+        {
+          "quoteProps": "consistent",
+          "singleQuote": true,
+          "tabWidth": 2,
+          "trailingComma": "es5",
+          "useTabs": false
+        }
+      ]
+    }
+  },
+  "eslintIgnore": [
+    "node_modules/",
+    "lib/"
+  ],
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "commonjs",
+      "module",
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "codegenConfig": {
+    "name": "RNOrientationDirectorSpec",
+    "type": "modules",
+    "jsSrcsDir": "src"
+  }
+}

package/react-native-orientation-director.podspec

@@ -0,0 +1,41 @@
+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-orientation-director"
+  s.version      = package["version"]
+  s.summary      = package["description"]
+  s.homepage     = package["homepage"]
+  s.license      = package["license"]
+  s.authors      = package["author"]
+
+  s.platforms    = { :ios => min_ios_version_supported }
+  s.source       = { :git => "https://github.com/gladiuscode/react-native-orientation-director.git", :tag => "#{s.version}" }
+
+  s.source_files = "ios/**/*.{h,m,mm,swift}"
+
+  # Use install_modules_dependencies helper to install the dependencies if React Native version >=0.71.0.
+  # See https://github.com/facebook/react-native/blob/febf6b7f33fdb4904669f99d795eba4c0f95d7bf/scripts/cocoapods/new_architecture.rb#L79.
+  if respond_to?(:install_modules_dependencies, true)
+    install_modules_dependencies(s)
+  else
+  s.dependency "React-Core"
+
+  # Don't install the dependencies when we run `pod install` in the old architecture.
+  if ENV['RCT_NEW_ARCH_ENABLED'] == '1' then
+    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++17"
+    }
+    s.dependency "React-Codegen"
+    s.dependency "RCT-Folly"
+    s.dependency "RCTRequired"
+    s.dependency "RCTTypeSafety"
+    s.dependency "ReactCommon/turbomodule/core"
+   end
+  end
+end

package/src/NativeOrientationDirector.ts

@@ -0,0 +1,14 @@
+import type { TurboModule } from 'react-native';
+import { TurboModuleRegistry } from 'react-native';
+
+export interface Spec extends TurboModule {
+  getInterfaceOrientation(): Promise<number>;
+  getDeviceOrientation(): Promise<number>;
+  lockTo(orientation: number): void;
+  unlock(): void;
+
+  addListener: (eventType: string) => void;
+  removeListeners: (count: number) => void;
+}
+
+export default TurboModuleRegistry.getEnforcing<Spec>('OrientationDirector');

package/src/RNOrientationDirector.ts

@@ -0,0 +1,64 @@
+import Module, { EventEmitter } from './module';
+import Event from './types/Event.enum';
+import type { InterfaceOrientationToLocalizedStringProvider } from './types/InterfaceOrientationToLocalizedStringProvider.type';
+import { Orientation } from './types/Orientation.enum';
+import type { OrientationEvent } from './types/OrientationEvent.interface';
+import type { LockableOrientation } from './types/LockableOrientation.type';
+
+class RNOrientationDirector {
+  private static _localizedStringProvider: InterfaceOrientationToLocalizedStringProvider =
+    {
+      [Orientation.unknown]: 'Unknown',
+      [Orientation.portrait]: 'Portrait',
+      [Orientation.portraitUpsideDown]: 'Portrait Upside Down',
+      [Orientation.landscapeLeft]: 'Landscape Left',
+      [Orientation.landscapeRight]: 'Landscape Right',
+      [Orientation.faceUp]: 'Face Up',
+      [Orientation.faceDown]: 'Face Down',
+    };
+
+  setLocalizedStringProvider(
+    provider: InterfaceOrientationToLocalizedStringProvider
+  ) {
+    RNOrientationDirector._localizedStringProvider = provider;
+  }
+
+  static getInterfaceOrientation(): Promise<Orientation> {
+    return Module.getInterfaceOrientation();
+  }
+
+  static getDeviceOrientation(): Promise<Orientation> {
+    return Module.getDeviceOrientation();
+  }
+
+  static lockTo(orientation: LockableOrientation) {
+    Module.lockTo(orientation);
+  }
+
+  static unlock() {
+    Module.unlock();
+  }
+
+  static listenForDeviceOrientationChanges(
+    callback: (orientation: OrientationEvent) => void
+  ) {
+    return EventEmitter.addListener(Event.DeviceOrientationDidChange, callback);
+  }
+
+  static listenForInterfaceOrientationChanges(
+    callback: (orientation: OrientationEvent) => void
+  ) {
+    return EventEmitter.addListener(
+      Event.InterfaceOrientationDidChange,
+      callback
+    );
+  }
+
+  static convertOrientationToHumanReadableString(
+    orientation: Orientation
+  ): string {
+    return RNOrientationDirector._localizedStringProvider[orientation];
+  }
+}
+
+export default RNOrientationDirector;

package/src/hooks/useDeviceOrientation.hook.ts

@@ -0,0 +1,40 @@
+import React, { useRef } from 'react';
+import RNOrientationDirector from '../RNOrientationDirector';
+import type { OrientationEvent } from '../types/OrientationEvent.interface';
+import { Orientation } from '../types/Orientation.enum';
+
+/**
+ * Hook that returns the current device orientation.
+ * It listens for orientation changes and updates the state accordingly.
+ */
+const useDeviceOrientation = () => {
+  const initialRender = useRef(false);
+  const [orientation, setOrientation] = React.useState<Orientation>(
+    Orientation.unknown
+  );
+
+  React.useEffect(() => {
+    if (initialRender.current) {
+      return;
+    }
+
+    initialRender.current = true;
+    RNOrientationDirector.getDeviceOrientation().then(setOrientation);
+  }, []);
+
+  React.useEffect(() => {
+    const onChange = (event: OrientationEvent) => {
+      setOrientation(event.orientation);
+    };
+
+    const subscription =
+      RNOrientationDirector.listenForDeviceOrientationChanges(onChange);
+    return () => {
+      subscription.remove();
+    };
+  }, []);
+
+  return orientation;
+};
+
+export default useDeviceOrientation;

package/src/hooks/useInterfaceOrientation.hook.ts

@@ -0,0 +1,40 @@
+import React, { useRef } from 'react';
+import RNOrientationDirector from '../RNOrientationDirector';
+import type { OrientationEvent } from '../types/OrientationEvent.interface';
+import { Orientation } from '../types/Orientation.enum';
+
+/**
+ * Hook that returns the current interface orientation.
+ * It listens for orientation changes and updates the state accordingly.
+ */
+const useInterfaceOrientation = () => {
+  const initialRender = useRef(false);
+  const [orientation, setOrientation] = React.useState<Orientation>(
+    Orientation.unknown
+  );
+
+  React.useEffect(() => {
+    if (initialRender.current) {
+      return;
+    }
+
+    initialRender.current = true;
+    RNOrientationDirector.getInterfaceOrientation().then(setOrientation);
+  }, []);
+
+  React.useEffect(() => {
+    const onChange = (event: OrientationEvent) => {
+      setOrientation(event.orientation);
+    };
+
+    const subscription =
+      RNOrientationDirector.listenForInterfaceOrientationChanges(onChange);
+    return () => {
+      subscription.remove();
+    };
+  }, []);
+
+  return orientation;
+};
+
+export default useInterfaceOrientation;

package/src/index.tsx

@@ -0,0 +1,10 @@
+export { Orientation } from './types/Orientation.enum';
+
+import useDeviceOrientation from './hooks/useDeviceOrientation.hook';
+export { useDeviceOrientation };
+
+import useInterfaceOrientation from './hooks/useInterfaceOrientation.hook';
+export { useInterfaceOrientation };
+
+import RNOrientationDirector from './RNOrientationDirector';
+export default RNOrientationDirector;

package/src/module.ts

@@ -0,0 +1,30 @@
+import { NativeEventEmitter, NativeModules, Platform } from 'react-native';
+import type { Spec } from './NativeOrientationDirector';
+
+const LINKING_ERROR =
+  `The package 'react-native-orientation-director' doesn't seem to be linked. Make sure: \n\n` +
+  Platform.select({ ios: "- You have run 'pod install'\n", default: '' }) +
+  '- You rebuilt the app after installing the package\n' +
+  '- You are not using Expo Go\n';
+
+// @ts-expect-error
+const isTurboModuleEnabled = global.__turboModuleProxy != null;
+
+const Module = isTurboModuleEnabled
+  ? require('./NativeOrientationDirector').default
+  : NativeModules.OrientationDirector;
+
+const OrientationDirectorModule = Module
+  ? Module
+  : new Proxy(
+      {},
+      {
+        get() {
+          throw new Error(LINKING_ERROR);
+        },
+      }
+    );
+
+export const EventEmitter = new NativeEventEmitter(Module);
+
+export default OrientationDirectorModule as Spec;

package/src/types/Event.enum.ts

@@ -0,0 +1,6 @@
+enum Event {
+  DeviceOrientationDidChange = 'DeviceOrientationDidChange',
+  InterfaceOrientationDidChange = 'InterfaceOrientationDidChange',
+}
+
+export default Event;

package/src/types/InterfaceOrientationToLocalizedStringProvider.type.ts

@@ -0,0 +1,6 @@
+import type { Orientation } from './Orientation.enum';
+
+export type InterfaceOrientationToLocalizedStringProvider = Record<
+  Orientation,
+  string
+>;

package/src/types/LockableOrientation.type.ts

@@ -0,0 +1,7 @@
+import { Orientation } from './Orientation.enum';
+
+export type LockableOrientation =
+  | Orientation.portrait
+  | Orientation.portraitUpsideDown
+  | Orientation.landscapeLeft
+  | Orientation.landscapeRight;

package/src/types/Orientation.enum.ts

@@ -0,0 +1,11 @@
+export enum Orientation {
+  unknown = 0,
+  portrait = 1,
+  landscapeRight = 2,
+  portraitUpsideDown = 3,
+  landscapeLeft = 4,
+
+  // iOS only
+  faceUp = 5,
+  faceDown = 6,
+}

package/src/types/OrientationEvent.interface.ts

@@ -0,0 +1,5 @@
+import type { Orientation } from './Orientation.enum';
+
+export interface OrientationEvent {
+  orientation: Orientation;
+}