get title after leftButton about react-native-navbar HOT 21 CLOSED

Nope, it's not a bug. Now it works like this: you have a full-wide stretched title, which is placed underneath buttons (by using position: absolute). It's done this way, because of flex box model doesn't work good for this case. If you have any problems with positioning, just let me know and put some code here, I'll help you figure out how to do your case the best way.

from react-native-navbar.

I'm trying to center the image in this gist of yours: https://gist.githubusercontent.com/Kureev/929f351064b63f8170e0/raw/fedf021b0747f7d196ee38567c7cd381129e7782/example.js

I think only title is stretched. customTitle is not stretched using position: absolute
https://github.com/Kureev/react-native-navbar/blob/master/index.js#L133-L134

from react-native-navbar.

This is how it looks now:

from react-native-navbar.

Wow, looks like a bug, gonna fix it ASAP

from react-native-navbar.

sweet! Glad i could help.

from react-native-navbar.

I can get your image example to work if i add below style to the view in customTitle:

navbar: {
    alignItems: 'center',
    position: 'absolute',
    left: 0,
    bottom: 0,
    width: 320, //replace with screenWidth.
    paddingVertical: 5,
  }

var CustomTitle = React.createClass({
  render: function() {
    return (
      <View style={styles.navbar}>
        <Image source={{uri}} style={{ width: 32, height: 32 }} />
      </View>
    );
  }
});

from react-native-navbar.

I'm doing exactly the same, but in library: I'll wrap all custom titles with View with similar css. Fix will be there soon

from react-native-navbar.

That would be ideal solution. Looking forwards. Appreciate your efforts.

from react-native-navbar.

Fixed in 0.4.3

from react-native-navbar.

@Kureev Awesome!

One problem is the customTitle is not vertically centered like the prev button.. marginTop of 30 on customTitle will not let the image to align with prev button if the image is more than 32x32. Does that make sense?

from react-native-navbar.

So instead of marginTop: 30 on customTitle, it should be bottom: 5 to align with prev and next buttons.

from react-native-navbar.

The idea is that custom components totally on your own. It means that positioning, alignment etc you should do by hands. There's no reason to add any style for those components by default, anyway it's gonna be customized :). I don't wanna confuse anybody with any unexpected styles.

from react-native-navbar.

I understand.

All i'm saying is marginTop of 30 will give you height of 32 for your customTitle. Beyond that it will be cut off. Also, there is no way one can align customTitle with back button on that height of 32.

Back button is center aligned using flex-end with a paddingBottom of 5. CustomTitle should either be aligned with the bottom of back button or top of the backbutton. marginTop of 15/16 or bottom:0 would do that.

I can give you an example to elaborate more.

from react-native-navbar.

Hm, not sure I got it: in the examples I've set bottom: 5 and left/right: 5 manually, it's not included in the component. I admit, that marginTop wasn't the best solution, but it's usage on your own, isn't it? Please, let me know if I missed something.

from react-native-navbar.

example contains next and prev buttons which are not wrapped in a view which is positioned absolutely. That is why you can do all that custom position in prev/next button.

Since customTitle is wrapped in a view which is positioned absolutely , I cannot set the bottom etc. Even if i set bottom it will be within this view and not relative to the navbarContainer.

Solution here is bottom: 5 to customTitle for two things:

1. navbarContainer has a paddingBottom of 5. customTitle needs that too to be able to align with other components.
2. customTitle is wrapped in a view with absolute position unlike other components. bottom will ensure it is aligned with navbarContainer.

from react-native-navbar.

@chirag04 agree?

from react-native-navbar.

LGTM. Can you bump the version?

from react-native-navbar.

Done! 0.4.4 has been released!

from react-native-navbar.

w00t!

Just tried it with the new version. It's perfect. Thanks for working on this one.

from react-native-navbar.

@chirag04 thanks for your contribution to project. You helped a lot!

from react-native-navbar.

sure. thanks to you too for this awesome module.

from react-native-navbar.