Merge branch 'master' into patch-1

Author: pvinis

.eslintrc.js

@@ -0,0 +1,6 @@
+module.exports = {
+  extends: ['@react-native-community'],
+  rules: {
+    semi: 0,
+  },
+}

.prettierrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  bracketSpacing: false,
+  jsxBracketSameLine: true,
+  singleQuote: true,
+  trailingComma: 'all',
+  semi: false,
+};

.release-it.json

@@ -1,6 +1,7 @@
 {
   "npm": {
-    "publish": true
+    "publish": true,
+    "access": "public"
   },
   "github": {
     "release": true

README.md

@@ -1,19 +1,22 @@
 ![React Native Hooks](reactnativehooks.jpg)
 
 ## React Native Hooks
+
+[![Version][version-badge]][package]
+
 React Native APIs turned into React Hooks allowing you to access asynchronous APIs directly in your functional components.
 
 > Note: You must use React Native >= 0.59.0
 
 ### Installation with npm
 
 ```sh
-npm install react-native-hooks
+npm install @react-native-community/hooks
 ```
 
 Installation with yarn
 ```sh
-yarn add react-native-hooks
+yarn add @react-native-community/hooks
 ```
 
 ## API
@@ -31,7 +34,7 @@ yarn add react-native-hooks
 ### `useAccessibilityInfo`
 
 ```js
-import { useAccessibilityInfo } from 'react-native-hooks'
+import { useAccessibilityInfo } from '@react-native-community/hooks'
 
 const isScreenReaderEnabled = useAccessibilityInfo()
 ```
@@ -41,15 +44,15 @@ const isScreenReaderEnabled = useAccessibilityInfo()
 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-hooks'
+import { useAppState } from '@react-native-community/hooks'
 
 const currentAppState = useAppState()
 ```
 
 ### `useBackHandler`
 
 ```js
-import { useBackHandler } from 'react-native-hooks'
+import { useBackHandler } from '@react-native-community/hooks'
 
 useBackHandler(() => {
   if (shouldBeHandledHere) {
@@ -64,7 +67,7 @@ useBackHandler(() => {
 ### `useCameraRoll`
 
 ```js
-import { useCameraRoll } from 'react-native-hooks'
+import { useCameraRoll } from '@react-native-community/hooks'
 
 const [photos, getPhotos, saveToCameraRoll] = useCameraRoll()
 
@@ -78,7 +81,7 @@ const [photos, getPhotos, saveToCameraRoll] = useCameraRoll()
 ### `useClipboard`
 
 ```js
-import { useClipboard } from 'react-native-hooks'
+import { useClipboard } from '@react-native-community/hooks'
 
 const [data, setString] = useClipboard()
 
@@ -92,7 +95,7 @@ const [data, setString] = useClipboard()
 Gets dimensions and sets up a listener that will change the dimensions if the user changes device orientation.
 
 ```js
-import { useDimensions } from 'react-native-hooks'
+import { useDimensions } from '@react-native-community/hooks'
 
 const dimensions = useDimensions()
 // or
@@ -104,7 +107,7 @@ const screen = useDimensions().screen
 ### `useKeyboard`
 
 ```js
-import { useKeyboard } from 'react-native-hooks'
+import { useKeyboard } from '@react-native-community/hooks'
 
 const keyboard = useKeyboard()
 
@@ -115,7 +118,7 @@ console.log('keyboard keyboardHeight: ', keyboard.keyboardHeight)
 ### `useInteractionManager`
 
 ```js
-import { useInteractionManager } from 'react-native-hooks'
+import { useInteractionManager } from '@react-native-community/hooks'
 
 const interactionReady = useInteractionManager()
 
@@ -125,7 +128,7 @@ console.log('interaction ready: ', interactionReady)
 ### `useDeviceOrientation`
 
 ```js
-import { useDeviceOrientation } from 'react-native-hooks'
+import { useDeviceOrientation } from '@react-native-community/hooks'
 
 const orientation = useDeviceOrientation()
 
@@ -136,11 +139,14 @@ console.log('is orientation landscape: ', orientation.landscape)
 ### `useLayout`
 
 ```js
-import { useLayout } from 'react-native-hooks'
+import { useLayout } from '@react-native-community/hooks'
 
 const { onLayout, ...layout } = useLayout()
 
 console.log('layout: ', layout)
 
 <View onLayout={onLayout} style={{width: 200, height: 200, marginTop: 30}} />
 ```
+
+[version-badge]: https://img.shields.io/npm/v/@react-native-community/hooks.svg?style=flat-square
+[package]: https://www.npmjs.com/package/@react-native-community/hooks

index.js

@@ -1,12 +1,15 @@
 {
-  "name": "react-native-hooks",
-  "version": "0.9.0",
+  "name": "@react-native-community/hooks",
+  "version": "2.0.0",
   "description": "",
-  "main": "index.js",
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
   "scripts": {
+    "prepare": "yarn build",
     "build": "yarn tsc",
     "release": "release-it",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "lint": "eslint src/**/*.ts"
   },
   "author": "Nader Dabit",
   "license": "ISC",
@@ -15,13 +18,16 @@
     "react-native": ">=0.59"
   },
   "devDependencies": {
+    "@react-native-community/eslint-config": "^0.0.7",
     "@types/react": "^16.9.10",
-    "@types/react-native": "^0.60.21",
+    "@types/react-native": "^0.61.0",
+    "eslint": "^6.8.0",
+    "eslint-plugin-prettier": "^3.1.2",
+    "prettier": "^1.19.1",
     "release-it": "^12.3.5",
     "typescript": "^3.6.4"
   },
   "files": [
-    "index.js",
     "lib"
   ]
 }

package.json

@@ -0,0 +1,23 @@
+import useDimensions from './useDimensions'
+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'
+import useDeviceOrientation from './useDeviceOrientation'
+import useLayout from './useLayout'
+
+export {
+  useDimensions,
+  useAppState,
+  useBackHandler,
+  useCameraRoll,
+  useClipboard,
+  useAccessibilityInfo,
+  useKeyboard,
+  useInteractionManager,
+  useDeviceOrientation,
+  useLayout,
+}

src/index.ts

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import {useEffect, useState} from 'react'
 import {
   AccessibilityInfo,
   AccessibilityChangeEvent,
@@ -39,5 +39,5 @@ export default function useAccessibilityInfo() {
     }
   }, [])
 
-  return { reduceMotionEnabled, screenReaderEnabled }
+  return {reduceMotionEnabled, screenReaderEnabled}
 }

src/useAccessibilityInfo.ts

@@ -1,5 +1,5 @@
-import React, { useEffect, useState } from 'react'
-import { AppState, AppStateStatus } from 'react-native'
+import {useEffect, useState} from 'react'
+import {AppState, AppStateStatus} from 'react-native'
 
 export default function useAppState() {
   const currentState = AppState.currentState
@@ -15,7 +15,7 @@ export default function useAppState() {
     return () => {
       AppState.removeEventListener('change', onChange)
     }
-  })
+  }, [])
 
   return appState
 }

src/useAppState.ts

@@ -1,12 +1,10 @@
-import React, { useEffect } from 'react'
-import { BackHandler } from 'react-native'
+import {useEffect} from 'react'
+import {BackHandler} from 'react-native'
 
-export default function useBackHandler(handler: () => void) {
+export default function useBackHandler(handler: () => boolean) {
   useEffect(() => {
     BackHandler.addEventListener('hardwareBackPress', handler)
 
-    return () => {
-      BackHandler.removeEventListener('hardwareBackPress', handler)
-    }
-  })
+    return () => BackHandler.removeEventListener('hardwareBackPress', handler)
+  }, [handler])
 }