Hide/Show all Tab headers in Platform

In our Platform app the user has the ability to toggle whether the tab headers are hidden or are shown. The tab headers represent the views you have in your platform.

The only caveat with hiding or showing the tab headers is as this is a layout option that will remove ALL tab headers or add ALL tab headers. 

If you would like to display your tab headers you have to make sure your layout includes this code layout.settings.hasHeaders: true  If you want to hide your tab headers, simply make sure your layout incfludes this: layout.settings.hasHeaders: false.

In order to achieve this feature, you will have to use the hasHeaders layout option as well as the Layout.replace() method to replace the platform layout that has already been applied. Your toggle will simply change the value of hasHeaders.

Our platform API example has a standard platform application where you can observe this toggle. In the snapshot object in the manifest you should be able to change hasHeaders to false. In the top right ribbon you can click on the layout lock button to show the headers and hide them. What's occurring in the code is the following:

toggleLockedLayout = async () => {
        const oldLayout = await fin.Platform.Layout.getCurrentSync().getConfig();
        const { settings, dimensions } = oldLayout;
        console.dir({ msg: "LayoutSettings object", settings}, {depth: null, colors: true});

        if(settings.hasHeaders && settings.reorderEnabled) {
            fin.Platform.Layout.getCurrentSync().replace({
                ...oldLayout,
                settings: {
                    ...settings,
                    hasHeaders: false,
                    reorderEnabled: false
                }
            });
        } else {
            fin.Platform.Layout.getCurrentSync().replace({
                ...oldLayout,
                settings: {
                    ...settings,
                    hasHeaders: true,
                    reorderEnabled: true
                },
                dimensions: {
                    ...dimensions,
                    headerHeight: 25
                }
            });
        }
    };

As you can see, the Layout.replace() function is simply toggling the hasHeaders key.