Keeping only last Portal node in PortalHost

[titoasty]

Hi,

For a use case with a deep hierarchy, I wanted to only keep the last element portaled to PortalHost.
So my solution was to create this component:

import type { PortalHostProps } from '@gorhom/portal/src/components/portalHost/types';
import { usePortalState } from '@gorhom/portal/src/hooks/usePortalState';
import { memo, useEffect } from 'react';

const PortalHostUniqueComponent = ({ name }: PortalHostProps) => {
    //#region hooks
    const state = usePortalState(name);
    const { registerHost, deregisterHost } = usePortal(name);
    //#endregion

    //#region effects
    useEffect(() => {
        registerHost();
        return () => {
            deregisterHost();
        };
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);
    //#endregion

    //#region render
    return <>{state.length > 0 ? state[state.length - 1].node : null}</>;
    //#endregion
};

export const PortalHostUnique = memo(PortalHostUniqueComponent);
PortalHostUnique.displayName = 'PortalHostUnique';

The only real change is the return line, only keeping the last node added.

return <>{state.length > 0 ? state[state.length - 1].node : null}</>;

Now I can have a default portal that will be overrided by deeper portals.
Maybe it could also be a boolean property on PortalHost like "unique"?

[isaachinman]

@gorhom This issue was fantastically helpful.

For context, we are using this package to render shared UI components within an Expo _layout file. In other words, for example, we want our header UI to remain in place, but change the title, when a screen is pushed.

@titoasty's suggestion worked perfectly.

@gorhom Are you still maintaining this package?

[AlirezaHadjar]

@isaachinman you can use sharedElementTransition from reanimated.