Skip to content
This repository has been archived by the owner on Jun 27, 2019. It is now read-only.

Latest commit

 

History

History
62 lines (53 loc) · 1.47 KB

NavBarCommunication.md

File metadata and controls

62 lines (53 loc) · 1.47 KB

How to communicate between navigationBar and your component?

You can use EventEmitter

class MyComp extends Component {
  static route = {
    navigationBar: {
      title: 'title',
      renderLeft: (state: ExNavigationState) => {
        const { config: { eventEmitter }  } = state;

        return (
          <TextMenuButton
            tintColor={state.getBarTintColor()}
            onPress={() => eventEmitter.emit('cancel')}
          >
            Cancel
          </TextMenuButton>
        )
      },
      renderRight: (state: ExNavigationState) => {
        const { config: { eventEmitter }  } = state;

        return (
          <TextMenuButton
            tintColor={state.getBarTintColor()}
            onPress={() => eventEmitter.emit('done')}
          >
            Done
          </TextMenuButton>
        );
      },
    },
    styles: {
      ...NavigationStyles.SlideVertical,
      gestures: null,
    },
  };

  _subscriptionDone: EventSubscription;
  _subscriptionCancel: EventSubscription;

  componentWillMount() {
    this._subscriptionDone = this.props.route.getEventEmitter().addListener('done', this._handleDone);
    this._subscriptionCancel = this.props.route.getEventEmitter().addListener('cancel', this._handleCancel);
  }

  componentWillUnmount() {
    this._subscriptionDone.remove();
    this._subscriptionCancel.remove();
  }

  _handleDone = () => {
    this.props.navigator.pop();
  }

  _handleCancel = () => {
    this.props.navigator.pop();
  }
}