React-native: Binding Scene To Navigationbar

I'm putting together this Ask/Answer App, and came across this hurdle: I want to trigger a function in a scene from the navigationBar. Similar to a Login app I have a button in the

Solution 1:

Well, you can do it by keeping everything related to the submission in the scene itself.

How?

You do it by injecting a button in the navbar on-demand.

Here's a solution I created for a project I'm working on: https://rnplay.org/apps/dS31zw

The idea is to supply the navbar route with an object that has a label and a function (and whatever you like.. e.g. icons.)

As a bonus, you can inject the title too!

Note: this trick depends on componentWillMount() being invoked before NavigationBarRouteMapper does it work. If this change in the future, it will definitely break it. But it works flawlessly now!

'use strict';

importReact, {Component} from'react';
importReactNativefrom'react-native';

const {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Navigator,
  Alert,
  TouchableHighlight
} = ReactNative;

classHomeextendsComponent {

  //This trick depends on that componentWillMount fires before the navbar is createdcomponentWillMount() {
        this.props.route.navbarTitle = "Home";

        this.props.route.rightNavButton = {
            text: "Button",
            onPress: this._doSomething.bind(this)
        };
    }

  _doSomething() {
    Alert.alert(
      'Awesome, eh?',
      null,
      [
        {text: 'Indeed'},
      ]
    )
  }

  render() {
    return (
      <Viewstyle={styles.container}><Text>You are home</Text></View>
    );
  }
}

classAppContainerextendsComponent {

    renderScene(route, navigator) {
        switch(route.name) {
            case"Home":
      //You must pass route as a prop for this trick to work properlyreturn<Homeroute={route}navigator={navigator} {...route.passProps}  />default:
            return (
        <Textroute={route}style={styles.container}>
            Your route name is probably incorrect {JSON.stringify(route)}
            </Text>
      );
        }
    }

  render() {
    return (
      <NavigatornavigationBar={
          <Navigator.NavigationBarstyle={styles.navbar }
            routeMapper={NavigationBarRouteMapper } />
        }

        initialRoute={{ name: 'Home' }}
        renderScene={ this.renderScene }

      />
    );
  }
}

//Nothing fancy here, except for checking for injected buttons.varNavigationBarRouteMapper = {
  LeftButton(route, navigator, index, navState) {
    if(route.leftNavButton) {
      return (
        <TouchableHighlightstyle={styles.leftNavButton}underlayColor="transparent"onPress={route.leftNavButton.onPress}><Textstyle={styles.navbarButtonText}>{route.leftNavButton.text}</Text></TouchableHighlight>
      );
    }
    elseif(route.enableBackButton) {
      return (
        <TouchableHighlightstyle={styles.leftNavButton}underlayColor="transparent"onPress={() => navigator.pop() }>
          <Textstyle={styles.navbarButtonText}>Back</Text></TouchableHighlight>
      );
    }
  },
  RightButton(route, navigator, index, navState) {
    if(route.rightNavButton) {
      return (
        <TouchableHighlightstyle={styles.rightNavButton}underlayColor="transparent"onPress={route.rightNavButton.onPress}><Textstyle={styles.navbarButtonText}>{route.rightNavButton.text}</Text></TouchableHighlight>
      );
    }
  },
  Title(route, navigator, index, navState) {
    return (<Textstyle={styles.navbarTitle}>{route.navbarTitle || route.name}</Text>);
  }
};

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    marginTop: 66
  },
  navbar: {
    backgroundColor: '#ffffff',
  },
  navbarTitle: {
    marginVertical: 10,
    fontSize: 17
  },
  leftNavButton: {
    marginVertical: 10,
    paddingLeft: 8,
 },
  rightNavButton: {
    marginVertical: 10,
    paddingRight: 8,
  },
  navbarButtonText: {
    fontSize: 17,
    color: "#007AFF"
  }
});

AppRegistry.registerComponent('AppContainer', () =>AppContainer);