react-nativereact-native-stylesheet

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


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)

enter image description here


Solution

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