Highlighted Icon not changing

[nirmaldalmia]

I used the floating action bar to build a navigation component. When I navigate using the icons on the action bar, it works fine. But when I change the index programmatically, the screen changes but the highlighted icon on the action bar doesn't change.

const ActionBar = (props) => {
	const selectedIndex = props.inputStore.selectedNavigationIndex;
	console.log('Navigation index on render: ', selectedIndex);
	return (
		<FloatingActionBar
			items={items}
			offset={25}
			onPress={(index: number) =>
				props.inputStore.setSelectedNavigationIndex(index)
			}
			position="bottom"
			selectedIndex={selectedIndex}
		/>
	);
};

selectedIndex is a property that is stored in the MobX store. It is initialized to 0. The navbar has 4 screens, the first screen has a button which can be used to move from first screen to the third screen. On press of the button, I update the selectedIndex in the store. The screen changes but the highlighted icon on the navbar is still the 0th index. The console statement tells me that the index was updated. Any help will be much appreciated!

[skd1993]

I have the same problem, looks like the "icon" accepts a parameter called "active" which is not being updated unless clicked. But don't know how it can be accessed and changed dynamically.

Also, I am able to set "selectedIndex" greater than length of items object array, which reproduces the above mentioned behaviour.