Moving to TypeScript

.gitignore

@@ -1,11 +1,13 @@
+lib/
+
 # VSCode
 .vscode/
 jsconfig.json
 
 # IntelliJ/Webstorm
 .idea
 
-# OS X
+# macOS
 .DS_Store
 
 # NodeJS

package.json

@@ -4,8 +4,9 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "release": "release-it"
+    "build": "yarn tsc",
+    "release": "release-it",
+    "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "Nader Dabit",
   "license": "ISC",
@@ -14,6 +15,13 @@
     "react-native": ">=0.59"
   },
   "devDependencies": {
-    "release-it": "^12.3.5"
-  }
+    "@types/react": "^16.9.10",
+    "@types/react-native": "^0.60.21",
+    "release-it": "^12.3.5",
+    "typescript": "^3.6.4"
+  },
+  "files": [
+    "index.js",
+    "lib"
+  ]
 }

src/useAccessibilityInfo.ts

@@ -0,0 +1,43 @@
+import React, { useEffect, useState } from 'react'
+import {
+  AccessibilityInfo,
+  AccessibilityChangeEvent,
+  AccessibilityEvent,
+} from 'react-native'
+
+export default function useAccessibilityInfo() {
+  const [reduceMotionEnabled, setReduceMotionEnabled] = useState(false)
+  const [screenReaderEnabled, setScreenReaderEnabled] = useState(false)
+
+  const handleReduceMotionChanged = (enabled: AccessibilityChangeEvent) =>
+    setReduceMotionEnabled(enabled)
+  const handleScreenReaderChanged = (enabled: AccessibilityChangeEvent) =>
+    setScreenReaderEnabled(enabled)
+
+  useEffect(() => {
+    AccessibilityInfo.isReduceMotionEnabled().then(handleReduceMotionChanged)
+    AccessibilityInfo.isScreenReaderEnabled().then(handleScreenReaderChanged)
+
+    AccessibilityInfo.addEventListener(
+      'reduceMotionChanged',
+      handleReduceMotionChanged as (event: AccessibilityEvent) => void,
+    )
+    AccessibilityInfo.addEventListener(
+      'screenReaderChanged',
+      handleScreenReaderChanged as (event: AccessibilityEvent) => void,
+    )
+
+    return () => {
+      AccessibilityInfo.removeEventListener(
+        'reduceMotionChanged',
+        handleReduceMotionChanged as (event: AccessibilityEvent) => void,
+      )
+      AccessibilityInfo.removeEventListener(
+        'screenReaderChanged',
+        handleScreenReaderChanged as (event: AccessibilityEvent) => void,
+      )
+    }
+  }, [])
+
+  return { reduceMotionEnabled, screenReaderEnabled }
+}

lib/useAppState.js → src/useAppState.ts

@@ -1,11 +1,11 @@
 import React, { useEffect, useState } from 'react'
