OndrejRohon OndrejRohon - 2 months ago 35
Javascript Question

Adding navbar buttons to react-native-navigation while using react-native-meteor

I'm using react-native-navigation in combination with react-native-meteor. Since Meteor 1.3 it's recommended to use createContainer method when using React. However, if I remove 'export default' from class definition and move it to export default createContainer(params=>{...}, MyClass), I loose definition of nav bar buttons. How I should write it to not loose definition of my nav bar buttons? Thanks :)

Here is the whole code of my component:

import React, {Component} from 'react';
import {
Text,
View,
StyleSheet,
} from 'react-native';
import Meteor, { createContainer } from 'react-native-meteor';

class TestScreen extends Component {
static navigatorButtons = {
rightButtons: [{
title: 'Reset',
id: 'resetButton'
}, {
title: 'Submit',
id: 'submitButton'
}]
};
constructor(props) {
super(props);
this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(
this));
}
render() {
return ( < View > < Text > Some text < /Text>
</View > );
}
onNavigatorEvent(event) {
if (event.type == 'NavBarButtonPress') {
if (event.id == 'resetButton') {
// reset here
}
if (event.id == 'submitButton') {
// submit here
}
}
}
}
export default createContainer(params => {
const handle = Meteor.subscribe('records');
return {
records: Meteor.collection('records').findOne(),
};
}, TestScreen);

Answer

You can set them dynamically on navigator:

this.props.navigator.setButtons({
  rightButtons: [
    { title: 'Reset', id: 'resetButton' },
    { title: 'Submit', id: 'submitButton' }
  ]
});