Default Prev ("Back") and Next don't appear after update about react-native-navbar

[Kureev]

Can you share an example?

[gudmundurmar]

Little background on what I'm doing.
I'm trying to implement React Native into an existing Obj C app:
https://facebook.github.io/react-native/docs/embedded-app-ios.html#content

Currently I have an extra native Obj C navigator (the equivalent of the navigatorIOS) above the navigator. But this shouldn't really have an effect on the navigator which shows up correctly and the Swipe method works and such.

Here's where the navigator is initialized... (The -64 is because of the extra IOSnavbar above)

const React = require('react-native');
const {
  Navigator,
  View,
  Text,
  StyleSheet,
} = React;
const { bindActionCreators } = require('redux');
const { Connector } = require('redux/react-native');
const SearchPage = require('../Components/SearchPage');
const Dimensions = require('Dimensions');
const deviceWidth = Dimensions.get('window').width;
// The magic number 64. This is a number we got from Facebook
const deviceHeight = Dimensions.get('window').height - 64;
const styleConstants = require('../styles/styleConstants');
const styleComponent = StyleSheet.create(require('../styles/Search'));
const SearchActions = require('../Actions/SearchActions');
const NavigationBar = require('react-native-navbar');

const Search = React.createClass({
  render() {
    return (
      <Connector select={state => ({ pax: state.pax })}>
        {this.renderChild}
      </Connector>
    );
  },

  renderChild({ pax, dispatch }) {
    const actions = bindActionCreators(SearchActions, dispatch);
    return (
      <Navigator
        renderScene={this.renderScene}
        configureScene={(route) => {
          if (route.sceneConfig) {
            return route.sceneConfig;
          }
          return Navigator.SceneConfigs.PushFromRight;
        }}
        initialRoute={{
          navigationBar: 
            <NavigationBar
              title="Search"
              titleColor="#FFFFFF"
              buttonsColor="#FFFFFF"
              hidePrev={true}
            />,
          title: 'Search',
          component: SearchPage,
        }}
      />
    );
  },
  renderScene: function(route, navigator) {
    var Component = route.component;
    var navBar = route.navigationBar;
    var navBarStyle = {
      backgroundColor: '#4896C4'
    }
    if (navBar) {
      navBar = React.addons.cloneWithProps(navBar, {
        navigator: navigator,
        route: route,
        style: navBarStyle
      });
    }

    return (
      <View style={{width: deviceWidth, height: deviceHeight}}>
        {navBar}
        <Component {...route.passProps} navigator={navigator} route={route} />
      </View>
    );
  }
});

module.exports = Search;

And here's how I push onto the navigator (where there's no "Back" button showing on the 0.8.2, but shows up on 0.7.3)

this.props.navigator.push({
      navigationBar: 
        <NavigationBar
          title="Results"
          titleColor="#FFFFFF"
          buttonsColor="#FFFFFF"
        />,
      title: 'Results',
      component: SearchResults,
      passProps: { rates: search },
    });

Let me know if you want a full working example and I'll try and put it together later today or tomorrow

[Kureev]

Hm, I'm afraid that plugin has been designed to work with Navigator component, because it pass down navigator property to it's children. Probably, to solve your issue you need just pass navigator property thru. Take a look on this part of the code: https://github.com/Kureev/react-native-navbar/blob/master/index.js#L23-L36

[gudmundurmar]

Sry, for the late response. You're right it works correctly now.
We went over to using CustomPrev and 7.3 so I hadn't tested this.
Thank you 😁

[Kureev]

You're always welcome, man! ☀️