-import { AppState } from 'react-native'
+import { AppState, AppStateStatus } from 'react-native'
 
 export default function useAppState() {
   const currentState = AppState.currentState
   const [appState, setAppState] = useState(currentState)
 
-  function onChange (newState) {
+  function onChange(newState: AppStateStatus) {
     setAppState(newState)
   }
 

lib/useBackHandler.js → src/useBackHandler.ts

@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react'
 import { BackHandler } from 'react-native'
 
-export default function useBackHandler(handler) {
+export default function useBackHandler(handler: () => void) {
   useEffect(() => {
     BackHandler.addEventListener('hardwareBackPress', handler)
 

lib/useCameraRoll.js → src/useCameraRoll.ts

@@ -1,20 +1,22 @@
 import React, { useState } from 'react'
 import {
-  CameraRoll
+  CameraRoll,
+  GetPhotosParamType,
+  GetPhotosReturnType,
 } from 'react-native'
 
-const initialState = {
+const initialState: GetPhotosReturnType = {
   edges: [],
   page_info: {
     end_cursor: '',
-    has_next_page: null,
-    start_cursor: ''
-  }
+    has_next_page: false,
+    start_cursor: '',
+  },
 }
 
-const defaultConfig = {
+const defaultConfig: GetPhotosParamType = {
   first: 20,
-  groupTypes: 'All'
+  groupTypes: 'All',
 }
 
 export default function useCameraRoll() {
@@ -29,7 +31,7 @@ export default function useCameraRoll() {
     }
   }
 
-  async function saveToCameraRoll(tag, type) {
+  async function saveToCameraRoll(tag: string, type?: 'photo' | 'video') {
     try {
       await CameraRoll.saveToCameraRoll(tag, type)
     } catch (err) {
@@ -38,4 +40,4 @@ export default function useCameraRoll() {
   }
 
   return [photos, getPhotos, saveToCameraRoll]
-}
+}

lib/useClipboard.js → src/useClipboard.ts

@@ -6,14 +6,14 @@ export default function useClipBoard() {
 
   async function updateClipboard() {
     const content = await Clipboard.getString()
-    updateClipboardData(content);
+    updateClipboardData(content)
   }
 
   useEffect(() => {
     updateClipboard()
   }, [])
 
-  function setString(content) {
+  function setString(content: string) {
     Clipboard.setString(content)
     updateClipboardData(content)
   }

src/useDeviceOrientation.ts

@@ -0,0 +1,43 @@
+import React, { useEffect, useState } from 'react'
+import { Dimensions, ScaledSize } from 'react-native'
+
+const screen = Dimensions.get('screen')
+
+export default function() {
+  const isOrientationPortrait = ({
+    width,
+    height,
+  }: {
+    width: number
+    height: number
+  }) => height >= width
+  const isOrientationLandscape = ({
+    width,
+    height,
+  }: {
+    width: number
+    height: number
+  }) => width >= height
+
+  const [orientation, setOrientation] = useState({
+    portrait: isOrientationPortrait(screen),
+    landscape: isOrientationLandscape(screen),
+  })
+
+  const onChange = ({ screen }: { screen: ScaledSize }) => {
+    setOrientation({
+      portrait: isOrientationPortrait(screen),
+      landscape: isOrientationLandscape(screen),
+    })
+  }
+
+  useEffect(() => {
+    Dimensions.addEventListener('change', onChange)
+
+    return () => {
+      Dimensions.removeEventListener('change', onChange)
+    }
+  }, [orientation.portrait, orientation.landscape])
+
+  return orientation
+}

lib/useDimensions.js → src/useDimensions.ts

@@ -1,15 +1,22 @@
 import React, { useEffect, useState } from 'react'
-import { Dimensions } from 'react-native'
+import { Dimensions, ScaledSize } from 'react-native'
 
 const window = Dimensions.get('window')
 const screen = Dimensions.get('screen')
 
 export default function useDimensions() {
   const [dimensions, setDimensions] = useState({
-    window, screen
+    window,
+    screen,
   })
 
-  onChange = ({ window, screen }) => {
+  const onChange = ({
+    window,
+    screen,
+  }: {
+    window: ScaledSize
+    screen: ScaledSize
+  }) => {
     setDimensions({ window, screen })
   }
 
@@ -20,4 +27,4 @@ export default function useDimensions() {
   }, [])
 
   return dimensions
-}
+}

lib/useInteractionManager.js → src/useInteractionManager.ts

@@ -1,13 +1,13 @@
-import React, { useEffect, useState } from 'react';
-import { InteractionManager } from 'react-native';
+import React, { useEffect, useState } from 'react'
+import { InteractionManager } from 'react-native'
 
 export default function useInteractionManager() {
-  const [complete, updateInteractionStatus] = useState(false);
+  const [complete, updateInteractionStatus] = useState(false)
 
   useEffect(() => {
     InteractionManager.runAfterInteractions(() => {
       updateInteractionStatus(true)
     })
   }, [])
   return complete
-};
+}