React-native-router-flux: A bug in Example's TabBar page

[winkey728]

Version

• react-native-router-flux v3.30.1
• react-native v0.27.0
  

  Expected behaviour

Do not display the Tab #2_1 page shadow in Tab #1.

Actual behaviour

The Tab #2_1 page shadow is displaying in Tab #1.

Steps to reproduce

1. Click 'Go to TabBar page'
2. Click 'next screen for tab2_1
3. Click the TabBar 'Tab #1'

I haven't run the Example in iOS, so not sure if the bug exists on iOS.

[winkey728]

I think this bug can be solved by dbfb34fe1d27ff1bb5acd37497102421d07aee1b.

[cridenour]

@iWinkey Now that 3.30.4 is live, can you confirm if that fixed the issue? Thanks!

[winkey728]

@cridenour Yes, I'm sure.
To fix the issue, just provide your own animationStyle function to scene tab2_1. Like:

// NavigationCardStackStyleInterpolator.js
function forInitial(props) {
  const {
    navigationState,
    scene,
  } = props;

  const focused = navigationState.index === scene.index;
  const opacity = focused ? 1 : 0;
  // If not focused, move the scene to the far away.
  const translate = focused ? 0 : 1000000;
  return {
    opacity,
    transform: [
      { translateX: translate },
      { translateY: translate },
    ],
  };
}

export function forHorizontal(props) {
  const {
    layout,
    position,
    scene,
  } = props;

  if (!layout.isMeasured) {
    return forInitial(props);
  }

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

  const opacity = position.interpolate({
    inputRange,
    outputRange: [1, 1, 0],  // Set the last value from 0.3 to 0.
  });

  const scale = position.interpolate({
    inputRange,
    outputRange: [1, 1, 0.95],
  });

  const translateY = 0;
  const translateX = position.interpolate({
    inputRange,
    outputRange: [width, 0, -10],
  });

  return {
    opacity,
    transform: [
      { scale },
      { translateX },
      { translateY },
    ],
  };
}

-------------------------------------------------------------------------------------------

// Example.js
import * as NavigationCardStackStyleInterpolator from './NavigationCardStackStyleInterpolator';
......
<Scene key="tabbar" component={NavigationDrawer}>
    ......
    <Scene key="tab2" initial title="Tab #2" icon={TabIcon}>
        <Scene
            key="tab2_1"
            component={TabView}
            title="Tab #2_1"
            renderRightButton={() => <Right />}
            animationStyle={NavigationCardStackStyleInterpolator.forHorizontal}
        />
        <Scene
            key="tab2_2"
            component={TabView}
            title="Tab #2_2"
            hideBackImage
            onBack={() => alert('Left button!')}
            backTitle="Left"
            duration={1}
            panHandlers={null}
        />
    </Scene>
    .......
</Scene>

The shadow occurs because of the last value of outputRange of opacity in NavigationCardStackStyleInterpolator.js is set to 0.3, just need to change it to 0 to make it transparent.

[scriptfans]

@iWinkey thank you very much, this solved my problem:

https://github.com/aksonov/react-native-router-flux/issues/1382

I removed the scale return value, now the position remains the same. Can you explain the details of 'animationStyle' property? thanks again.