[Popover] Using flex on the anchor element

[isimisi]

💬 Question

Hi, I'm trying to style 2 popovers next to each other where I want the anchor elements (buttons) to take up x-amount of space using flex. However using flex on the anchor elements does not seem to do anything, am I doing something wrong?

Code

import { Popover, Text, useTheme } from '@ui-kitten/components';
import React from 'react';
import {
   Pressable,
   PressableProps,
   StyleProp,
   StyleSheet,
   View,
   ViewStyle,
} from 'react-native';

interface ButtonProps extends Omit<PressableProps, 'children'> {
   children: string;
}

export const CustomButton = React.forwardRef<View, ButtonProps>(
   ({ children, style, ...rest }, ref) => {
      const theme = useTheme();

      return (
         <Pressable
            ref={ref}
            {...rest}
            style={(state) => [
               {
                  backgroundColor: state.pressed
                     ? theme['color-basic-200']
                     : 'transparent',
               },
               styles.button,
               typeof style === 'function' ? style(state) : style,
            ]}>
            <Text style={[{ color: theme['color-primary-500'] }]}>
               {children}
            </Text>
         </Pressable>
      );
   }
);

interface PopoverProps {
   buttonStyles?: StyleProp<ViewStyle>;
}

function MyPopover({ buttonStyles }: PopoverProps) {
   const [isVisible, setIsVisible] = React.useState(false);
   const handleShowPopper = () => setIsVisible(true);
   const handleBackdropPress = () => {
      setIsVisible(false);
   };
   const renderToggleButton = () => (
      <CustomButton onPress={handleShowPopper} style={buttonStyles}>
         Press me!
      </CustomButton>
   );

   return (
      <Popover
         anchor={renderToggleButton}
         style={styles.popover}
         onBackdropPress={handleBackdropPress}
         visible={isVisible}>
         <View style={styles.popoverContext}>
            <Text>Showing Popover</Text>
         </View>
      </Popover>
   );
}

export default function MyComponent() {
   return (
      <View style={styles.container}>
         <MyPopover buttonStyles={styles.popover1} />
         <MyPopover buttonStyles={styles.popover2} />
      </View>
   );
}

const styles = StyleSheet.create({
   button: {
      padding: 10,
      alignItems: 'center',
      borderRadius: 4,
   },
   popoverContext: {},
   popover: {
      borderRadius: 10,
   },
   container: {
      flexDirection: 'row',
      flex: 1,
      gap: 5,
      borderColor: 'blue',
      borderWidth: 1,
      width: '100%',
   },
   popover1: {
      flex: 3,
   },
   popover2: {
      flex: 1,
   },
});

Screenshots

The same but without using popover - just adding the customButton with flex 3 and 1 respectively

UI Kitten and Eva version

Package	Version
@eva-design/eva	^2.2.0
@ui-kitten/components	^5.3.1