import React, { Component } from 'react';
import { Button, StyleSheeet, View } from 'react-native';

class MultiPageWizard extends Component {
  static navigationOptions = ({ navigation }) => ({
    headerRight: navigation.getParam('getHeaderRight')
  });

  constructor(props) {
    super(props);

    this.state = {
      comment: ''
    }
  }

  componentDidMount() {
    this.props.navigation.setParams({ getHeaderRight: this.renderHeaderRight(false) });
  }

  goToNext = () => {
    // Handler of onPress method of button
    // ... do something like navigate to next page
  }

  updateComment = newValue => {
    this.setState({
      comment: newValue
    }, () => {
      // Callback that executes after state is updated
      if (this.state.comment.length > 4) {
        // Replace what's rendered for the right header with an enabled button
        this.props.navigation.setParams({
          getHeaderRight: this.renderHeaderRight(true)
        });
      } else {
        // Replace what's rendered for the right header with a disabled button
        this.props.navigation.setParams({
          getHeaderRight: this.renderHeaderRight(false)
        });
      }
    });
  }

  renderHeaderRight = enabled => (
    <View style={styles.headerRightButtonContainer}>
      <Button
        title="Next"
        disabled={!enabled}
        onPress={this.goToNext}
       />
    </View>
  );

  render() {
    // ... Render your screen here ...
  }
}

const styles = StyleSheet.create({
  headerRightContainer: {
    paddingRight: 5
  }
});

export default MultiPageWizard;