Navigation Button Action

[thomasbaldwin]

Issue Description

I would like to make it so that a navigation button on press triggers a method on the respective component that's being displayed. The reason for this is becasue I've made a full-screen TextInput, and would like it so when they click the Post button in the top right corner, it will trigger the post() action on the component. The reason the post() action is on the component is because as they type, I'm updating the state to hold the value of what is in the TextInput.

Steps to Reproduce / Code Snippets / Screenshots

Here's my current navigation code:

Here's what it currently looks like:

software	version
react-navigation	^1.0.0-beta.7
react-native	^0.42.0
node	8.1.2
npm or yarn	yarn

[oxape]

Can't understand what do you want to express.Found a bug or Looking for a solution. If you are looking for a solution, you should show your difficulties.

[thomasbaldwin]

@oxape, I'm looking for a solution. Please check out my stackoverflow post: https://stackoverflow.com/questions/44809807/react-native-navigation-action-using-components-state

Thank you!!

[thomasbaldwin]

Basically I have a Post button in the top right corner and I would like it to call the postComment method on the AddComment Component. However, I don't have access to the component's state, where the comment text is being stored, since I had to make the postComment method static in order to be able to call it from within the navigationOptions

Here is my current code, and the state comes up undefined in the console.log.

import React, { Component } from 'react';
import { Button, ScrollView, TextInput, View } from 'react-native';
import styles from './styles';

export default class AddComment extends Component {
  static navigationOptions = ({ navigation }) => {
    return {
      title: 'Add Comment',
      headerRight: (
        <Button
          title='Post'
          onPress={() => AddComment.postComment() }
        />
      ),
    };
  };
  
  constructor(props) {
    super(props);
    this.state = {
      post: 'Default Text',
    }
  }
  
  static postComment() {
    console.log('Here is the state: ', this.state);
  }
  
  render() {     
    return (
      <View onLayout={(ev) => {
        var fullHeight = ev.nativeEvent.layout.height - 80;
        this.setState({ height: fullHeight, fullHeight: fullHeight });
      }}>
        <ScrollView keyboardDismissMode='interactive'>
          <TextInput
            multiline={true}
            style={styles.input}
            onChangeText={(text) => {
              this.state.post = text;
            }}
            defaultValue={this.state.post}
            autoFocus={true}
          />
        </ScrollView>
      </View>
    );
  }
}

Any ideas how to accomplish what I'm looking for? @oxape

[matthamil]

Attempting to access this.state inside a static method will not work as intended because the this.state you are wanting to access does not exist as a static field. Take a look at a comment solving a very similar issue here: #2013 (comment)

[oxape]

@matthamil
The approach can solve the problem in #2013 (comment).
But I have a question why navigationOptions is designed to be a static variable. I found a lot question about that can't access component's instance variables int navigationOptions in issues.

[matthamil]

@oxape Check out this PR review when navigationOptions were implemented: https://github.com/react-community/react-navigation/pull/1/files#r98188703.

[thomasbaldwin]

Thanks @matthamil I'll check it out! Looks good 👍

[teameh]

Same problem here. Thanks @matthamil and @oxape for the context and solution (works great). That PR makes it clear why it's not possible to access the component's scope inside the navigation options.

That being said, would it not be great if it would be possible to access the Component (and it's state) from within the options?

// Currently failing example:

export default class MyComponent extends Component {
  navigationOptions = ({ navigation }) => ({
    headerRight: <Button title='Action' onPress={this.onAction} />
  });
  
  onAction = () => {
    console.log('Here is the state: ', this.state);
  }
  
  render() {
    ...
  }
}

No clue on how to implement it though.. but maybe you guys have?

[spencercarli]

Hi! In an effort to get the hundreds of issues on this repo under control I'm closing issues tagged as questions. Please don't take this personally - it's simply something we need to do to get the issues to a manageable point. If you still have a question I encourage you to re-read the docs, ask on StackOverflow, or ask on the #react-navigation Reactiflux channel. Thank you!