React-native-router-flux: navigationBarBackgroundImage killing Styles

[jasmo2]

• react-native-router-flux v3.35.0
• react-native v0.4.0

I have try to set a Background image but when I set it, it destroy all the styles in the navbar

Which could be the solution in this case?

Expected behaviour

Actual behaviour

[cridenour]

I don't see why it should be.

See: https://github.com/aksonov/react-native-router-flux/blob/master/src/NavBar.js#L572

Can you share the actual implementation?

[jasmo2]

@cridenour this is the implementation:

<Router
       backAndroidHandler={() => (true)}
        leftButtonIconStyle={leftButtonIconStyle}
        navigationBarStyle={navStyle}
        titleStyle={titleStyle}
        schema='withoutAnimation'
>
  <Scene key="drawer" component={SideDrawer} open={false} >
          <Scene key="tabs" tabs >
            <Scene
              initial
              panHandlers={null}
              component={Dashboard}
              hideTabBar
              key="dashboard"
              navigationBarBackgroundImage={myBackgroundImage}
              title="Propuestas"
              renderLeftButton={openDrawer}
            />
            <Scene
              panHandlers={null}
              component={PollsListResults}
              hideTabBar
              key="pollsListResults"
              title="Resultados"
              renderLeftButton={openDrawer}
            />
          </Scene>
        </Scene>
      </Router>

const styles = StyleSheet.create({
  leftButtonIconStyle: {
    tintColor: colors.blueSeamos,
  },
  navStyle: {
    backgroundColor: 'white',
    paddingTop: 25,
    height: 100
  },
  titleStyle: {
    color: colors.blueSeamos,
  }
});

[cridenour]

leftButtonIconStyle={leftButtonIconStyle}
navigationBarStyle={navStyle}
titleStyle={titleStyle}

should be

leftButtonIconStyle={styles.leftButtonIconStyle}
navigationBarStyle={styles.navStyle}
titleStyle={styles.titleStyle}

[jasmo2]

@cridenour thats not the problem
here is the another part that shows:

render() {
    const {
      leftButtonIconStyle, navStyle,
      titleStyle
    } = styles;
    return (
        ...
   )
}

[jasmo2]

here is the full file

import React, { Component } from 'react';
import { Dimensions, Platform, StyleSheet } from 'react-native';
import { Router, Scene, ActionConst } from 'react-native-router-flux';

import CameraIcon from './components/cameraIcon';
import ExitButton from './components/exitButton';
import Dashboard from './components/dashboard'; //eslint-disable-line
import Debates from './components/debates'; //eslint-disable-line
import GraphResults from './components/graphResults';
import Home from './components/home';
import IntroPage from './components/introPage';
import IndexLoading from './components/indexLoading';
import PollsListResults from './components/pollsListResults';
import Register from './components/register';
import SideDrawer from './components/sideDrawer';
import TabIcon from './components/tabIcon';
import ViewCamera from './components/view-camera';
import { colors } from './utils/colors';

// const { height, width } = Dimensions.get('window');
function openDrawer() {
  return (<TabIcon titleStyle={[styles.titleStyle, { bottom: 8 }]} />);
}
function backToCamera() {
  return (< CameraIcon color='white' />);
}
function exitButton() {
  return (<ExitButton />);
}


class RouterComponent extends Component {
  render() {
    const {
      leftButtonIconStyle, navStyle,
      titleStyle
    } = styles;
    return (
      <Router
        backAndroidHandler={() => (true)}
        leftButtonIconStyle={leftButtonIconStyle}
        navigationBarStyle={navStyle}
        titleStyle={titleStyle}
        schema='withoutAnimation'
      >
        <Scene key="root" type={ActionConst.RESET} >
          <Scene
            type={ActionConst.RESET}
            panHandlers={null}
            key="indexLoading"
            hideNavBar component={IndexLoading} title="Loading"
            initial
          />
          <Scene
            type={ActionConst.RESET}
            panHandlers={null}
            key="introPage"
            hideNavBar component={IntroPage} title="IntroPage"
          />
          <Scene
            type={ActionConst.RESET}
            panHandlers={null}
            key="home"
            hideNavBar component={Home} title="Login"
          />
        </Scene>
        <Scene key="register" >
          <Scene
            initial
            hideBackImage
            panHandlers={null}
            key="viewCamera"
            type={ActionConst.RESET}
            component={ViewCamera} title="Captura del Documento"
          />
          <Scene
            key="registerForm"
            component={Register} title="Registro"
            type={ActionConst.RESET}
            renderLeftButton={backToCamera}
            renderRightButton={exitButton}
          />
        </Scene>
        <Scene
          component={GraphResults}
          key="resultsGraph" clone
          title="Resultados"
        />
        <Scene
          key="debates"
          component={Debates}
          title="Debate"
        />
        <Scene key="drawer" component={SideDrawer} open={false} >
          <Scene key="tabs" tabs >
            <Scene
              initial
              panHandlers={null}
              component={Dashboard}
              hideTabBar
              key="dashboard"
              title="Propuestas"
              renderLeftButton={openDrawer}
            />
            <Scene
              panHandlers={null}
              component={PollsListResults}
              hideTabBar
              key="pollsListResults"
              title="Resultados"
              renderLeftButton={openDrawer}
            />
          </Scene>
        </Scene>
      </Router>
    );
  }
}
const styles = StyleSheet.create({
  leftButtonIconStyle: {
    tintColor: colors.blueSeamos,
  },
  navStyle: {
    backgroundColor: 'white',
    paddingTop: 25,
    height: 100
  },
  titleStyle: {
    color: colors.blueSeamos,
  }
});

export default RouterComponent;

[cridenour]

Hm what if you specifically put the navigationBarStyle on the scene as well? Do the styles apply correctly to the other tab with the Dashboard?

[jasmo2]

@cridenour I don't know how to style that kind of element.
There are no examples...

[cridenour]

The original issue says the image itself is killing the styles that were on the NavBar. The NavBar is just a view, so any react-native styles should work. I'm just trying to make sure the image itself is the problem.

[jasmo2]

If I remove the image the nav elements take their usual places

[cridenour]

Can you try applying navigationBarBackgroundImageStyle={navStyle}?

https://github.com/aksonov/react-native-router-flux/blob/master/src/NavBar.js#L582

As you can see here, there is a different structure when using a background image (necessary in React Native vs. web)

[jasmo2]

just change what you wrote me but still the same issue

;(

[cridenour]

Just to be clear, this is a background image and won't be inline with the rest of the content. It might be easier to pass in a custom NavBar (by copying src/NavBar.js and creating LogoNavBar.js in your project) to add an image and style it more directly.

[jasmo2]

Will try and let you know