upgrades and types (#322)

Author: pvinis

.circleci/config.yml

@@ -1,9 +1,7 @@
 version: 2.1
 
-
 orbs:
-  rn: react-native-community/react-native@6.0.1
-
+  rn: react-native-community/react-native@7.1.1
 
 jobs:
   checkout_code:
@@ -44,23 +42,22 @@ jobs:
           name: Publish a release to NPM
           command: yarn release
 
-
 workflows:
-    build-test-release:
-      jobs:
-        - checkout_code
-        - analyze:
-            requires:
-              - checkout_code
-        # - release-canary:
-        #     requires:
-        #       - analyze
-        #     filters:
-        #       branches:
-        #         ignore: master
-        - release:
-            requires:
-              - analyze
-            filters:
-              branches:
-                only: master
+  build-test-release:
+    jobs:
+      - checkout_code
+      - analyze:
+          requires:
+            - checkout_code
+      # - release-canary:
+      #     requires:
+      #       - analyze
+      #     filters:
+      #       branches:
+      #         ignore: master
+      - release:
+          requires:
+            - analyze
+          filters:
+            branches:
+              only: master

.editorconfig

@@ -0,0 +1,3 @@
+[*.json]
+indent_style = space
+indent_size = 2

.github/workflows/release.yml

@@ -0,0 +1,30 @@
+name: Release
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  release:
+    name: Release
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Fetch tags # we need them for auto to work correctly
+        run: git fetch --unshallow --tags
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: 'yarn'
+        env:
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+      - name: Install deps
+        run: yarn install
+      - name: Build palette-mobile
+        run: yarn build-lib:clean
+      - name: Release new version
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+        run: yarn release

README.md

@@ -15,17 +15,16 @@ npm install @react-native-community/hooks
 ```
 
 Installation with yarn
+
 ```sh
 yarn add @react-native-community/hooks
 ```
 
 ## API
+
 - [useAccessibilityInfo](https://github.com/react-native-community/hooks#useaccessibilityinfo)
 - [useAppState](https://github.com/react-native-community/hooks#useappstate)
 - [useBackHandler](https://github.com/react-native-community/hooks#usebackhandler)
-- ~~[useCameraRoll](https://github.com/react-native-community/hooks#usecameraroll)~~
-- ~~[useClipboard](https://github.com/react-native-community/hooks#useclipboard)~~
-- [useDimensions](https://github.com/react-native-community/hooks#usedimensions)
 - [useImageDimensions](https://github.com/react-native-community/hooks#useImageDimensions)
 - [useKeyboard](https://github.com/react-native-community/hooks#usekeyboard)
 - [useInteractionManager](https://github.com/react-native-community/hooks#useinteractionmanager)
@@ -35,15 +34,15 @@ yarn add @react-native-community/hooks
 ### `useAccessibilityInfo`
 
 ```js
-import { useAccessibilityInfo } from '@react-native-community/hooks'
+import {useAccessibilityInfo} from '@react-native-community/hooks'
 
 const {
   boldTextEnabled,
   screenReaderEnabled,
   reduceMotionEnabled, // requires RN60 or newer
   grayscaleEnabled, // requires RN60 or newer
   invertColorsEnabled, // requires RN60 or newer
-  reduceTransparencyEnabled // requires RN60 or newer
+  reduceTransparencyEnabled, // requires RN60 or newer
 } = useAccessibilityInfo()
 ```
 
@@ -52,15 +51,15 @@ const {
 AppState will change between one of 'active', 'background', or (iOS) 'inactive' when the app is closed or put into the background.
 
 ```js
-import { useAppState } from '@react-native-community/hooks'
+import {useAppState} from '@react-native-community/hooks'
 
 const currentAppState = useAppState()
 ```
 
 ### `useBackHandler`
 
 ```js
-import { useBackHandler } from '@react-native-community/hooks'
+import {useBackHandler} from '@react-native-community/hooks'
 
 useBackHandler(() => {
   if (shouldBeHandledHere) {
@@ -72,50 +71,6 @@ useBackHandler(() => {
 })
 ```
 
-### `useCameraRoll`
-
-⚠️ **Deprecated**. Please use `useCameraRoll()` from [`@react-native-camera-roll/camera-roll`](https://github.com/react-native-cameraroll/react-native-cameraroll#usecameraroll) 
-
-```js
-import { useCameraRoll } from '@react-native-community/hooks'
-
-const [photos, getPhotos, saveToCameraRoll] = useCameraRoll()
-
-{
-  photos.map((photo, index) => /* render photos */)
-}
-
-<Button title='Get Photos' onPress={() => getPhotos()}>Get Photos</Button>
-```
-
-### `useClipboard`
-
-⚠️ **Deprecated**. Please use `useClipboard()` from [`@react-native-clipboard/clipboard`](https://github.com/react-native-clipboard/clipboard#useclipboard)
-
-```js
-import { useClipboard } from '@react-native-community/hooks'
-
-const [data, setString] = useClipboard()
-
-<Text>{data}</Text>
-
-<Button title='Update Clipboard' onPress={() => setString('new clipboard data')}>Set Clipboard</Button>
-```
-
-### `useDimensions`
-
-Gets dimensions and sets up a listener that will change the dimensions if the user changes device orientation.
-
-```js
-import { useDimensions } from '@react-native-community/hooks'
-
-const dimensions = useDimensions()
-// or
-const { width, height } = useDimensions().window
-// or
-const screen = useDimensions().screen
-```
-
 ### `useImageDimensions`
 
 ```js
@@ -127,7 +82,7 @@ const source = {uri: 'https://your.image.URI'}
 
 const {dimensions, loading, error} = useImageDimensions(source)
 
-if(loading || error || !dimensions) {
+if (loading || error || !dimensions) {
   return null
 }
 const {width, height, aspectRatio} = dimensions
@@ -136,7 +91,7 @@ const {width, height, aspectRatio} = dimensions
 ### `useKeyboard`
 
 ```js
-import { useKeyboard } from '@react-native-community/hooks'
+import {useKeyboard} from '@react-native-community/hooks'
 
 const keyboard = useKeyboard()
 
@@ -147,7 +102,7 @@ console.log('keyboard keyboardHeight: ', keyboard.keyboardHeight)
 ### `useInteractionManager`
 
 ```js
-import { useInteractionManager } from '@react-native-community/hooks'
+import {useInteractionManager} from '@react-native-community/hooks'
 
 const interactionReady = useInteractionManager()
 
@@ -157,12 +112,11 @@ console.log('interaction ready: ', interactionReady)
 ### `useDeviceOrientation`
 
 ```js
-import { useDeviceOrientation } from '@react-native-community/hooks'
+import {useDeviceOrientation} from '@react-native-community/hooks'
 
 const orientation = useDeviceOrientation()
 
-console.log('is orientation portrait: ', orientation.portrait)
-console.log('is orientation landscape: ', orientation.landscape)
+console.log('orientation is:', orientation)
 ```
 
 ### `useLayout`

jest.config.js

@@ -1,11 +1,6 @@
 module.exports = {
   testEnvironment: 'node',
   preset: 'react-native',
-  globals: {
-    'ts-jest': {
-      tsconfig: 'tsconfig.json',
-    },
-  },
   transform: {
     '^.+\\.jsx$': 'babel-jest',
     '^.+\\.tsx?$': 'ts-jest',

package.json

@@ -19,25 +19,25 @@
     "react-native": ">=0.59"
   },
   "devDependencies": {
-    "@auto-it/all-contributors": "9.28.3",
-    "@auto-it/first-time-contributor": "9.28.3",
-    "@react-native-community/eslint-config": "3.0.1",
-    "@testing-library/react-hooks": "7.0.2",
-    "@testing-library/react-native": "8.0.0",
-    "@types/jest": "27.0.3",
-    "@types/react": "16.14.21",
-    "@types/react-native": "0.64.19",
-    "all-contributors-cli": "6.20.0",
-    "auto": "9.26.8",
-    "eslint": "7.3.1",
-    "eslint-plugin-prettier": "3.4.1",
-    "jest": "27.4.3",
-    "prettier": "2.5.1",
-    "react": "17.0.2",
-    "react-native": "0.62.3",
-    "react-test-renderer": "17.0.2",
-    "ts-jest": "27.1.1",
-    "typescript": "3.9.10"
+    "@auto-it/all-contributors": "10.37.6",
+    "@auto-it/first-time-contributor": "10.37.6",
+    "@react-native-community/eslint-config": "3.2.0",
+    "@testing-library/react-hooks": "8.0.1",
+    "@testing-library/react-native": "11.5.1",
+    "@types/jest": "29.4.0",
+    "@types/react": "18.0.27",
+    "@types/react-native": "0.71.1",
+    "all-contributors-cli": "6.24.0",
+    "auto": "10.37.6",
+    "eslint": "8.33.0",
+    "eslint-plugin-prettier": "4.2.1",
+    "jest": "29.4.1",
+    "prettier": "2.8.3",
+    "react": "18.2.0",
+    "react-native": "0.71.1",
+    "react-test-renderer": "18.2.0",
+    "ts-jest": "29.0.5",
+    "typescript": "4.9.5"
   },
   "author": "Nader Dabit",
   "repository": {

renovate.json

@@ -1,6 +1,6 @@
 {
-    "extends": [
-      "config:base",
-      ":automergePatch"
-    ]
-  }
+  "extends": [
+    "config:base",
+    ":automergePatch"
+  ]
+}

src/index.ts

@@ -1,8 +1,5 @@
-import {useDimensions} from './useDimensions'
-import {useAppState, AppStateStatus} from './useAppState'
+import {useAppState} from './useAppState'
 import {useBackHandler} from './useBackHandler'
-import {useCameraRoll} from './useCameraRoll'
-import {useClipboard} from './useClipboard'
 import {useAccessibilityInfo} from './useAccessibilityInfo'
 import {useKeyboard} from './useKeyboard'
 import {useInteractionManager} from './useInteractionManager'
@@ -11,16 +8,12 @@ import {useLayout} from './useLayout'
 import {useImageDimensions} from './useImageDimensions'
 
 export {
-  useDimensions,
+  useAccessibilityInfo,
   useAppState,
-  AppStateStatus,
   useBackHandler,
-  useCameraRoll,
-  useClipboard,
-  useAccessibilityInfo,
-  useKeyboard,
-  useInteractionManager,
   useDeviceOrientation,
-  useLayout,
   useImageDimensions,
+  useInteractionManager,
+  useKeyboard,
+  useLayout,
 }

src/useAccessibilityInfo.ts

@@ -28,14 +28,7 @@ function useAccessibilityStateListener(
     )
 
     return () => {
-      // @ts-expect-error - React Native >= 0.65
-      if (typeof subscription?.remove === 'function') {
-        // @ts-expect-error - need update @types/react-native@0.65.x
-        subscription.remove()
-      } else {
-        // React Native < 0.65
-        AccessibilityInfo.removeEventListener(eventName, setIsEnabled)
-      }
+      subscription.remove()
     }
   }, [eventName, initializerName])
 

src/useAppState.ts

@@ -13,18 +13,9 @@ export function useAppState() {
     const subscription = AppState.addEventListener('change', onChange)
 
     return () => {
-      // @ts-expect-error - React Native >= 0.65
-      if (typeof subscription?.remove === 'function') {
-        // @ts-expect-error - need update @types/react-native@0.65.x
-        subscription.remove()
-      } else {
-        // React Native < 0.65
-        AppState.removeEventListener('change', onChange)
-      }
+      subscription.remove()
     }
   }, [])
 
   return appState
 }
-
-export {AppStateStatus}