Invalid hook call. Hooks can only be called inside of the body of a function component.

VarshiniSampath commented 5 years ago

Description

I'm getting an 'Invalid hook call. Hooks can only be called inside of the body of a function component' error when I try to use React Hooks with react-360. I'm building a 360 app with multiple surfaces and I want to connect them using the useReducer hook.

Expected behavior

This should have rendered the default "Welcome to React 360" home page when I loaded 'http://localhost:8081/index.html'.

Actual behavior

I get the following console error and the page loads an empty cylindrical surface.

Invariant Violation: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

You might have mismatching versions of React and the renderer (such as React DOM)
You might be breaking the Rules of Hooks
You might have more than one copy of React in the same app See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.

This error is located at: in BasicsHelper (at index.js:24) in Basics (at renderApplication.js:33) in RCTView (at View.vr.js:543) in View (at AppContainer.js:102) in RCTView (at View.vr.js:543) in View (at AppContainer.js:122) in AppContainer (at renderApplication.js:32)

Reproduction

I initialized a brand new react-360 project and just tried to use the useState hook in my app. I did not change any other part of the code.

import React, {useState} from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
} from 'react-360';

function BasicsHelper() {
  const [temp, setTemp] = useState('hi');
  return (
    <View style={styles.panel}>
      <View style={styles.greetingBox}>
        <Text style={styles.greeting}>
          Welcome to React 360
        </Text>
      </View>
    </View>
  );
};

export default class Basics extends React.Component {
  render() {
    return <BasicsHelper />;
  }
}

const styles = StyleSheet.create({
  panel: {
    // Fill the entire surface
    width: 1000,
    height: 600,
    backgroundColor: 'rgba(255, 255, 255, 0.4)',
    justifyContent: 'center',
    alignItems: 'center',
  },
  greetingBox: {
    padding: 20,
    backgroundColor: '#000000',
    borderColor: '#639dda',
    borderWidth: 2,
  },
  greeting: {
    fontSize: 30,
  },
});

AppRegistry.registerComponent('Basics', () => Basics);

Solution

What needs to be done to address this issue? Ideally, provide a pull request with a fix.

Additional Information

{
  "name": "Basics",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-360/scripts/packager.js",
    "bundle": "node node_modules/react-360/scripts/bundle.js",
    "open": "node -e \"require('xopen')('http://localhost:8081/index.html')\"",
    "devtools": "react-devtools",
    "test": "jest"
  },
  "dependencies": {
    "@babel/preset-react": "^7.0.0",
    "react": "^16.9.0",
    "react-360": "~1.1.0",
    "react-360-web": "~1.1.0",
    "react-dom": "^16.9.0",
    "react-native": "0.55.0",
    "react-native-cli": "^2.0.1",
    "three": "^0.87.0"
  },
  "devDependencies": {
    "babel-jest": "^19.0.0",
    "babel-preset-react-native": "^1.9.1",
    "jest": "^19.0.2",
    "react-devtools": "^2.5.2",
    "react-test-renderer": "16.0.0",
    "xopen": "1.0.0"
  },
  "jest": {
    "preset": "react-360"
  }
}

Additionally, I tried the following to fix this: npm i react@latest react-dom@latest react-native@latest

After I did this and I ran npm run start, I got this error and I could not start the app.
I tried the solutions posted there to fix this but none of them seemed to work. One of the solutions posted was to downgrade react-native to 0.55.0 and when I did that and ran npm run start, I was left with my initial React Hooks error.