I need to use more than 1 style into NeomorthFlex (from react-native-neomorph-shadows) and I'm doing it like this:
const styleuse = [
globalStyles.buttonContained,
{
backgroundColor: useColor,
padding: usePadding,
width: fillContent ? undefined : "100%",
shadowRadius: 5
},
style,
] as ViewStyle
return (
<Pressable
onPress={disabled ? undefined : onPress}
{...props}
>
<NeomorphFlex
swapShadows // Troca as sombras internas e externas
style={styleuse}>
{prefixIcon ? (
<IconStyled
icon={prefixIcon}
color={props.prefixIconColor ? props.prefixIconColor : "primary"}
/>
) : null}
<View style={{ flexShrink: 1 }}>{children}</View>
{suffixIcon ? (
<IconStyled
icon={suffixIcon}
color={props.suffixIconColor ? props.suffixIconColor : "primary"}
/>
) : null}
</NeomorphFlex>
</Pressable>
);
I saw another problem similar to mine, but the person says it works by removing the [] from the styles, but in my case I can't do that, as I need to use the props style, the default Button style and the specific style. this is not possible without []. Can someone help me?
(link of another issue: https://github.com/tokkozhin/react-native-neomorph-shadows/issues/66)
It work creating a StyleSheet
and using ...
for combine styles
const styleSheet = StyleSheet.create({
button: {
...globalStyles.buttonContained,
...(style as object),
backgroundColor: useColor,
padding: usePadding,
width: fillContent ? undefined : "100%",
shadowRadius: 5,
}
})
return (
<Pressable
onPress={disabled ? undefined : onPress}
{...props}
>
<NeomorphFlex
swapShadows
style={styleSheet.button}>
{prefixIcon ? (
<IconStyled
icon={prefixIcon}
color={props.prefixIconColor ? props.prefixIconColor : "primary"}
/>
) : null}
{children}
{suffixIcon ? (
<IconStyled
icon={suffixIcon}
color={props.suffixIconColor ? props.suffixIconColor : "primary"}
/>
) : null}
</NeomorphFlex>
</Pressable>
);
}