The `navigation` object hasn't been initialized yet. #1019

killianarts · 2025-01-15T07:26:30Z

killianarts
Jan 15, 2025

I have a screen with a list of items. I would like to navigate to a screen for details of one of items. I setup the <behavior> to open a screen at the url for the item.

I also have a basic <navigator> set up.

  <navigator id="root" type="stack">
    <nav-route id="home" href="{{ url('hv.home_screen') }}"></nav-route>
    @foreach ($nourishments as $nourishment)
    <nav-route id="menu-item-{{ $nourishment->id }}" href="{{ route('hv.menu_item_screen', $nourishment->id) }}"></nav-route>
    @endforeach
  </navigator>

(I'm not sure if I need the <nav-route> for each item)

When I try to navigate, I get an error:

The 'navigation' object hasn't been initialized yet.

Anybody know why that might be?

// App.tsx
<NavigationContainer>
  <BottomTabBarContextProvider>
    <Hyperview
      behaviors={Behaviors}
      components={Components}
      entrypointUrl={`${Constants.expoConfig?.extra?.baseUrl}/hv`}
      fetch={fetchWrapper}
      formatDate={formatDate}
      logger={new Logger(Logger.Level.log)}
      navigationComponents={{
        BottomTabBar,
      }}
    />
  </BottomTabBarContextProvider>
</NavigationContainer>

If I understand correctly, I shouldn't have to mess with the contents of App.tsx, but I'm not sure if that's the case.

Answered by hgray-instawork

Jan 16, 2025

Ah, the problem here is that your <doc> cannot contain both a navigator and a screen. Your entry point url should point to a document that contains only the <doc><navigator.../></doc> structure. You then need to create a second document which contains the <doc><screen .../></doc> structure for the "home" page. The url for that second document goes into the single <nav-route> you have provided.

index.xml

<doc>
   <navigator id="root" type="stack">
      <nav-route id="home" href="/home.xml"></nav-route>
    </navigator>
</doc>

home.xml

<doc>
   <screen ... />
</doc>

There are some additional samples in the Guide section of our website that you might find useful, under the "Hyperview Navi…

View full answer

hgray-instawork · 2025-01-15T17:33:23Z

hgray-instawork
Jan 15, 2025
Maintainer

@killianarts, thanks for reaching out.

The problem may be related to your navigation hierarchy. You do not need to create a unique <nav-route> for each "nourishment" item. Rather, you can simply include the "home" screen in the navigator, and then use behaviors on your home screen to open each item in a separate view. Hyperview supports navigation actions "new" and "push". A "new" can be used to show a modal screen on top of your current screen, while a "push" will replace your current screen. Both behaviors accept an "href" attribute which will define where the data can be loaded.

Example navigation:

<navigator id="root" type="stack">
  <nav-route id="home" href="{{ url('hv.home_screen') }}"></nav-route>
</navigator>

Example Home Screen:

<doc xmlns="https://hyperview.org/hyperview">
  <screen>
    <body>
      <list>
        <item id="{{ nourishment[0].id }} ">
            <behavior trigger="press" action="push" href="/url-to-nourishment-id-0" />
        </item>
        <item id="{{ nourishment[1].id }} ">
            <behavior trigger="press" action="push" href="/url-to-nourishment-id-1" />
        </item>
      </list>
    </body>
  </screen>
</doc>

You can find examples of using "new", "push" and other navigation behaviors in the "Navigation" section of the demo under "Behaviors/Actions".

The second problem you encountered is the 'navigation' object hasn't been initialized. The initialization of the navigation system is asynchronous and navigation behaviors can't be triggered until navigation is ready. Since the navigation is complete by the time a screen is rendered, you will be able to trigger behaviors in your "home" screen to perform navigation.

If this doesn't resolve your issues, could you please let us know where you were trying to trigger the behavior?

0 replies

killianarts · 2025-01-16T00:48:13Z

killianarts
Jan 16, 2025
Author

Thanks Mr. Gray.

I kinda figured that I didn't need the extra nav-route stuff for each item. Thanks for clarifying for me.

My "home" endpoint is where I have the following code:

<doc xmlns="https://hyperview.org/hyperview">
  <navigator id="root" type="stack">
    <nav-route id="home" href="{{ route('hv.home_screen') }}"></nav-route>
  </navigator>
  <screen>
    <styles>
      ...
    </styles>
    <body scroll="true">
      <header>
        <text style="Header">
          Menu
        </text>
      </header>
      <view style="menu-container">
        @foreach ($nourishments as $n)
        <view style="menu-item">
          <image style="Image" source="{{ asset('storage/' . $n->image_url) }}" />
          <text style="menu-item--item-name">
            {{ $n->name }}
          </text>
          <view style="menu-item--button-container">
            <text style="menu-item--price">
              ￥{{ $n->s_price }}
            </text>
            <view style="main-button">
              <behavior trigger="press" href="{{ route('hv.menu_item_screen', $n->id) }}" action="new"></behavior>
              <image style="icon" source="{{ asset('storage/img/android/drawable-xxxhdpi/bag_shopping.png') }}" />
              <text style="button-text">
                Add
              </text>
            </view>
          </view>
        </view>
        @endforeach
      </view>
    </body>
  </screen>
</doc>

The behavior looks similar to the code examples you provided:

<behavior trigger="press" href="{{ route('hv.menu_item_screen', $n->id) }}" action="new"></behavior>

I also tried action="push".

I still get the navigation object error. I've confirmed in a web browser that the rendered href's are correct.

4 replies

hgray-instawork Jan 16, 2025
Maintainer

Ah, the problem here is that your <doc> cannot contain both a navigator and a screen. Your entry point url should point to a document that contains only the <doc><navigator.../></doc> structure. You then need to create a second document which contains the <doc><screen .../></doc> structure for the "home" page. The url for that second document goes into the single <nav-route> you have provided.

index.xml

<doc>
   <navigator id="root" type="stack">
      <nav-route id="home" href="/home.xml"></nav-route>
    </navigator>
</doc>

home.xml

<doc>
   <screen ... />
</doc>

There are some additional samples in the Guide section of our website that you might find useful, under the "Hyperview Navigation" section: https://hyperview.org/docs/guide_navigation

Answer selected by killianarts

killianarts Jan 17, 2025
Author

Ah, thank you, that works! I made the endpoint just doc with navigator and it worked.

I just want to clarify some things.

When I go to navigator endpoint, I am shown the home screen. My guess is that the first screen displayed is the first nav-route defined in the navigator. Am I correct?

killianarts Jan 17, 2025
Author

Also, did I miss this somewhere in the documentation? I'm new to this mobile app stuff so I have no idea if this is a typical pattern in mobile/React Native development.

hgray-instawork Jan 17, 2025
Maintainer

That's great, I'm glad that worked out for you.

To answer your question regarding which screen is displayed, it's a bit of a complicated answer:

if only one <nav-route> is defined, that is shown
in a "tab" type navigator, the first one is shown unless a "selected" attribute is used on another route
in a "stack" type navigator, the last one is shown (pre-populating the 'stack')
This is covered in the navigation guide in the section "Initial state" found here: https://hyperview.org/docs/guide_navigation#initial-state

I'll make a note to improve the documentation around the contents of <doc> to hopefully avoid further confusion.

Good luck!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

The `navigation` object hasn't been initialized yet. #1019

{{title}}

Replies: 2 comments 4 replies

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

Select a reply

The navigation object hasn't been initialized yet. #1019

killianarts Jan 15, 2025

Replies: 2 comments · 4 replies

hgray-instawork Jan 15, 2025 Maintainer

killianarts Jan 16, 2025 Author

hgray-instawork Jan 16, 2025 Maintainer

killianarts Jan 17, 2025 Author

killianarts Jan 17, 2025 Author

hgray-instawork Jan 17, 2025 Maintainer

The `navigation` object hasn't been initialized yet. #1019

killianarts
Jan 15, 2025

Replies: 2 comments 4 replies

hgray-instawork
Jan 15, 2025
Maintainer

killianarts
Jan 16, 2025
Author

hgray-instawork Jan 16, 2025
Maintainer

killianarts Jan 17, 2025
Author

killianarts Jan 17, 2025
Author

hgray-instawork Jan 17, 2025
Maintainer