React-native-router-flux: navigationBarTitleImage prop doesn't show image

[omerdn1]

Version

Tell us which versions you are using:

• react-native-router-flux v3.38.0
• react-native v0.4.1

Expected behaviour

Nav bar header should show the image included.

Actual behaviour

Image included doesn't show.

Steps to reproduce

1. <Scene key="login" component={LoginForm} sceneStyle={{ paddingTop: 0 }} panHandlers={null} // disables swiping back navigationBarTitleImage={require('../assets/images/navbar-logo.png')} /> </Scene>

I will add that this is the first time I'm trying to use navigationBarTitleImage.

[delvedor]

Hi, thank you for this awesome module!

I also have the same issue:

• react-native v0.42.0
• react-native-router-flux v3.38.0

[omerdn1]

Any news about this?

[cridenour]

Are you able to find it in the inspector? Maybe you need to add better styles with navigationBarTitleImageStyle and our defaults need to be updated.

[omerdn1]

I've tried basically anything, can't get it to work.

[omerdn1]

Just noticed I wasn't using the latest (master) build. Anyways, for best styling you have to change titleWrapperStyle, navigationBarStyle, and navigationBarTitleImageStyle defaults.
titleWrapperStyle: marginTop: 0, position: 'relative', top: 0
navigationBarStyle: justifyContent: 'center', alignItems: 'center'
navigationBarTitleImageStyle: resizeMode: 'contain' and of course include width, height

[m-revetria]

I'm having the same issue:

• iOS: 10.2 & Android 6.0
• react-native: 0.42.0
• react-native-router-flux: 0.38.0

<Scene
      key="Home"
      component={Home.App}
      initial={true}
      navigationBarTitleImage={require('app/src/assets/images/navigation/titleLogo.png')}
      type="replace"
      />

I cannot see any RCTImageView when debugging the view's hierarchy in Xcode, next is how the nav bar is rendered:

I tried with navigationBarBackgroundImage and it works fine.

-- EDITED --
I just tried this in android and it does not working either

[omerdn1]

@m-revetria You are using the release build, use the master

[m-revetria]

Hi @omerdn1! Thanks for your response.

I just tried using master but then react-native start started giving this error:

Failed to build DependencyGraph: @providesModule naming collision:
  Duplicate module name: jsc-heap-capture
  Paths: /path-to-app/node_modules/react-native-router-flux/node_modules/react-native/local-cli/server/middleware/heapCapture/package.json collides with /path-to-app/node_modules/react-native/local-cli/server/middleware/heapCapture/package.json

This error is caused by a @providesModule declaration with the same name across two different files.
Error: @providesModule naming collision:
  Duplicate module name: jsc-heap-capture
  Paths: /path-to-app/node_modules/react-native-router-flux/node_modules/react-native/local-cli/server/middleware/heapCapture/package.json collides with /path-to-app/node_modules/react-native/local-cli/server/middleware/heapCapture/package.json

This error is caused by a @providesModule declaration with the same name across two different files.
    at HasteMap._updateHasteMap (/path-to-app/node_modules/react-native/packager/src/node-haste/DependencyGraph/HasteMap.js:158:13)
    at /path-to-app/node_modules/react-native/packager/src/node-haste/DependencyGraph/HasteMap.js:133:31
error Command failed with exit code 1.

Any idea on how to solve it?

Regards

[filipemonteiroth]

@omerdn1 you should set at least width and height on navigationBarTitleImageStyle and it should work fine, already on navbar center.

[filipemonteiroth]

@m-revetria I'm having this same issue, but I think it is about using git packages on package.json. I'm investigating.

[filipemonteiroth]

@m-revetria I did it. The problem comes when you install from a git repository. If you just delete the folder node_modules from react-native-router-flux inside your project's node_modules, it will be ok. Let us know if it works.

[pbassut]

@filipemonteiroth That works. Thanks so much!
Can't wait for the next release to have that bug fixed.

[pbassut]

The problem with this approach though is that everytime you do npm i to install a new dep that node_modules will come back.

[delvedor]

Hi guys, any news with this issue? :)

[sbdm05]

Hello, I have tried to delete the node modules as you said @filipemonteiroth , but the authentication does not seem to work anymore, any idea ?

[AndrewHenderson]

Users have the option to use a custom Navbar component. I did that with v3.36.0.

I'm just going to copy and past the new Navbar into my project and modify it until this is fixed. If I find a clean solution, I'll submit a PR.

[Samueljoli]

Hola! Has there been any updates to this issue? Also, @AndrewHenderson any luck?

[AndrewHenderson]

@Samueljoli it seems you can simply use react-redux connect function to wrap your scenes. I just discovered this myself in the Switch example. Hope this helps!

<Scene
    key="root"
    component={connect(state=>({profile:state.profile}))(Switch)}
    tabs={true}
    unmountScenes
    selector={props=>props.profile.sessionID ? "main" : "signUp"}
    >
    <Scene key="signUp" component={SignUp}/>
    <Scene key="main" component={Main}>
</Scene>