Maximum update depth exceeded on native

[amymc]

Hi @drcmda,

I'm seeing this error using a Spring on native:

Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

Here's a snack showing the issue.

Is there something wrong with how I'm trying to implement it or is it a bug in React Spring?

If it's a bug that you think wouldn't be too imtidating for a newcomer, I'd be happy to give it a shot and submit a PR.

Probably unrelated but just in case it's useful info - I also tried importing animated from react-spring and using animated.div instead of Animated.View as you have in the docs but I got this error:
Invariant Violation: View config not found for name div

Thanks!
Amy

[drcmda]

You use regular rn components and extend them with animated(Component), the spring should carry the native flag then. Now you can use the resulting props like always, simply drop them into your styles.

import React, { Component } from 'react'
import { Spring, animated } from 'react-spring/dist/native.cjs' // /dist/native is the esm build
import { View, TouchableOpacity, Text } from 'react-native'

const SpringView = animated(View)

class Test extends Component {
  render() {
    return (
      <Spring native delay={1000} from={{ opacity: 0 }} to={{ opacity: 1 }} config={{ tension: 1, friction: 50 }}>
        {props => (
          <SpringView style={{ flex: 1, paddingTop: 50, ...props }}>
            <Text>helllo</Text>
          </SpringView>
        )}
      </Spring>
    )
  }
}

export default Test

[amymc]

Ok, cool. Thanks