Fix account menu on android

front/packages/primitives/src/avatar.tsx

@@ -18,14 +18,14 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { TextStyle, View } from "react-native";
+import { View, ViewStyle } from "react-native";
 import { Image } from "./image";
 import { useYoshiki, px, Stylable } from "yoshiki/native";
 import { Icon } from "./icons";
 import AccountCircle from "@material-symbols/svg-400/rounded/account_circle-fill.svg";
 import { YoshikiStyle } from "yoshiki/dist/type";
 import { P } from "@expo/html-elements";
-import { forwardRef } from "react";
+import { ComponentType, forwardRef, RefAttributes } from "react";
 import { ts } from "./utils";
 
 const stringToColor = (string: string) => {
@@ -54,23 +54,24 @@ export const Avatar = forwardRef<
 		color?: string;
 		isLoading?: boolean;
 		fill?: boolean;
+		as?: ComponentType<{ style?: ViewStyle } & RefAttributes<View>>;
 	} & Stylable
 >(function _Avatar(
-	{ src, alt, size = px(24), color, placeholder, isLoading = false, fill = false, ...props },
+	{ src, alt, size = px(24), color, placeholder, isLoading = false, fill = false, as, ...props },
 	ref,
 ) {
 	const { css, theme } = useYoshiki();
 	const col = color ?? theme.overlay0;
 
 	// TODO: Support dark themes when fill === true
+	const Container = as ?? View;
 	return (
-		<View
+		<Container
 			ref={ref}
 			{...css(
 				[
 					{
 						borderRadius: 999999,
-						overflow: "hidden",
 						p: ts(1),
 					},
 					fill && {
@@ -102,6 +103,6 @@ export const Avatar = forwardRef<
 			) : (
 				<Icon icon={AccountCircle} size={size} color={fill ? col : theme.colors.white} />
 			)}
-		</View>
+		</Container>
 	);
 });

front/packages/primitives/src/menu.tsx

@@ -50,14 +50,14 @@ const Menu = <AsProps,>({
 	const [isOpen, setOpen] = useState(false);
 
 	useEffect(() => {
+		console.log("Opnned changed", isOpen);
 		if (isOpen) onMenuOpen?.call(null);
 		else onMenuClose?.call(null);
 	}, [isOpen, onMenuClose, onMenuOpen]);
 
 	return (
 		<>
-			{/* @ts-ignore */}
-			<Trigger onPress={() => setOpen(true)} {...props} />
+			<Trigger onPress={() => setOpen(true)} {...props as any} />
 			{isOpen && (
 				<Portal>
 					<ContrastArea mode="user">

front/packages/ui/src/navbar/index.tsx

@@ -29,6 +29,7 @@ import {
 	tooltip,
 	ts,
 	Menu,
+	PressableFeedback,
 } from "@kyoo/primitives";
 import { Platform, TextInput, View, ViewProps } from "react-native";
 import { useTranslation } from "react-i18next";
@@ -98,6 +99,7 @@ export const NavbarProfile = () => {
 			{({ isError: isGuest, username }) => (
 				<Menu
 					Trigger={Avatar}
+					as={PressableFeedback}
 					placeholder={username}
 					alt={t("navbar.login")}
 					size={24}