How does Shoutem v5 handle multilevel navigation?

Question

The examples don't show how to link from one screen to another. Is this possible using the Shoutem v5 web interface?

Answer 1

Check here in Shoutem's documentation for navigateTo Redux action creator. It's easy to navigate to another screen using that function. You just call it and pass it a screen name and props for the screen. If you want to open screen from within the current extension, use ext function from app/extension.js file.

Here's the Screen file:

import React, {
  Component
} from 'react';

import {
  TouchableOpacity,
  Text
} from 'react-native';

import { navigateTo } from '@shoutem/core/navigation';
import { ext } from '../extension';
import { connect } from 'react-redux';

class Screen extends Component {
  // method inside Screen component
  render() {
    const { navigateTo } = this.props;

    return (
      <TouchableOpacity onPress={() => navigateTo({
        screen: ext('AnotherScreen'),
        props: { }
      })}>
        <Text>Click here!</Text>
      </TouchableOpacity>
    );
  }
}

// connect screen to redux store
export default connect(
  undefined,
  { navigateTo }
)(Screen)

This way, you can connect 2 different extensions as well. As extensions represent separate functionalities, all the screens are already linked inside. That's why you can't do this manually inside of the builder, but doing so in the code is as easy as the code above.