Image Background

[graywolf336]

Is it possible to have an image background which gets shared by different views? Basically I want one background per router and each route in that router to share a background. What I've tried is creating a component which renders the children with a route (like the Drawer example) but the background only shows up in the very background when the children transition. Basically the Routes aren't getting applied a transparent background even though I've got it applied.

The below image is a screenshot I grabbed in mid transition. The very back blurred image is what I want as the main background.

My code:
index

      <Router hideNavBar>
        <Schema
            name="default"
            sceneConfig={Navigator.SceneConfigs.FloatFromBottom}
        />

        <Route name="setupProcess">
          <StreetBackground>
            <Router style={styles.transparentBg}>
              <Route name="initialLanding"
                  component={InitialLandingView}
                  initial
                  hideNavBar
                  style={styles.transparentBg}
              />
              <Route name="login"
                  component={LoginView}
                  title={I18n.t('log_in_view')}
                  hideNavBar
                  style={styles.transparentBg}
              />
            </Router>
          </StreetBackground>
        </Route>
      </Router>

StreetBackground

export default class StreetBackground extends Component {
  static propTypes = {
    children: PropTypes.element,
    route: PropTypes.object,
  };

  renderChildren = () => {
    return Children.map(this.props.children, c => {
      return React.cloneElement(c, { route: this.props.route });
    });
  };

  render() {
    return(
      <Image source={require('../images/streetBlurred-75.jpg')}
          style={styles.fullBackgroundImage}
          resizeMode="cover"
      >
        {this.renderChildren()}
      </Image>
    );
  }
}

const styles = StyleSheet.create({
  fullBackgroundImage: {
    flex: 1,
    width: null,
    height: null,
  },
});

Thanks!

[aksonov]

Does exNavigator support common background? This component is just wrapper around it.

[graywolf336]

@aksonov I opened expo/ex-navigator#94 and with the answer provided there, this does indeed work! Just needed to change <Router style={styles.transparentBg}> to <Router sceneStyle={styles.transparentBg}>.

[jayesbe]

@graywolf336 I am trying to use your technique to do something similar however I am getting stuck with the initial route not loading. I end up with just a background image and no child elements.

Have you come across something similar? is there something I might be missing ?

[graywolf336]

@jayesbe I have not, been a while since I tried it. Sorry