Search code examples
react-nativeclojurescript

How to create custom header-right element

I have a button

(defn create-task-button []
  [rnu/button {:title    "+"
               :on-press #(rf/dispatch [:navigate-to :create-task])}])

I wanna add this button in header, like this: Header buttons

I trying to do this

(defn app-component []
  [(rnn/create-navigation-container-reload
    [stack/stack
     [{:name      :home
       :component home-comp
       :options   {:title        "Home"
                   :header-right (fn [] create-task-button)}}
      {:name      :create-task
       :component create-task-comp
       :options   {:title "Create Task"}}]])])

And then I have a warning:

Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render

What am I doing wrong? :-)

Solution

  • Answer:

    :header-right (fn [] (r/as-element [create-task-button]))

    TY Eugene Pakhomov