React Native with React spring Launch 'Invariant Violation'

Question

I was trying to make a simple animation on a button just to see if it was working, for that i used react-spring 1, but a problem occurs.

That's what i'm doing to create the animation:

import React from "react";
import { animated, Spring } from "react-spring/native";
import { Button } from "react-native";

const AnimatedButton = animated(Button);

class ThermoComponent extends React.Component {

  constructor(props) {
    super(props);
  }

  render() {
    const targetPerc = (this.targetTemp - this.minTemp) / this.tempRange();
    const sliderYDelta = targetPerc * this.sliderYRange();
    const sliderTargetY = this.yAtMinTemp() - sliderYDelta;
    const newHeight = this.sliderYRange() + sliderYDelta;

    return (
      <Spring native from={{ w: 0, h: 0 }} to={{ w: 300, h: 600 }}>
        {(props) => (
          <AnimatedButton width={props.w} height={props.h} title="hello">
            {" "}
          </AnimatedButton>
        )}
      </Spring>
    );
  }

Here's the complete log i get from the console:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `ThermoComponent`.

Stack trace:
  node_modules/prop-types/factoryWithThrowingShims.js:36:23 in module.exports
  node_modules/prop-types/factoryWithThrowingShims.js:36:23 in module.exports
  node_modules/prop-types/factoryWithThrowingShims.js:61:2 in module.exports
  node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:12531:2 in updateForwardRef
  node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:12626:22 in updateMemoComponent
  node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:15706:15 in cutOffTailIfNeeded
  node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:16087:7 in completeWork
  http://192.168.1.146:19001/node_modules/expo/AppEntry.bundle?platform=android&dev=true&minify=false&hot=false:152687:50 in updateClassComponent
  http://192.168.1.146:19001/node_modules/expo/AppEntry.bundle?platform=android&dev=true&minify=false&hot=false:143964:21 in invokeGuardedCallbackImpl
  http://192.168.1.146:19001/node_modules/expo/AppEntry.bundle?platform=android&dev=true&minify=false&hot=false:144060:42 in invokeGuardedCallback
  node_modules/react-native/Libraries/Utilities/MatrixMath.js:135:23 in reuseRotateXCommand
  http://192.168.1.146:19001/node_modules/expo/AppEntry.bundle?platform=android&dev=true&minify=false&hot=false:157319:30 in performUnitOfWork
  node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:22052:33 in overrideHookState
  node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:21729:17 in createFiberRoot
  [native code]:null in renderRoot
  http://192.168.1.146:19001/node_modules/expo/AppEntry.bundle?platform=android&dev=true&minify=false&hot=false:156826:34 in runRootCallback
  [native code]:null in runRootCallback
  node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:8660:2 in resumeMountClassInstance
  node_modules/react-devtools-core/build/backend.js:1:5299 in <anonymous>
  node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:8653:19 in resumeMountClassInstance
  node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:8639:5 in resumeMountClassInstance
  node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:21498:18 in <anonymous>
  node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:5428:7 in <anonymous>
  node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:5518:15 in <anonymous>
  node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:5559:4 in getCurrentPriorityLevel
  node_modules/react-spring/native.js:1267:87 in Promise$argument_0
  node_modules/react-spring/native.js:1007:22 in AnimatedValue#constructor
  node_modules/react-spring/native.js:1222:9 in Controller#stop
  http://192.168.1.146:19001/node_modules/expo/AppEntry.bundle?platform=android&dev=true&minify=false&hot=false:166117:21 in callFunctionReturnFlushedQueue
  [native code]:null in callFunctionReturnFlushedQueue
  ...

I tried changing AnimatedButton to normal Button, i tried to make it only be , I tried removing spring and reinstalling it. I tried removing the 'native' keyword.

Those are my dependencies (installed):

"expo": "~36.0.0",
    "react": "~16.9.0",
    "react-dom": "~16.9.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
    "react-native-gesture-handler": "~1.5.0",
    "react-native-reanimated": "~1.4.0",
    "react-native-safe-area-context": "0.6.0",
    "react-native-screens": "2.0.0-alpha.12",
    "react-native-svg": "^9.13.3",
    "react-navigation": "^4.1.0",
    "react-navigation-stack": "^2.0.16",
    "react-spring": "^8.0.27"

Answer 1

This error means that there is something in your render method that is not defined. Sometimes it is your own component, you forgot to export. Sometimes it is a third party component you import from the wrong place. I think in your case this is the latter. I would change the import of the Spring component. Try this one:

  import {Spring, animated} from 'react-spring/renderprops'