React-native-router-flux: Unknown white background

[julesmoretti]

Version

Tell us which versions you are using:

"react-native": "^0.41.2",
"react-native-router-flux": "^3.37.0",

Expected behaviour

Upon setting a sceneStyle on Router or nested Scene, I should be able to control the overall background color.

Actual behaviour

Despite applying a series of sceneStyle's to every component's, I am not able to regain control of the background when 2 scenes are switching. In the case bellow I am manually sliding down a modal scene down. But this occurs also on regular horizontal animations.

Steps to reproduce

import React from 'react';

import {
  StyleSheet,
} from 'react-native';

import { Provider } from 'react-redux';
import { Actions, Router, Scene } from 'react-native-router-flux';

import store from './store';

import Login from './login';
import Devices from './devices';
import Info from './info';

const backIcon = require('./login/back.png');
const infoIcon = require('./devices/info.png');

// export default class kobold extends Component {
function kobold() {
  const getSceneStyle = () => {
    const style = {
      backgroundColor: 'black',
    };
    return style;
  };

  return (
    <Provider store={store}>
      <Router
        getSceneStyle={getSceneStyle}
        sceneStyle={styles.scenes}
        navigationBarStyle={styles.navigationBar}
      >
        <Scene
          initial
          getSceneStyle={getSceneStyle}
          key="root"
          sceneStyle={[styles.scenes, {
            backgroundColor: 'red',
          }]}
        >
          <Scene
            key="login"
            component={Login}
            sceneStyle={styles.scenes}
            leftButtonImage={backIcon}
            leftButtonIconStyle={[{
              marginLeft: (8 * 2.35) - 8,
              width: 11.5 * 2.35,
              height: 21,
            }]}
            onLeft={() => console.log('left clicked')}
            title="EMAIL"
            titleStyle={styles.navigationTitle}
          />
          <Scene
            initial
            key="devices"
            component={Devices}
            sceneStyle={styles.scenes}
            backButtonImage={backIcon}
            leftButtonIconStyle={[{
              marginLeft: (8 * 2.35) - 8,
              width: 11.5 * 2.35,
              height: 21,
            }]}
            rightButtonImage={infoIcon}
            rightButtonIconStyle={[{
              marginRight: (8 * 2.35) - 12,
              width: 11.5 * 2.35,
              height: 11.5 * 2.35,
            }]}
            onRight={() => {
              console.log('more info pressed');
              Actions.info();
            }}
            title="MY DEVICES"
            titleStyle={styles.navigationTitle}
          />
        </Scene>

        <Scene
          key="info"
          component={Info}
          title="Info"
          direction="vertical"
          sceneStyle={styles.scenes}
          hideNavBar
        />
      </Router>
    </Provider>
  );
}

export default kobold;

const styles = StyleSheet.create({
  scenes: {
    flex: 1,
    backgroundColor: '#2f3132',
  },
  navigationBar: {
    flex: 1,
    paddingBottom: 55,
    backgroundColor: '#2f3132',
    borderBottomWidth: 0,
  },
  navigationTitle: {
    color: '#ffffff',
    fontFamily: 'BrownProTT-Bold',
    fontSize: 9 * 2.5,
    lineHeight: 10 * 2.5,
  },
});

[julesmoretti]

Wrapping the component in a view that has flex:1 and a background color did the trick for me...

Additionally to not get the animated out theme to white out, I had to add getSceneStyle={getSceneStyle} to the router and then:

  const getSceneStyle = () => {
    const style = {
      backgroundColor: '#2f3132',
    };
    return style;
  };

Ideally though the View wrapper should be redundant and the background color should be controllable through the router style.

[wvicioso]

@julesmoretti I think I'm having a similar issue. Hoping you can shed some light. I'm trying to keep a static background and animate components over it.

this is my set up:

      <Image source={require('../images/background.jpg')} style={{ flex: 1, width: null, height: null}}>
        <Router style={getScenceStyle}>
            <Scene key="login" component={Login} initial={true} hideNavBar />
            <Scene key="signup" component={Signup} />
            <Scene key="home" component={Home} />
            <Scene key="event" component={Event} />
        </Router>
      </Image>

  <View style={{flex: 1, backgroundColor: 'transparent',}}>
       <Text>Login scene</Text>
   </View>

   <View style={{flex: 1, backgroundColor: 'transparent'}}>
       <Text>Signup scene</Text>
   </View>

There is a white background behind the components hiding the background image. All components have a wrapping View that has backgroundColor set to transparent. getSceneStyles has backgroundColor: 'transparent'

Thanks

[julesmoretti]

Hey @wvicioso let me see if I can help, Is there a reason why the width and height are set to null?

I will try to replicate on my end what you have going shortly

[wvicioso]

@julesmoretti Setting width and height to null lets me cover the whole screen with an image without oversizing it. Something that I haven't been able to achieve with resizeMode

[julesmoretti]

@wvicioso - ok cool I did not know that but try this:

Instead of:

<Router style={getScenceStyle}>

try

<Router getSceneStyle={getScenceStyle}>

;)

I personally used:

<Router getSceneStyle={() => styles.defaultBG}>

const styles = StyleSheet.create({
  defaultBG: {
    backgroundColor: 'transparent',
  },
});

Let me know if that worked out :)

[wvicioso]

@julesmoretti WOW!!!! THANK YOU!!!!!

[OrianeInMoon]

julesmoretti solution works with <Router />, but how make it work with ConnectedRouter?

[aksonov]

The same way.