Unable To Set Custom Touchable Styles
branaust opened this issue · 2 comments
branaust commented
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 commented
The same issue here
sodik82 commented