How to use css-to-react-native - 10 common examples

// If a custom mapping is provided for the tag, use it
    // Otherwise use the one from default mapping
    customMappings && node.type in customMappings
      ? customMappings[node.type]
      : mappings[node.type];

  if (typeof Comp !== "function") {
    // Don't render a tag if it doesn't have a mapping
    return null;
  }

  let style;

  try {
    style = node.attrs.style
      ? css(
          // Generate a 2D array from the inline style string
          node.attrs.style
            // Split lines to 'property: value' pair and filter empty values
            .split(";")
            .filter(Boolean)
            // Split 'property: value' pair to an array
            .map(r => r.split(":").map(it => it.trim()))
        )
      : undefined;
  } catch (error) {
    // eslint-disable-next-line no-console
    console.warn(error);
  }

  // Extract the class names from the class attribute
  const classList = node.attrs.class

if (!generated[hash]) {
        const root = parse(flatCSS)
        const declPairs = []
        root.each(node => {
          if (node.type === 'decl') {
            declPairs.push([node.prop, node.value])
          } else if (node.type !== 'comment') {
            /* eslint-disable no-console */
            console.warn(`Node of type ${node.type} not supported as an inline style`)
          }
        })
        // RN currently does not support differing values for the corner radii of Image
        // components (but does for View). It is almost impossible to tell whether we'll have
        // support, so we'll just disable multiple values here.
        // https://github.com/styled-components/css-to-react-native/issues/11
        const styleObject = transformDeclPairs(declPairs, [
          'borderRadius',
          'borderWidth',
          'borderColor',
          'borderStyle',
        ])
        const styles = styleSheet.create({
          generated: styleObject,
        })
        generated[hash] = styles.generated
      }
      return generated[hash]
    }
  }

if (!generated[hash]) {
        const root = parse(flatCSS);
        const declPairs = [];
        root.each(node => {
          if (node.type === 'decl') {
            declPairs.push([node.prop, node.value]);
          } else if (process.env.NODE_ENV !== 'production' && node.type !== 'comment') {
            /* eslint-disable no-console */
            console.warn(`Node of type ${node.type} not supported as an inline style`);
          }
        });
        // RN currently does not support differing values for the corner radii of Image
        // components (but does for View). It is almost impossible to tell whether we'll have
        // support, so we'll just disable multiple values here.
        // https://github.com/styled-components/css-to-react-native/issues/11
        const styleObject = transformDeclPairs(declPairs, [
          'borderRadius',
          'borderWidth',
          'borderColor',
          'borderStyle',
        ]);
        const styles = styleSheet.create({
          generated: styleObject,
        });
        generated[hash] = styles.generated;
      }
      return generated[hash];
    }
  }

!isLengthUnit &&
      !isViewportUnit &&
      !isPercent &&
      !isUnsupportedUnit
    ) {
      throw new Error(`Failed to parse declaration "${property}: ${value}"`);
    }

    if (!result.__viewportUnits && isViewportUnit) {
      result.__viewportUnits = true;
    }

    if (shorthandBorderProps.indexOf(property) > -1) {
      // transform single value shorthand border properties back to
      // shorthand form to support styling `Image`.
      const transformed = transformCSS([[property, value]]);
      const vals = values(transformed);
      if (allEqual(vals)) {
        const replacement = {};
        replacement[camelCase(property)] = vals[0];
        Object.assign(styles, replacement);
      } else {
        Object.assign(styles, transformed);
      }
    } else {
      Object.assign(styles, transformCSS([[property, value]]));
    }
  }
};

export function convertToRNStyles(styles) {
  if (styles[0][0] !== undefined) {
    let arr = []

    arr.push(styles[0][0])
    let len = styles.length
    let i = 1
    for (; i < len; i++) {
      arr.push(styles[i], styles[0][i])
    }

    let css = createStyles.apply(this, arr)
    let parsedCSS = convertStyles(css)

    // Convert css styles to react native
    let rnStyles = Array.isArray(parsedCSS) ? transform(parsedCSS) : {}
    return [StyleSheet.create({ style: rnStyles }).style]
  }

  return styles.map(style => {
    if (typeof style === 'object' && Object.keys(style).length > 0) {
      return StyleSheet.create({ style }).style
    }
    return style
  })
}

}

    if (shorthandBorderProps.indexOf(property) > -1) {
      // transform single value shorthand border properties back to
      // shorthand form to support styling `Image`.
      const transformed = transformCSS([[property, value]]);
      const vals = values(transformed);
      if (allEqual(vals)) {
        const replacement = {};
        replacement[camelCase(property)] = vals[0];
        Object.assign(styles, replacement);
      } else {
        Object.assign(styles, transformed);
      }
    } else {
      Object.assign(styles, transformCSS([[property, value]]));
    }
  }
};

function convertStyles(str: string) {
  if (str.trim() === '') return

  const stylePairs = []

  const parsedString = str.split(';')

  parsedString.forEach(convertPropertyValue, stylePairs)

  return transform(stylePairs)
}

shorthandParts.forEach(part => {
    if (!(set & TIMING_FUNCTION) && easingRegExp.test(part)) {
      accum.timingFunction = part as any;
      set &= TIMING_FUNCTION;
    } else if (!(set & DURATION) && durationRegExp.test(part)) {
      accum.duration = getDurationInMs(part);
      set &= DURATION;
    } else if (!(set & DELAY) && durationRegExp.test(part)) {
      accum.delay = getDurationInMs(part);
      set &= DELAY;
    } else if (!(set & PROPERTY)) {
      accum.property = getPropertyName(part);
      set &= PROPERTY;
    } else {
      throw new Error("Failed to parse shorthand");
    }
  });

const getInterpolationType = (
  substitutionMap: SubstitutionMap,
  [prop, value]: StyleTuple
) => {
  if (!containsSubstitution(substitutionMap, value)) {
    return InterpolationType.NoOrSimple;
  } else if (getPropertyName(prop) in unitTypes && !calcRe.test(value)) {
    return InterpolationType.NoOrSimple;
  }
  return InterpolationType.Template;
};

([prop, value]): ViewportMode => {
        if (!viewportUnitRegExp.test(value)) {
          return ViewportMode.None;
        } else if (
          unitTypes[getPropertyName(prop)] === UnitType.Length &&
          !calcRe.test(value)
        ) {
          return ViewportMode.SimpleLengthUnits;
        } else {
          return ViewportMode.ComplexUnits;
        }
      }
    )