Is it possible to use react hooks in react native?

Viewed 4141

In react documentation it says that the variable and the listener hook must be declared within the component but React native complains when I try to do that.

Is there any way to use the Hooks in React Native? Or does anyone know if they are going to be implemented in the future ?

3 Answers

Sort of, though useEffect is not working. The current plan is to move to react 16.6 by 0.57.5 and allow people to opt in to using hooks with an option 0.57.5-alpha build. If you want to use hooks now:

  1. Change your react dependency to 16.7.0-alpha in package.json
  2. Clone react
  3. cd react
  4. yarn install
  5. yarn build -- --type=RN_OSS
  6. copy build/react-native to your project's node_modules/react-native/Libraries/Renderer directory.

You can also use this unofficial react-native build with hooks already included. Just remember that useEffect is not working at all with react-native, so you're better off probably waiting. You can read more about this discussion on this github issue.

EDIT: Hooks are coming!!! They are live in React and have been confirmed as a feature shipping in React Native 0.59, you can even use the current release candidate

React 16.8.0 is the first release to support Hooks. When upgrading, don’t forget to update all packages, including React DOM. React Native supports Hooks since the 0.59 release of React Native.

No Breaking Changes

Before we continue, note that Hooks are:

Completely opt-in. You can try Hooks in a few components without rewriting any existing code. But you don’t have to learn or use Hooks right now if you don’t want to.

100% backwards-compatible. Hooks don’t contain any breaking changes.

Available now. Hooks are now available with the release of v16.8.0.

Only Call Hooks from React Functions

Don’t call Hooks from regular JavaScript functions.  Instead, you can:

  1. Call Hooks from React function components

  2. Call Hooks from custom Hooks

Some Basic Hooks are mention below

useState

useEffect

useContext

Some Additional Hooks

useReducer

useCallback

useMemo

useRef

useImperativeHandle

useLayoutEffect

useDebugValue

For more information please read following document

https://reactjs.org/docs/hooks-intro.html

Related