react-native-display icon indicating copy to clipboard operation
react-native-display copied to clipboard

Second render doesn't trigger animation

Open ArielS1 opened this issue 8 years ago • 4 comments

I'm trying to use 2 animations.

  1. An animation of a photo that appears first time when a specific event happens (poppedPhoto)
  2. An animation of a photo that appears at the beginning without animation and when a specific event happens it shakes (first).

The first animation i described works. The second doesn't even that it was configured the same as the first, the only difference is that it occurs not at the first render.

Another problem i found is that enabled prop is not default configured to true when i create a display and even when i set it to true it only appears when i set it from a this.state.var

render() {
    let firstImage;
    if (this.state.first) {
      console.log('first');
      firstImage =
        (<Display
          enable={this.state.first}
          enterDuration={3000}
          enter='wobble'
        >
          <Image
            source={src}
            style={{ width: 140, height: 140 }}
          />
        </Display>);
    } else {
      console.log('second');
      firstImage =
        (<Image
          source={src}
          style={{ width: 140, height: 140 }}
        />);
    }`

    const poppedPhoto = this.state.uri !== '' ?
      (
        <View>
          <Display
            enable={this.state.poppedPhoto}
            enterDuration={10000}
            keepAlive
            enter="zoomInDown"
          >
            <Image
              onLoad={() => this.setState({
                uri: this.state.uri,
                poppedPhoto: true,
                first: true
              })}
              style={{ width: 200, height: 200 }}
              source={{ uri: this.state.uri }}
            />
          </Display>
        </View>
      ) : null;

    return (
      <View style={styles.container}>
        <View style={{ flexDirection: 'row' }}>
          {firstImage}
        </View>
        {poppedPhoto}
      </View>
    );
  }

ArielS1 avatar Mar 31 '17 16:03 ArielS1

A sample code of the animation shown at the top of the readme could be helpful

ArielS1 avatar Apr 07 '17 13:04 ArielS1

I managed to animate first image by making animation on exit. but then the image vanishes. how can i trigger an animation without hiding the image like in the example of animatable's wobble animation?

ArielS1 avatar Apr 07 '17 13:04 ArielS1

I fixed the second problem by setting a timer after the same time of the animation duration like this: render() { if (this.state.firstImage=== false) { Timer.setTimeout('xxx', () => this.setState({ ...this.state, firstImage: true }), 3000); }

ArielS1 avatar Apr 07 '17 14:04 ArielS1

But the hack i did before doesn't work on an actual android device. Is there a way to retrigger an animation without hiding the image?

ArielS1 avatar Apr 07 '17 16:04 ArielS1