You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

shimStyles.native.js 1.3KB

1234567891011121314151617181920212223242526272829303132333435363738
  1. /**
  2. * The list of the well-known style properties which may not be numbers on Web
  3. * but must be numbers on React Native.
  4. */
  5. const WELL_KNOWN_NUMBER_PROPERTIES = [ 'height', 'width' ];
  6. /**
  7. * Shim style properties to work correctly on native.
  8. *
  9. * Using this shimStyles method allows us to minimize the number of style
  10. * declarations that need to be set or overridden for specific platforms.
  11. *
  12. * @param {Object} styles - A dictionary of named style definitions.
  13. * @returns {Object}
  14. */
  15. export function shimStyles(styles) {
  16. // Certain style properties may not be numbers on Web but must be numbers on
  17. // React Native. For example, height and width may be expressed in percent
  18. // on Web but React Native will not understand them and we will get errors
  19. // (at least during development). Convert such well-known properties to
  20. // numbers if possible; otherwise, remove them to avoid runtime errors.
  21. for (const k of WELL_KNOWN_NUMBER_PROPERTIES) {
  22. const v = styles[k];
  23. const typeofV = typeof v;
  24. if (typeofV !== 'undefined' && typeofV !== 'number') {
  25. const numberV = Number(v);
  26. if (Number.isNaN(numberV)) {
  27. delete styles[k];
  28. } else {
  29. styles[k] = numberV;
  30. }
  31. }
  32. }
  33. return styles;
  34. }