React-native-router-flux: Weird background color

[Shakarang]

Version

Tell us which versions you are using:

• react-native-router-flux v3.31.2
• react-native v0.29.2

Hi,
I've just updated react-native-router-flux to its last version and I have this weird background color on my views.

[aksonov]

Have you set background color for your scene within your components or using getSceneStyle attribute? Previous version uses 'white' by default (as well as some shadow), but i believe it is wrong so i've removed it.

[aksonov]

I could easily revert it and set it back to default if many people uses 'white' by default, please post here your opinions.

[Shakarang]

Hello,

Yes it works when I set a background color..

Thank you !

Maybe you could specify "breaking changes" when you do an update to easily see what was updated?

I use the default color when I don't need to change it now I just had to set the background color everywhere.

[aksonov]

you may set it once using Router getSceneStyle={{background:DEFAULT_BACKGROUND}}.

[Shakarang]

I did this :

<Router store={store}
    sceneStyle={{ backgroundColor: DEFAULT_BACKGROUND }}>

</Router>

[jgkim]

@aksonov I guess it should be getSceneStyle={() => ({background:DEFAULT_BACKGROUND})}.

@Shakarang I've spent several hours, and it turned out that getSceneStyle and sceneStyle are totally different. Their names can mislead.

[ywongweb]

I am having the same problem.

I needed a shared background across all scenes so I wrap the Router inside an Image. But I can see the last scene every time I change route. It looks as if the last scene was trying to fade away but got stucked at 0.3 opacity.

const getSceneStyle = (props, computedProps) => ({
  backgroundColor: 'transparent',
  shadowColor: null,
  shadowOffset: null,
  shadowOpacity: null,
  shadowRadius: null,
});

function Routes() {
  return (
    <Image
      source={require('../../assets/background.jpg')}
      style={{
        flex: 1,
        height: null,
        width: null,
      }}
    >
      <Router
        scenes={scenes}
        getSceneStyle={getSceneStyle}
      />
    </Image>
  );
}

export default connect()(Routes);

[dcolin]

@ywongweb I have the same problem, did you find a solution to fade to zero opacity ?

[ywongweb]

@dcolin I ended up using REPLACE for all scene change instead.

[dcolin]

@ywongweb I just wrote an animation.js who does horizontal/vertical interpolation, you just need to import it :

import animations from './animations';

and change your animation style like this :

<Scene animationStyle={animations.forHorizontal} />
or <Scene animationStyle={animations.forVertical} />

// animation.js
import type  {
  NavigationSceneRendererProps,
} from 'NavigationTypeDefinition';

/**
 * Render the initial style when the initial layout isn't measured yet.
 */
function forInitial(props: NavigationSceneRendererProps): Object {
  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 },
    ],
  };
}

function forHorizontal(props: NavigationSceneRendererProps): Object {
  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],
  });

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

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

function forVertical(props: NavigationSceneRendererProps): Object {
  const {
    layout,
    position,
    scene,
  } = props;

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

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

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

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

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

module.exports = {
  forHorizontal,
  forVertical,
};

[herlon214]

Thanks @dcolin , I tried to apply this animation to all scenes mas didn't work.

render() {
    return (
      <Router>
        <Scene key="root" navigationBarStyle={styles.navigationBar} animationStyle={animations.forHorizontal}>

          <Scene key="splash" component={Splashscreen} title="Splashscreen"  hideNavBar initial={true} />
          <Scene key="login" component={LoginComponent} title="Login"   />
          <Scene key="dashboard" component={DashboardComponent} title="Dashboard"  hideNavBar />

          <Scene key="messages" component={Messages} title="Mensagens" direction="vertical" />
          <Scene key="openMessage" component={OpenMessage} title="Open Message" />

          <Scene key="favorites" component={Favorites} title="Favoritos" />

          <Scene key="search" component={Search} title="Search" animationStyle={animations.forHorizontal} />
          <Scene key="searchResult" component={SearchResult} title="Search Result" />
          <Scene key="openPlace" component={PlaceComponent} title="Login"   />
        </Scene>
      </Router>
    );
  }

Any ideia?

--------- edit
I fixed this by moving the animationStyle={animations.forHorizontal} from the Scene to the Router