🎣 Using React Hooks in React Native

React Hooks will ship as part of React Native 0.59.

If you are interested in using Hooks before then, see my comment below.

Original issue:

• Review the documentation: https://facebook.github.io/react-native
• Search for existing issues: https://github.com/facebook/react-native/issues
• Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

[skip envinfo] OS: Windows 10 Node: 10.11.0 Yarn: Not Found npm: 6.4.1 Watchman: Not Found Xcode: N/A Android Studio: Version 3.2.0.0 AI-181.5540.7.32.5056338

Packages: (wanted => installed) react: 16.7.0-alpha.0 => 16.7.0-alpha.0 react-native: https://github.com/expo/react-native/archive/sdk-30.0.0.tar.gz => 0.55.4 expo: 2.2.0

Description

When using React Hooks like useState within a function component, I get the following error message.

hooks can only be called inside the body of a function component

export default function RootContainer(props) {
  const [something, setSomething] = useState('nothing');

  return (
    <View />
  );
};

[hramos]

Using Hooks in React Native

If you’d like to try out Hooks today, you can do the following after installing React 16.7.0-alpha in your project:

Note: Hooks are an experimental proposal to React. You can learn more in @gaearon’s post, Making Sense of React Hooks.

1. Clone the https://github.com/facebook/react repository.
2. Navigate to the react directory.
3. Replace all instances of enableHooks = false with enableHooks = true in packages/shared.
4. Run yarn install
5. Run yarn build -- --type=RN_OSS.
6. After a few seconds, you’ll notice a new build/react-native/ directory has been created. Copy the contents of this directory, to your project’s node_modules/react-native/Libraries/Renderer directory.

Let us know if the above steps work out for you.

---

We’re planning on landing support for React 16.6.0 in 0.57.5. Hooks is available in the 16.7.0-alpha, and feedback from the community so far has been that upgrading to alphas of React in the stable React Native releases can be disruptive. What do people here think about a React Native 0.57.5-alpha release that includes support for 16.7.0-alpha out of the box?

[gaearon]

We can just do a sync with enableHooks: false feature flag and then those who want can override it locally.