units used within TemplateLiteral strings are throwing error

[gbhasha]

I have below settings:

module.exports = {
  extends: ['stylelint-config-react-native-styled-components'],
  customSyntax: 'postcss-styled-syntax',

  defaultSeverity: 'warning',
  rules: {
    'react-native/css-property-no-unknown': [ON, { ignoreProperties: ['white-space', 'flexGrow'] }],
  },
};

Error are thrown when we use the units within a template literal. Below code snippets are throwing following error.

 this unit is not supported when using styled-components with React Native  unit-allowed-list

Code RN styled component snippets

export const IconWrapper = styled.View`
  margin-left: ${({ iconOnRight }) => `${iconOnRight ? DEFAULT_ICON_SPACING : 0}px`};
`;

export const BoxWrapper = styled.View`
  flex: 0 1 ${({ n }) => `${100 / n - 2}%`};
`;

export const HelpContent = styled.View`
  margin-bottom: ${Platform.select({
    android: '0px',
    ios: `${Dimensions.get('screen').height * 0.015}px`,
  })};
`;

export const CardWrapper = styled.View`
  padding-top: ${props => `${props.os === 'android' ? 13 : 16}px`};
`;

[gbhasha]

When we use postcss-styled-components as a customSyntax, the above errors are gone.