Error: Invalid Hook Call

[shoaib2527]

Here is what I did

1. Clone project
2. Rename steps
3. yarn (root of react-native-module-template)
4. cd example
5. yarn && yarn android

Got this this Error "Invalid Hook Call".

Note:

1. I added nothing in either Example project or main module.
2. I tried it with & without "js-only" option. Got same result in both cases.
3. If I comment out Counter import error disappears.

Let me know if anyone faced this issue.

Thanks in advance

[demchenkoalex]

Hey @shoaib2527 I don't see why is it a problem, because counter is some dummy code, you should really remove it and write your lib :) I will double check of course while upgrading to 0.67 but since it was always working before probably some local issue with renaming stuff (as I say in the docs rename script is not bulletproof)

[Rolls98]

I have the same problem since this morning. I can not understand even when I return a simple <Text> it gives me the error.

[shoaib2527]

@demchenkoalex It looks a problem to me because Counter is a simple example with just one state. Also I tried by just returning a Text, however results were same. I'm gonna try it without rename script, I'll post outcomes here.

[shoaib2527]

Its working fine without using rename script. Thanks @demchenkoalex

[demchenkoalex]

Okay, I will double check the script, maybe something's changed with some dependency update

[demchenkoalex]

So I renamed the library to the react-native-button, following the original steps. Example's App.tsx

import React, { useEffect } from 'react'
import RNButtonModule, { Counter } from 'react-native-button'

const App = () => {
  useEffect(() => {
    console.log(RNButtonModule)
  })

  return <Counter />
}

export default App

Library's index.tsx

import * as React from 'react'
import { Button, NativeModules, StyleSheet, Text, View } from 'react-native'

export const addOne = (input: number) => input + 1

export const Counter = () => {
  const [count, setCount] = React.useState(0)

  return (
    <View style={styles.container}>
      <Text>You pressed {count} times</Text>
      <Button onPress={() => setCount(addOne(count))} title='Press Me' />
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    height: 200,
  },
})

export default NativeModules.RNButtonModule

working good.

I did some updates in the meantime maybe it was resolved itself?

UPD: also tried with js-only, same code, just without native module, also works, not sure what is the problem :(

[willymulyana]

@demchenkoalex I get same issue. I found that it's because there's 2 react (one in library and another in main project). I resolve by deleting react folder in library side.

But, I have issue that there's no hot loading when doing changes in library, it seem it reload by the changes but no effect. So, I need to do manual reload for it to take effect, still not sure what's wrong. In this case I setup my own project instead of provided example, also I did renaming with still include native.

[demchenkoalex]

@willymulyana you shouldn't remove the react, for that you have metro configuration (metro.config.js), you see

module.exports = {
  watchFolders: [moduleRoot],
  resolver: {
    extraNodeModules: {
      react: path.resolve(__dirname, 'node_modules/react'),
      'react-native': path.resolve(__dirname, 'node_modules/react-native'),
    },
    blockList: exclusionList([
      new RegExp(`${moduleRoot}/node_modules/react/.*`),
      new RegExp(`${moduleRoot}/node_modules/react-native/.*`),
    ]),
  }
}

this one ignores one react and uses only one. It is mentioned in the docs, I found this solution back in the day in this article https://www.callstack.com/blog/adding-an-example-app-to-your-react-native-library. To that file you should add every dependency that you have in both library and the example. Can you check that this config is intact - really this should not be the reason for the invalid hook call.

[scascar]

I'm having the same issue. Deleting the react folder in the parent node_modules/ actually worked for me but it feels a bit dirty.

[demchenkoalex]

see the post above, you should not delete that @scascar do you have metro.config.js in the example with the content I posted above?

[maimas]

I am on a windows machine, this is the update I made to bypass the problem:

/**
 * Metro configuration for React Native
 * https://github.com/facebook/react-native
 *
 * @format
 */

const path = require('path')
const exclusionList = require('metro-config/src/defaults/exclusionList')

const moduleRoot = path.resolve(__dirname, '..').replace(/\\/g,'/')   <-----------here---------
module.exports = {
  watchFolders: [moduleRoot],
  resolver: {
    extraNodeModules: {
      react: path.resolve(__dirname, 'node_modules/react'),
      'react-native': path.resolve(__dirname, 'node_modules/react-native'),
    },
    blockList: exclusionList([
      new RegExp(`${moduleRoot}/node_modules/react/.*`),
      new RegExp(`${moduleRoot}/node_modules/react-native/.*`),
    ]),
  },
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true,
      },
    }),
  },
}