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!
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.
selectedIndexis 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 theselectedIndexin 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!