React Native UI-Kitten Overflow Menu inside Top Navigation renders on left first before rendering to Right.

[lavanyadavis]

💬 Question

I have created a react native project with a Top Navigation Bar, top Navigation consists of Title and right menu (accessoryRight). I have used Overflow Menu and Menu Item to get the menu working.

Issue: The menu renders to the left momentarily before adjusting the rendering to the right. I have upgraded my project from UI Kitten version 4 to 5 when the issue started to happen.

UI Kitten and Eva version

Package	Version
@eva-design/eva	2.2.0
@ui-kitten/components	5.3.1
@ui-kitten/components	5.3.1
@ui-kitten/eva-icons	5.3.1
@ui-kitten/metro-config	5.3.1

` import React from 'react'; import { View } from 'react-native'; import {Icon, IconElement, MenuItem, OverflowMenu, Text, TopNavigation, TopNavigationAction} from '@ui-kitten/components';

const MenuIcon = (props): IconElement => ( <Icon {...props} name='more-vertical' /> );

const InfoIcon = (props): IconElement => ( <Icon {...props} name='info' /> );

const LogoutIcon = (props): IconElement => ( <Icon {...props} name='log-out' /> );

export const HomeScreen = (): React.ReactElement => { const [menuVisible, setMenuVisible] = React.useState(false); const toggleMenu = (): void => { setMenuVisible(!menuVisible); };

const renderMenuAction = (): React.ReactElement => ( <TopNavigationAction icon={MenuIcon} onPress={toggleMenu}/> );

const renderOverflowMenuAction = (): React.ReactElement => ( <OverflowMenu anchor={renderMenuAction} visible={menuVisible} onBackdropPress={toggleMenu} > <MenuItem accessoryLeft={InfoIcon} title='About'/> <MenuItem accessoryLeft={LogoutIcon} title='Logout'/> </OverflowMenu> );

const renderTitle = (props): React.ReactElement => ( <View > <Text {...props}> Test Application </Text> </View> );

return ( <TopNavigation title={renderTitle} accessoryRight={renderOverflowMenuAction} /> ); }; `

I have attached the video as well for reference

RightMenu.webm Any advise on how to stop the temporary rending to left would really be helpful.

Environment -- @babel/[email protected] +-- @babel/[email protected] +-- @eva-design/[email protected] +-- @react-native-community/[email protected] +-- @ui-kitten/[email protected] +-- @ui-kitten/[email protected] +-- @ui-kitten/[email protected] +-- [email protected] +-- [email protected] +-- [email protected] +-- [email protected] +-- [email protected] +-- [email protected] +-- [email protected] +-- [email protected]

Testing in Android 11 and 8

[sergeushenecz]

I have another an issue. If on mobile changed orientation to landscape mode, then all select, overflow menu broken. When I click open select my phone changed orientation to portrait

[Hannes-Endare]

I'm also experiencing the same behaviour.

[sergeushenecz]

I created the issue long time ago but didn't answer me

[macdonaldr93]

Same issue for me

[tohsaka888]

Same issue for me

[acoulon99]

I'm also running into the same issue. 🤔

[acoulon99]

I think I was able to workaround the issue. I noticed that the contentPosition within the popover's initial state was set to Point.zero() which corresponds to the top left corner of the screen where the render flicker occurs. After setting the contentPosition's initial state to Point.outscreen(), the render flicker was resolved.

I wonder if contentPosition was initialized incorrectly within this commit since previously it was set to Point.outscreen()

[KasemOmary]

Same issue for me too.

I think I was able to workaround the issue. I noticed that the contentPosition within the popover's initial state was set to Point.zero() which corresponds to the top left corner of the screen where the render flicker occurs. After setting the contentPosition's initial state to Point.outscreen(), the render flicker was resolved.

On checking this out myself, the Point.outscreen() cleans the rendering up a ton for me as well. I have a fork set up where I've tried this out on my own WIP. The fork https://github.com/KasemOmary/react-native-ui-kitten/blob/419898b3130a18570acebd195f920ae4d2d834a4/src/components/ui/popover/popover.component.tsx#L118 - is strongly preferred.