How to call Screen / Component class method from react-navigation Header

Question

I need to call SearchScreen class method from a React Navigation Header.

The Navigator look like this:

  Search: {
    screen: SearchScreen,
    path: \'         


        

Answer 1

I came across same issue and able to resolve the issue from below links.

class MyScreen extends React.Component {
    static navigationOptions = {
        header: {
            right:  this.saveDetails()} />
        }
    };

    saveDetails() {
        alert('Save Details');
    }

    render() {
        return (
            
        );
    }
}

Source: react-native issues 145

Below is my code

import React, { Component } from "react";
import {
  Container,
  Header,
  Item,
  Input,
  Icon,
  Button,
  Text,
  Left,
  Body,
  Right,
  Content,
  Spinner,
  List,
  ListItem
} from "native-base";
import { View, Image, StyleSheet, Keyboard } from "react-native";
import { connect } from "react-redux";
import {
  onClear,
  onSearchTextChanged,
  searchForProfiles
} from "../../actions/searchActions";

class SearchBar extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      

        
          
        
        
          
          
          
            
          
        
        
          Search
        
      
    );
  }
}

class SearchWorld extends Component {
  static navigationOptions = ({ navigation }) => ({
    left: null,
    header: () => {
      const { state } = navigation;
      return (
         navigation.goBack()}
          onChangeText={text => {
            state.params.onChangeText(text);
          }}
          onSearch={state.params.onSearch}
          onClear={state.params.onClear}
          searchText={state.params.searchText}
        />
      );
    }
  });

  onChangeText = text => {
    this.props.navigation.setParams({
      ...this.props.navigation.state,
      searchText: text
    });
    this.props.onSearchTextChanged(text);
  };

  onSearch = () => {
    Keyboard.dismiss();
    const profile = { search: "test" };
    const token = this.props.token;
    this.props.searchForProfiles(token, profile);
  };

  onClear = () => {
    this.props.onClear();
    this.props.navigation.setParams({
      ...this.props.navigation.state,
      searchText: ""
    });
  };

  componentDidMount() {
    this.props.navigation.setParams({
      onChangeText: this.onChangeText,
      onSearch: this.onSearch,
      onClear: this.onClear,
      searchText: this.props.searchText
    });
  }

  render() {
    const { searchResults } = this.props;
    let items = [];
    if(searchResults && searchResults.data && searchResults.data.length > 0) {
      items = [...searchResults.data];
    }
    return this.props.loading ? (
      
        
      
    ) : (
      
        
           (
              
                {item.password}
              
            )}
          />
        
      
    );
  }
}

const mapStateToProps = state => {
  const { token } = state.user;
  const { searchText, searchResults, error, loading } = state.searchReaducer;

  return {
    token,
    searchText,
    searchResults,
    error,
    loading
  };
};

export default connect(mapStateToProps, {
  onClear,
  onSearchTextChanged,
  searchForProfiles
})(SearchWorld);