how to a call static function (eg: static navigationOptions) from another function in react native












-1















how can i call a static function (static navigationOptions) from any other function in react native?



It fails when using the this keyword, but is it possible to render static navigationOptions again by calling it?










share|improve this question




















  • 1





    Please add your trial as code (i.e. separated by a blank line, indented with 4 positions).

    – Dirk Horsten
    Nov 21 '18 at 11:03











  • What is your intent? why are you trying to call navigationOptions? Are you trying to pass any params or are you trying to add navigation bar button to the left or right? Kindly include the code which you have used.

    – Manju Basha
    Nov 21 '18 at 11:44











  • @ManjuBasha i think that navigationOptions function is called once when the page loads. I have an conditional headerLeft property inside navigationOptions and it is based on a state param.

    – Fahad
    Nov 22 '18 at 4:00
















-1















how can i call a static function (static navigationOptions) from any other function in react native?



It fails when using the this keyword, but is it possible to render static navigationOptions again by calling it?










share|improve this question




















  • 1





    Please add your trial as code (i.e. separated by a blank line, indented with 4 positions).

    – Dirk Horsten
    Nov 21 '18 at 11:03











  • What is your intent? why are you trying to call navigationOptions? Are you trying to pass any params or are you trying to add navigation bar button to the left or right? Kindly include the code which you have used.

    – Manju Basha
    Nov 21 '18 at 11:44











  • @ManjuBasha i think that navigationOptions function is called once when the page loads. I have an conditional headerLeft property inside navigationOptions and it is based on a state param.

    – Fahad
    Nov 22 '18 at 4:00














-1












-1








-1








how can i call a static function (static navigationOptions) from any other function in react native?



It fails when using the this keyword, but is it possible to render static navigationOptions again by calling it?










share|improve this question
















how can i call a static function (static navigationOptions) from any other function in react native?



It fails when using the this keyword, but is it possible to render static navigationOptions again by calling it?







react-native






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 21 '18 at 15:40









Graham

3,543123559




3,543123559










asked Nov 21 '18 at 10:33









FahadFahad

168




168








  • 1





    Please add your trial as code (i.e. separated by a blank line, indented with 4 positions).

    – Dirk Horsten
    Nov 21 '18 at 11:03











  • What is your intent? why are you trying to call navigationOptions? Are you trying to pass any params or are you trying to add navigation bar button to the left or right? Kindly include the code which you have used.

    – Manju Basha
    Nov 21 '18 at 11:44











  • @ManjuBasha i think that navigationOptions function is called once when the page loads. I have an conditional headerLeft property inside navigationOptions and it is based on a state param.

    – Fahad
    Nov 22 '18 at 4:00














  • 1





    Please add your trial as code (i.e. separated by a blank line, indented with 4 positions).

    – Dirk Horsten
    Nov 21 '18 at 11:03











  • What is your intent? why are you trying to call navigationOptions? Are you trying to pass any params or are you trying to add navigation bar button to the left or right? Kindly include the code which you have used.

    – Manju Basha
    Nov 21 '18 at 11:44











  • @ManjuBasha i think that navigationOptions function is called once when the page loads. I have an conditional headerLeft property inside navigationOptions and it is based on a state param.

    – Fahad
    Nov 22 '18 at 4:00








1




1





Please add your trial as code (i.e. separated by a blank line, indented with 4 positions).

– Dirk Horsten
Nov 21 '18 at 11:03





Please add your trial as code (i.e. separated by a blank line, indented with 4 positions).

– Dirk Horsten
Nov 21 '18 at 11:03













What is your intent? why are you trying to call navigationOptions? Are you trying to pass any params or are you trying to add navigation bar button to the left or right? Kindly include the code which you have used.

– Manju Basha
Nov 21 '18 at 11:44





What is your intent? why are you trying to call navigationOptions? Are you trying to pass any params or are you trying to add navigation bar button to the left or right? Kindly include the code which you have used.

– Manju Basha
Nov 21 '18 at 11:44













@ManjuBasha i think that navigationOptions function is called once when the page loads. I have an conditional headerLeft property inside navigationOptions and it is based on a state param.

– Fahad
Nov 22 '18 at 4:00





@ManjuBasha i think that navigationOptions function is called once when the page loads. I have an conditional headerLeft property inside navigationOptions and it is based on a state param.

– Fahad
Nov 22 '18 at 4:00












2 Answers
2






active

oldest

votes


















0














If you want to change navigation options dynamically, try like this



static navigationOptions = ({ navigation }) => {
return {
title: navigation.getParam('otherParam', 'A Nested Details Screen'),
};
};

this.props.navigation.setParams({otherParam: 'Updated!'})


Another method



    static navigationOptions = ({ navigation }) => {
const {state} = navigation;
return {
title: `${state.params.title}`,
};
};

