React-native-router-flux: How to disable fade out animation for previous scene?

[juiceo]

I would like to disable the fade out & scale animation that is used on the current scene when navigating to a new scene. Is there a way to do that?

[Amurmurmur]

yes of course feel free to use animationStyle property on

Here is a hint for you:

<Provider>
<Router  animationStyle={animationStyle} />
</Provider>


export const animationStyle = (props) => {
  const { layout, position, scene } = props;

  const direction = (scene.navigationState && scene.navigationState.direction) ?
    scene.navigationState.direction : 'horizontal';

  const index = scene.index;

  const inputRange = [index - 1, index, index + 1];
  const width = layout.initWidth;
  const height = layout.initHeight;

  const opacity = position.interpolate({
    inputRange,
    outputRange: [1, 1, 1], //This will prevent the scene from Fading out
  });

  const scale = position.interpolate({
    inputRange,
    outputRange: [1, 1, 1], //This will keep the scale the same
  });

  let translateX = 0;
  let translateY = 0;

  switch (direction) {
    case 'horizontal':
      translateX = position.interpolate({
        inputRange,
        outputRange: [width, 0, -10],
      });
      break;
    case 'vertical':
      translateY = position.interpolate({
        inputRange,
        outputRange: [height, 0, -10],
      });
      break;
  }

  return {
    opacity,
    backgroundColor: 'transparent', // Fixes white border
    transform: [
      { scale },
      { translateX },
      { translateY },
    ],
  };
};

Go ahead and interpolate those values aka play with them, to meet your needs :)

Hope this helps 👍