Hybrid Living Apps

Thanks to Living Apps Maker, we can build applications where part of the experience is designed within the CMS. These applications are known as "Hybrid Living Apps."

To achieve this, we will install the @telefonica/living-apps-core-react library and render the <GenericWorldController/> component. This component will download content from Living Apps Maker and display the published "home" screen, building an internal navigation stack as defined in the CMS.

type GenericWorldControllerProps {
    id?: string; // entrypoint. "home" by default
    screenName?: string; // entrypoint, by name
    keepPreviousNavigationStack?: boolean;
    onDataLoad?: () => void;
    onExit?: () => void; // back is pressed from entrypoint screen
    onNavigate?: (data: { layout: Layout; isEntrypoint: boolean }) => void; // on navigate to target layout, before render
    customLayoutSelector?: CustomLayoutSelector;
}

In order o build the "hybrid" experience, you can publish simple screens in Living Apps Maker where the title serves as a key. Therefore, using the onNavigate prop, you can intercept navigation to that "virtual" screen to render a different component from the main application. The following example shows how an app uses <GenericWorldController/> to display screens created with the CMS until the "Buy product" screen is accessed, where the app takes control.

function App() {
  const [showCheckout, setShowCheckout] = useState(false);
}

if (showCheckout) {
  return (
    <CustomCheckoutScreen
      onBack={() => {
        setShowCheckout(false);
      }}
    />
  );
}

<GenericWorldController
  keepPreviousNavigationStack
  onNavigate={(data) => {
    const screen = data.layout.question;

    if (screen == 'Buy product') {
      setShowCheckout(true);
    }
  }}
  onExit={() => {
    laSdk.close();
  }}
/>;