How to run Animated.Spring in external component call-CodePudding

I'm trying to call Animated.Spring from a parent component and the function isn't running. How do you fix this issue?

It works within the component but not when called from outside. I'm using alerts to show that the function code does run but it skips the Animated call for some reason.

Here is my code:

import React, { Component } from 'react'
import { View, Animated, Button, Easing } from 'react-native'

export default class App extends Component {
  handlerSimpleCall = () => {
    //Calling a function of other class (without arguments)
    new Alerts().handleAnimation();
  };

  render() {
    return (
      <View
        style={{
          justifyContent: 'center',
          alignItems: 'center',
          flex: 1,
          backgroundColor: '#F5FCFF',
        }}>
        <Alerts />
        <View style={{ margin: 10 }}>
          <Button
            title="Function Without Argument"
            onPress={this.handlerSimpleCall}
            color="#606070"
          />
        </View>
      </View>
    );
  }
}

class Alerts extends Component {
  constructor(props) {
    super(props);
    this.animatedValue = new Animated.Value(1)
  }

  handleAnimation = () => {
    this.animatedValue.setValue(0)
    alert("ASD")
    Animated.spring(this.animatedValue, {
      toValue: 1,
      useNativeDriver: true,
      friction: 1
    }).start()
  }
  render() {
    return (
      <View style={{ height: '100%', width: '100%', justifyContent: "center", alignItems: "center" }}>
        <Animated.View style={{ height: 150, width: 150, backgroundColor: 'red', transform: [{ scale: this.animatedValue }] }} />
        <View style={{ width: 100, marginTop: 20 }}>
          <Button onPress={this.handleAnimation} title='Press Me' />
        </View>
      </View>
    )
  }
}

CodePudding user response：

You should use a ref to refer to your component, rather than creating a new Alerts().

I was able to make it work like this:

import React, { Component } from 'react'
import { View, Animated, Button, Easing } from 'react-native'

export default class App extends Component {
    constructor(props) {
    super(props);
    this.alertRef = React.createRef();
  }

  render() {
    return (
      <View
        style={{
          justifyContent: 'center',
          alignItems: 'center',
          flex: 1,
          backgroundColor: '#F5FCFF',
        }}>
        <Alerts
          ref={this.alertRef}
        />
        <View style={{ margin: 10 }}>
          <Button
            
            title="Function Without Argument"
            onPress={() => this.alertRef.current.handleAnimation()}
            color="#606070"
          />
        </View>
      </View>
    );
  }
}

class Alerts extends Component {
  constructor(props) {
    super(props);
    this.animatedValue = new Animated.Value(1)
  }

  handleAnimation = () => {
    this.animatedValue.setValue(0)
    alert("ASD")
    Animated.spring(this.animatedValue, {
      toValue: 1,
      useNativeDriver: true,
      friction: 1
    }).start()
  }
  render() {
    return (
      <View style={{ height: '100%', width: '100%', justifyContent: "center", alignItems: "center" }}>
        <Animated.View style={{ height: 150, width: 150, backgroundColor: 'red', transform: [{ scale: this.animatedValue }] }} />
        <View style={{ width: 100, marginTop: 20 }}>
          <Button onPress={this.handleAnimation} title='Press Me' />
        </View>
      </View>
    )
  }
}