Control Bottom Tab on Fullscreen

I want to hide/show the Bottom Tab (also the Nav btw), when a stream I have on the website goes fullscreen so Users can see the video correctly. I did some updates on my site, but I still can't see the changes on the App. I can see some console.logs on the website, so the event is firing and the function is running but is not working on GoNative. Please help! It would be really appreciated.

This is the code I added to my app:

// Event Listener
document.addEventListener( 'fullscreenchange', documentFullscreenchange );

// Event Handler Function
const documentFullscreenchange = () => {
	if ( document.fullscreenElement !== null ) {
		document.getElementById( 'masthead' ).style.display = 'none';
		Tabs.active = false;
	} else {
		document.getElementById( 'masthead' ).style.display = 'block';
		Tabs.active = true;
	}

	const json = JSON.stringify( Tabs );
	window.location.href = 'gonative://tabs/setTabs?tabs=' + encodeURIComponent( json );
};

// Tabs Object to mod behavior
const Tabs = {
	active: true,
	tabMenus: [
		{
			items: [
				{
					icon: 'fas fa-home',
					label: 'Home',
					url: 'https://winknews.com/',
					subLinks: [],
				},
				{
					label: 'Latest',
					icon: 'fas fa-newspaper',
					url: 'https://winknews.com/category/top-featured/',
					subLinks: [],
				},
				{
					label: 'Watch Now',
					icon: 'fas fa-video',
					url: 'https://winknews.com/watch-now/',
					subLinks: [],
				},
				{
					label: 'Weather',
					icon: 'fas fa-cloud-sun',
					url: 'https://winknews.com/weather/',
					subLinks: [],
				},
				{
					label: 'Traffic',
					icon: 'far fa-map',
					url: 'https://www.google.com/maps/@26.4297764,-81.7755644,10.66z/data=!5m1!1e1?hl=en',
					subLinks: [],
				},
			],
			id: '1',
		},
	],
	tabSelectionConfig: [
		{
			id: '1',
			regex: '.*',
			_id: '63f8b3c6211b941f8b7a41ae',
			label: 'Bottom Tab Bar Menu 1 - All pages',
		},
	],
};