feat(screen-orientation): add first draft of screen orientation hooks

README.md

@@ -29,6 +29,9 @@
 - [**Permissions**](./packages/permissions)
     - [`usePermissions`](./packages/permissions/docs/use-permissions.md) — get or ask permissions with [`Permissions`](https://docs.expo.io/versions/latest/sdk/permissions/)
 
+- [**Screen Orientation**](./packages/screen-orientation)
+    - [`useScreenOrientation`](./packages/screen-orientation/docs/use-screen-orientation.md) — tracks changes in screen orientation with [`ScreenOrientation`](https://docs.expo.io/versions/latest/sdk/screen-orientation/)
+
 - [**Sensors**](./packages/sensors)
     - [`useAccelerometer`](./packages/sensors/docs/use-accelerometer.md) — tracks changes in acceleration with [`Accelerometer`](https://docs.expo.io/versions/latest/sdk/accelerometer/)
     - [`useBarometer`](./packages/sensors/docs/use-barometer.md) — tracks changes in air pressure with [`Barometer`](https://docs.expo.io/versions/latest/sdk/barometer/)

packages/screen-orientation/README.md

@@ -0,0 +1,29 @@
+<div align="center">
+    <h1>
+        <br />
+        screen orientation hooks
+        <br />
+        <br />
+    </h1>
+    <a href="https://github.com/bycedric/use-expo/releases">
+        <img src="https://img.shields.io/github/release/byCedric/use-expo/all.svg" alt="releases" />
+    </a>
+    <a href="https://travis-ci.com/byCedric/use-expo">
+        <img src="https://img.shields.io/travis/com/byCedric/use-expo/master.svg" alt="builds" />
+    </a>
+    <br />
+    <br />
+    <br />
+    <pre>npm i <a href="https://www.npmjs.com/package/@use-expo/screen-orientation">@use-expo/screen-orientation</a></pre>
+    <br />
+</div>
+
+- [`useScreenOrientation`](./docs/use-screen-orientation.md) &mdash; tracks changes in screen orientation with [`ScreenOrientation`](https://docs.expo.io/versions/latest/sdk/screen-orientation/)
+
+<div align="center">
+    <br />
+    <br />
+    with :heart: <strong>byCedric</strong>
+    <br />
+    <br />
+</div>

packages/screen-orientation/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function (api) {
+	api.cache(true);
+	return {
+		presets: ['babel-preset-expo'],
+	};
+};

packages/screen-orientation/docs/use-screen-orientation.md

@@ -0,0 +1,65 @@
+<div align="center">
+    <h1>
+        <br />
+        <code>useScreenOrientation</code>
+        <br />
+        <br />
+    </h1>
+    tracks changes in screen orientation with <a href="https://docs.expo.io/versions/latest/sdk/screen-orientation/"><code>ScreenOrientation</code></a>
+    <br />
+</div>
+
+## Examples
+
+```jsx
+// full hook
+const [orientation, sizeClass] = useScreenOrientation();
+
+// other options
+useScreenOrientation({ get: false });
+```
+
+With the `useScreenOrientation` hook we can create a simple example.
+
+```jsx
+function ScreenOrientationExample() {
+    const [orientation, sizeClass] = useScreenOrientation();
+
+    return (
+        <View style={{ marginTop: 15, paddingHorizontal: 10 }}>
+            <Text>Screen orientation:</Text>
+            <Text>{orientation}</Text>
+            <Text>Screen size class: (only available on iOS)</Text>
+            <Text>{JSON.stringify(sizeClass, null, 2)}</Text>
+        </View>
+    );
+}
+```
+
+## API
+
+```ts
+function useScreenOrientation(options?: ScreenOrientationOptions): [
+    ScreenOrientation.Orientation | undefined,
+    ScreenOrientationSizeClass | undefined,
+];
+
+interface ScreenOrientationOptions {
+    /** If it should fetch the screen orientation when mounted, defaults to `true` */
+    get?: boolean;
+}
+
+/** Both the horizontal and vertical size class, only available on iOS */
+interface ScreenOrientationSizeClass {
+    horizontal: ScreenOrientation.SizeClassIOS;
+    vertical: ScreenOrientation.SizeClassIOS;
+}
+```
+
+<div align="center">
+    <br />
+    <br />
+    with :heart: <strong>byCedric</strong>
+    <br />
+    <br />
+</div>

packages/screen-orientation/jest.config.js

@@ -0,0 +1,14 @@
+const jestExpoPreset = require('jest-expo/jest-preset');
+const { jsWithBabel: tsJestPreset } = require('ts-jest/presets');
+
+module.exports = {
+	...jestExpoPreset,
+	clearMocks: true,
+	transform: {
+		...tsJestPreset.transform,
+		...jestExpoPreset.transform,
+	},
+	testMatch: [
+		'**/*.test.ts',
+	],
+};