Unable To Set Custom Touchable Styles

[branaust]

I've added a border radius to my Menu. I can't however override the touchable styles to match the border radius of the menu. As you can see in the video provided, the opacity on the touchable is overflowing the menu itself and provides a poor UI.

Screen.Recording.2022-12-22.at.12.04.55.PM.mov

import React, { useCallback, useMemo, useState } from 'react';
import { Menu, MenuOptions, MenuOption, MenuTrigger } from 'react-native-popup-menu';
import Button from '../Button';
import { useTheme } from 'styled-components/native';
import Typography, { TypographyColorProps } from '../Typography';
import styled from 'styled-components/native';
import InfoSvg from '../../assets/svg/InfoSvg';
import { borderRadius } from 'styled-system';
import { Pressable } from 'react-native';

const SetTypeMenu = ({ defaultSetType, backgroundColor }) => {
  const [setType, setSetType] = useState(defaultSetType);
  const theme = useTheme();

  const setTypeLabel = useMemo((): { color: TypographyColorProps; label: string } => {
    switch (setType) {
      case 'warmup':
        return { color: theme.colors.yellow, label: 'W' };
      case 'dropset':
        return { color: theme.colors.purple, label: 'D' };
      case 'failure':
        return { color: theme.colors.error, label: 'F' };
      case 'working':
        return { color: theme.colors.raisinBlack, label: '1' };
    }
  }, [setType]);

  const updateSetType = useCallback((type) => {
    setSetType(type);
  }, []);

  return (
    <Menu onSelect={(val) => updateSetType(val)}>
      <MenuTrigger
        text={setTypeLabel.label}
        customStyles={{
          triggerWrapper: {
            backgroundColor: backgroundColor,
            width: 35,
            height: 25,
            borderRadius: 8,
            alignItems: 'center',
            justifyContent: 'center',
          },
          triggerText: {
            fontWeight: '800',
            fontSize: 16,
            color: setTypeLabel.color,
          },
          triggerTouchable: {
            underlayColor: 'none',
            activeOpacity: 0.7,
            style: {
              flex: 1,
            },
          },
          triggerOuterWrapper: {
            backgroundColor: 'none',
          },
        }}
      />
      <MenuOptions
        optionsContainerStyle={{
          borderRadius: 12,
          backgroundColor: theme.colors.backgroundOpacity1,
          top: 20,
          shadowRadius: 50,
          elevation: 0,
          shadowOffset: { width: 0, height: 0 },
        }}>
        <MenuOption value="warmup">
          <MenuOptionWrap>
            <RightWrap>
              <Typography
                bold
                color="yellow"
                textStyle={{ paddingRight: 12, width: 30 }}
                variant="body">
                W
              </Typography>
              <Typography
                color="raisinBlackToWhite"
                textStyle={{ fontWeight: '500' }}
                variant="body">
                Warm-up
              </Typography>
            </RightWrap>
            <Button
              icon={<InfoSvg color={theme.colors.primary} />}
              onPress={() => {}}
              variant="transparent"
            />
          </MenuOptionWrap>
        </MenuOption>
        <Divider />
        <MenuOption value="dropset">
          <MenuOptionWrap>
            <RightWrap>
              <Typography
                bold
                color="purple"
                textStyle={{ paddingRight: 12, width: 30 }}
                variant="body">
                D
              </Typography>
              <Typography
                color="raisinBlackToWhite"
                textStyle={{ fontWeight: '500' }}
                variant="body">
                Dropset
              </Typography>
            </RightWrap>
            <Button
              icon={<InfoSvg color={theme.colors.primary} />}
              onPress={() => {}}
              variant="transparent"
            />
          </MenuOptionWrap>
        </MenuOption>
        <Divider />
        <MenuOption value="failure">
          <MenuOptionWrap>
            <RightWrap>
              <Typography
                bold
                color="error"
                textStyle={{ paddingRight: 12, width: 30 }}
                variant="body">
                F
              </Typography>
              <Typography
                color="raisinBlackToWhite"
                textStyle={{ fontWeight: '500' }}
                variant="body">
                Failure
              </Typography>
            </RightWrap>
            <Button
              icon={<InfoSvg color={theme.colors.primary} />}
              onPress={() => {}}
              variant="transparent"
            />
          </MenuOptionWrap>
        </MenuOption>
      </MenuOptions>
    </Menu>
  );
};

const MenuOptionWrap = styled.View`
  flex-direction: row;
  padding-vertical: 6px;
  padding-horizontal: 10px;
  align-items: center;
  justify-content: space-between;
`;

const RightWrap = styled.View`
  flex-direction: row;
`;

const Divider = styled.View`
  background-color: ${({ theme }) => theme.colors.light3};
  width: 100%;
  height: 0.4px;
`;

export default SetTypeMenu;

[vp-donutsocial]

The same issue here

[sodik82]

have you checked https://github.com/instea/react-native-popup-menu/blob/master/examples/StylingExample.js ?