React-native-router-flux: How to change Animation for tabs

[vnovick]

Version

Tell us which versions you are using (react native 0.26 is required for v3):
"react-native": "^0.26.2",
"react-native-router-flux": "^3.26.5"

There is no description in docs how to use Animation.

Specifically I want to change Animation on tab change. How can I implement this?

[xvalentino]

I'd like to disable animations. Anyone know if there is an easy way to implement this yet?

[zxcpoiu]

Try

https://github.com/aksonov/react-native-router-flux/blob/master/Example/Example.js#L105

and see if it works

[Anthonyzou]

This seems to work. The only issue I cant figure out is when to reset bounceValue in the state when navigating away.

import React, { Component } from 'react';

import {
  Animated,
  Dimensions,
  NativeModules,
  View,
} from 'react-native';
const {UIManager} = NativeModules;
const WIDTH = Dimensions.get('window').width;

class SitesPage extends Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      bounceValue: new Animated.Value(WIDTH),
    };
    UIManager.setLayoutAnimationEnabledExperimental &&
    UIManager.setLayoutAnimationEnabledExperimental(true);
  }

  componentWillReceiveProps(){
    this.state.bounceValue.setValue(WIDTH)
  }

  componentDidMount() {
    Animated.spring(                          // Base: spring, decay, timing
      this.state.bounceValue,                 // Animate `bounceValue`
      {
        toValue: 0,                         // Animate to smaller size
        velocity: 10,
        deceleration: 2
      },
    ).start();                                // Start the animation
  }

  render() {
    return (
      <Animated.View style={{flex:1, transform: [{translateX: this.state.bounceValue},]}}>
        <View>...</View>
      </Animated.View>
    );
  }
}

[xvalentino]

@Anthonyzou depending on what kind of scene it is, maybe you could reset the state in componentWillUnmount.

[Anthonyzou]

@xvalentino It doesn't seem to work. This is a scene in parent with the attribute tabs={true}

[xvalentino]

Hmm, how about adding a listener?

https://facebook.github.io/react-native/docs/animated.html#addlistener

Once the value hits 0, call https://facebook.github.io/react-native/docs/animated.html#stopanimation and set the state back to whatever you need it to be.

Let me know, as I haven't needed to do this yet, but could end up using this in the future.

Hope this helps! @Anthonyzou

[keeleycarrigan]

@Anthonyzou I think the reason it's not working totally is the Animation start call should be pulled out into it's own function that can be called whenever and it needs to be called again on componentWillReceiveProps after resetting the width. Doing that makes my scenes animate in every time they are called.

@xvalentino thanks so much for this solution. I think I may try to add some logic in there to animate in left or right based on the situation.

[electricfeel1979]

with the version 4.0.0-beta.21 to disable the animation its animationEnabled={false}

i really had to dig around the plugin to find this, it was on the node_modules, hopefully this could have been included on the api reference.

[tranlehaiquan]

animationEnabled={false} work only with IOS? Any idea?