ChangeThisTitle = (titleText) => {
const {setParams} = this.props.navigation;
setParams({ title: titleText })
}


call this.ChangeThisTitle('your title') wherever you want






share|improve this answer































    0














    They only way to achieve it is using navigation params. So set your headerleft property flag or value using setParams. That will solve the issue. Below mentioned code should be used in your class.



    static navigationOptions = ({ navigation }) => {
    const { params = {} } = navigation.state;
    let buttonView =
    <TouchableOpacity style={navItemStyle} activeOpacity={0.7} onPress={() => { params.logoutClick() }}>
    <Text style={navItemTxt}> Logout</Text>
    </TouchableOpacity >

    return {
    title: 'Home',
    headerLeft: params.showHeaderLeft && buttonView
    };
    };

    componentDidMount() {
    this.props.navigation.setParams({
    showHeaderLeft: this.props.headerFlag,
    //headerFlag used above is your value and showHeaderLeft is the name of the param
    });
    }





    share|improve this answer























      Your Answer






      StackExchange.ifUsing("editor", function () {
      StackExchange.using("externalEditor", function () {
      StackExchange.using("snippets", function () {
      StackExchange.snippets.init();
      });
      });
      }, "code-snippets");

      StackExchange.ready(function() {
      var channelOptions = {
      tags: "".split(" "),
      id: "1"
      };
      initTagRenderer("".split(" "), "".split(" "), channelOptions);

      StackExchange.using("externalEditor", function() {
      // Have to fire editor after snippets, if snippets enabled
      if (StackExchange.settings.snippets.snippetsEnabled) {
      StackExchange.using("snippets", function() {
      createEditor();
      });
      }
      else {
      createEditor();
      }
      });

      function createEditor() {
      StackExchange.prepareEditor({
      heartbeatType: 'answer',
      autoActivateHeartbeat: false,
      convertImagesToLinks: true,
      noModals: true,
      showLowRepImageUploadWarning: true,
      reputationToPostImages: 10,
      bindNavPrevention: true,
      postfix: "",
      imageUploader: {
      brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
      contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
      allowUrls: true
      },
      onDemand: true,
      discardSelector: ".discard-answer"
      ,immediatelyShowMarkdownHelp:true
      });


      }
      });














      draft saved

      draft discarded


















      StackExchange.ready(
      function () {
      StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53410151%2fhow-to-a-call-static-function-eg-static-navigationoptions-from-another-functi%23new-answer', 'question_page');
      }
      );

      Post as a guest















      Required, but never shown

























      2 Answers
      2






      active

      oldest

      votes








      2 Answers
      2






      active

      oldest

      votes









      active

      oldest

      votes






      active

      oldest

      votes









      0














      If you want to change navigation options dynamically, try like this



      static navigationOptions = ({ navigation }) => {
      return {
      title: navigation.getParam('otherParam', 'A Nested Details Screen'),
      };
      };

      this.props.navigation.setParams({otherParam: 'Updated!'})


      Another method



          static navigationOptions = ({ navigation }) => {
      const {state} = navigation;
      return {
      title: `${state.params.title}`,
      };
      };

      ChangeThisTitle = (titleText) => {
      const {setParams} = this.props.navigation;
      setParams({ title: titleText })
      }


      call this.ChangeThisTitle('your title') wherever you want






      share|improve this answer




























        0














        If you want to change navigation options dynamically, try like this



        static navigationOptions = ({ navigation }) => {
        return {
        title: navigation.getParam('otherParam', 'A Nested Details Screen'),
        };
        };

        this.props.navigation.setParams({otherParam: 'Updated!'})


        Another method



            static navigationOptions = ({ navigation }) => {
        const {state} = navigation;
        return {
        title: `${state.params.title}`,
        };
        };

        ChangeThisTitle = (titleText) => {
        const {setParams} = this.props.navigation;
        setParams({ title: titleText })
        }


        call this.ChangeThisTitle('your title') wherever you want






        share|improve this answer


























          0












          0








          0







          If you want to change navigation options dynamically, try like this



          static navigationOptions = ({ navigation }) => {
          return {
          title: navigation.getParam('otherParam', 'A Nested Details Screen'),
          };
          };

          this.props.navigation.setParams({otherParam: 'Updated!'})


          Another method



              static navigationOptions = ({ navigation }) => {
          const {state} = navigation;
          return {
          title: `${state.params.title}`,
          };
          };

          ChangeThisTitle = (titleText) => {
          const {setParams} = this.props.navigation;
          setParams({ title: titleText })
          }


          call this.ChangeThisTitle('your title') wherever you want






          share|improve this answer













          If you want to change navigation options dynamically, try like this



          static navigationOptions = ({ navigation }) => {
          return {
          title: navigation.getParam('otherParam', 'A Nested Details Screen'),
          };
          };

          this.props.navigation.setParams({otherParam: 'Updated!'})


          Another method



              static navigationOptions = ({ navigation }) => {
          const {state} = navigation;
          return {
          title: `${state.params.title}`,
          };
          };

          ChangeThisTitle = (titleText) => {
          const {setParams} = this.props.navigation;
          setParams({ title: titleText })
          }


          call this.ChangeThisTitle('your title') wherever you want







          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Nov 21 '18 at 11:46









          AshaAsha

          2081316




          2081316

























              0














              They only way to achieve it is using navigation params. So set your headerleft property flag or value using setParams. That will solve the issue. Below mentioned code should be used in your class.



              static navigationOptions = ({ navigation }) => {
              const { params = {} } = navigation.state;
              let buttonView =
              <TouchableOpacity style={navItemStyle} activeOpacity={0.7} onPress={() => { params.logoutClick() }}>
              <Text style={navItemTxt}> Logout</Text>
              </TouchableOpacity >

              return {
              title: 'Home',
              headerLeft: params.showHeaderLeft && buttonView
              };
              };

              componentDidMount() {
              this.props.navigation.setParams({
              showHeaderLeft: this.props.headerFlag,
              //headerFlag used above is your value and showHeaderLeft is the name of the param
              });
              }





              share|improve this answer




























                0














                They only way to achieve it is using navigation params. So set your headerleft property flag or value using setParams. That will solve the issue. Below mentioned code should be used in your class.



                static navigationOptions = ({ navigation }) => {
                const { params = {} } = navigation.state;
                let buttonView =
                <TouchableOpacity style={navItemStyle} activeOpacity={0.7} onPress={() => { params.logoutClick() }}>
                <Text style={navItemTxt}> Logout</Text>
                </TouchableOpacity >

                return {
                title: 'Home',
                headerLeft: params.showHeaderLeft && buttonView
                };
                };

                componentDidMount() {
                this.props.navigation.setParams({
                showHeaderLeft: this.props.headerFlag,
                //headerFlag used above is your value and showHeaderLeft is the name of the param
                });
                }





                share|improve this answer


























                  0












                  0








                  0







                  They only way to achieve it is using navigation params. So set your headerleft property flag or value using setParams. That will solve the issue. Below mentioned code should be used in your class.



                  static navigationOptions = ({ navigation }) => {
                  const { params = {} } = navigation.state;
                  let buttonView =
                  <TouchableOpacity style={navItemStyle} activeOpacity={0.7} onPress={() => { params.logoutClick() }}>
                  <Text style={navItemTxt}> Logout</Text>
                  </TouchableOpacity >

                  return {
                  title: 'Home',
                  headerLeft: params.showHeaderLeft && buttonView
                  };
                  };

                  componentDidMount() {
                  this.props.navigation.setParams({
                  showHeaderLeft: this.props.headerFlag,
                  //headerFlag used above is your value and showHeaderLeft is the name of the param
                  });
                  }





                  share|improve this answer













                  They only way to achieve it is using navigation params. So set your headerleft property flag or value using setParams. That will solve the issue. Below mentioned code should be used in your class.



                  static navigationOptions = ({ navigation }) => {
                  const { params = {} } = navigation.state;
                  let buttonView =
                  <TouchableOpacity style={navItemStyle} activeOpacity={0.7} onPress={() => { params.logoutClick() }}>
                  <Text style={navItemTxt}> Logout</Text>
                  </TouchableOpacity >

                  return {
                  title: 'Home',
                  headerLeft: params.showHeaderLeft && buttonView
                  };
                  };

                  componentDidMount() {
                  this.props.navigation.setParams({
                  showHeaderLeft: this.props.headerFlag,
                  //headerFlag used above is your value and showHeaderLeft is the name of the param
                  });
                  }






                  share|improve this answer












                  share|improve this answer



                  share|improve this answer










                  answered Nov 22 '18 at 11:33









                  Manju BashaManju Basha

                  312419




                  312419






























                      draft saved

                      draft discarded




















































                      Thanks for contributing an answer to Stack Overflow!


                      • Please be sure to answer the question. Provide details and share your research!

                      But avoid



                      • Asking for help, clarification, or responding to other answers.

                      • Making statements based on opinion; back them up with references or personal experience.


                      To learn more, see our tips on writing great answers.




                      draft saved


                      draft discarded














                      StackExchange.ready(
                      function () {
                      StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53410151%2fhow-to-a-call-static-function-eg-static-navigationoptions-from-another-functi%23new-answer', 'question_page');
                      }
                      );

                      Post as a guest















                      Required, but never shown





















































                      Required, but never shown














                      Required, but never shown












                      Required, but never shown







                      Required, but never shown

































                      Required, but never shown














                      Required, but never shown












                      Required, but never shown







                      Required, but never shown







                      Popular posts from this blog

                      Costa Masnaga

                      Fotorealismo

                      Sidney Franklin