-
Notifications
You must be signed in to change notification settings - Fork 953
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
React Native UI-Kitten Overflow Menu inside Top Navigation renders on left first before rendering to Right. #1794
Comments
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 |
I'm also experiencing the same behaviour. |
I created the issue long time ago but didn't answer me |
Same issue for me |
1 similar comment
Same issue for me |
I'm also running into the same issue. 🤔 |
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() |
Same issue for me too.
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. |
💬 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
`
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 => (
);
const renderOverflowMenuAction = (): React.ReactElement => (
);
const renderTitle = (props): React.ReactElement => (
<Text {...props}>
Test Application
);
return (
);
};
`
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/core@7.23.3
+-- @babel/runtime@7.23.4
+-- @eva-design/eva@2.2.0
+-- @react-native-community/eslint-config@2.0.0
+-- @ui-kitten/components@5.3.1
+-- @ui-kitten/eva-icons@5.3.1
+-- @ui-kitten/metro-config@5.3.1
+-- babel-jest@26.6.3
+-- eslint@7.32.0
+-- jest@26.6.3
+-- metro-react-native-babel-preset@0.72.3
+-- react-native-svg@12.5.1
+-- react-native@0.70.6
+-- react-test-renderer@18.1.0
+-- react@18.1.0
Testing in Android 11 and 8
The text was updated successfully, but these errors were encountered: