Native spring fails

[amymc]

I think something has changed in react-spring ...

So, say I have this view:

App Vertical
marginTop 100
onClick <
width 100
backgroundColor #ffaa00
when <isClicked
width 150 spring bounciness 20 speed 20
Label Text
text Hi

If I morph it as native I get this:

/* eslint-disable jsx-a11y/accessible-emoji, no-unused-vars */
import React from 'react';
import {
  Animated,
  StyleSheet,
  Text,
  TouchableWithoutFeedback,
} from 'react-native';
import { Spring } from '@viewstools/animations/native';

const styles = StyleSheet.create({
  App1: { marginTop: 100, backgroundColor: '#ffaa00' },
});

class App extends React.Component {
  render() {
    const { props } = this;

    return (
      <Spring
        bounciness={20}
        speed={20}
        delay={0}
        to={{ width: props.isClicked ? 150 : 100 }}
      >
        {animatedApp => (
          <TouchableWithoutFeedback
            activeOpacity={0.7}
            onPress={props.onClick}
            underlayColor="transparent"
          >
            <Animated.View
              testID={`${props['testID'] || 'App'}|${
                props.isClicked ? 'isClicked|' : ''
              }`}
              style={[styles.App1, { width: animatedApp.width }]}
            >
              <Text testID={`App.Label|`}>Hi</Text>
              {props.children}
            </Animated.View>
          </TouchableWithoutFeedback>
        )}
      </Spring>
    );
  }
}

export default App;

It renders fine, but when I try to click on the button I get this:

According to this we should use regular RN components and extend them with animated(Component), like this const SpringView = animated(View) but for that to work I had to

• import the Spring component directly from react-spring
• and apply the style directly on the element rather than using styleSheet.create.

Here's what worked for me:

/* eslint-disable jsx-a11y/accessible-emoji, no-unused-vars */
import React from 'react';
import {
  Text,
  TouchableWithoutFeedback,
  View
} from 'react-native';
import { Spring, animated } from 'react-spring/dist/native.cjs';

const SpringView = animated(View)

class App extends React.Component {
  render() {
    const { props } = this;

    return (
      <Spring
        native
        bounciness={20}
        speed={20}
        delay={0}
        to={{ width: props.isClicked ? 150 : 100 }}
      >
        {animatedApp => (
          <TouchableWithoutFeedback
            activeOpacity={0.7}
            onPress={props.onClick}
            underlayColor="transparent"
          >
            <SpringView
              testID={`${props['testID'] || 'App'}|${
                props.isClicked ? 'isClicked|' : ''
              }`}
              style={{ marginTop: 100, backgroundColor: '#ffaa00',  width: animatedApp.width }}
            >
              <Text testID={`App.Label|`}>Hi</Text>
              {props.children}
            </SpringView>
          </TouchableWithoutFeedback>
        )}
      </Spring>
    );
  }
}

export default App;

I guess it needs work on this repo and on the morpher. Happy to do it obviously but we should proabbly have a chat about it first, when you some time in a couple of weeks.

[rowinbot]

That's not your problem, the issue with the first code is that you're using Animated.View from core Animated library (the one that RN provides by itself), you should actually use animated(View) just the way you do in the second example, and it should work just like fine with StyleSheet.create({bla: bla, bla: bla)}

[amymc]

Hi @rowinbot, so you're saying that all I need to change from the original version is use animated(View) instead Animated.View? If you take a look at this snack, you'll see that doesn't work, the styles aren't getting applied at all. When I run it locally I'm getting this warning re styles.