Error cannot read property 'match' of undefined when using NeomorphFlex

Question

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)

Answer 1

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>
      
  );
}