What is css-to-react-native?
The css-to-react-native package allows developers to convert CSS text to a JavaScript object that matches the style format expected by React Native components. This is particularly useful for leveraging existing CSS code within React Native projects, enabling a more seamless integration of web styles into mobile development.
What are css-to-react-native's main functionalities?
Convert simple CSS strings
This feature allows the conversion of simple CSS strings into a format that can be directly used in React Native's style prop. The example demonstrates converting width and height properties from CSS to a React Native style object.
import { transform } from 'css-to-react-native';
const styles = transform('width: 100%; height: 100%;');
Support for shorthand properties
css-to-react-native can parse and split CSS shorthand properties into their respective longhand properties, making it easier to work with complex styling in React Native. The example shows how margin and padding shorthands are converted.
import { transform } from 'css-to-react-native';
const styles = transform('margin: 10px 20px; padding: 5px;');
Handling of custom properties
While React Native does not support CSS custom properties (variables) directly, css-to-react-native can process them when they are defined and used within the same CSS string. This feature is useful for maintaining consistency in color schemes or other values.
import { transform } from 'css-to-react-native';
const styles = transform('--custom-color: #333; color: var(--custom-color);');
Other packages similar to css-to-react-native
styled-components
styled-components is a library for React and React Native that allows developers to write traditional CSS in their JavaScript. It differs from css-to-react-native by enabling CSS to be part of component definitions, offering a more integrated styling experience with support for theming and dynamic styling.
react-native-extended-stylesheet
react-native-extended-stylesheet extends the basic stylesheet capabilities of React Native, adding features like themes, relative units, media queries, and more. While it offers more advanced styling options, it does not convert CSS strings directly but rather enhances the styling capabilities within React Native.
css-to-react-native
Converts CSS text to a React Native stylesheet object.
font-size: 18px;
line-height: 24px;
color: red;
{
fontSize: 18,
lineHeight: 24,
color: 'red',
}
Converts all number-like values to numbers, and string-like to strings.
Automatically converts indirect values to their React Native equivalents.
text-shadow-offset: 10px 5px;
font-variant: small-caps;
transform: translate(10px, 5px) scale(5);
{
textShadowOffset: { width: 10, height: 5 },
fontVariant: ['small-caps'],
transform: [
{ translateY: 10 },
{ translateX: 10 },
{ scale: 5 },
]
}
Also allows shorthand values.
font: bold 14px/16px "Helvetica";
margin: 5px 7px 2px;
{
fontFamily: 'Helvetica',
fontSize: 14,
fontWeight: 'bold',
fontStyle: 'normal',
fontVariant: [],
lineHeight: 16,
marginTop: 5,
marginRight: 7,
marginBottom: 2,
marginLeft: 7,
}
Shorthands will only accept values that are supported in React, so background
will only accept a colour, backgroundColor
There is also support for the box-shadow
shorthand, and this converts into shadow-
properties. Note that these only work on iOS.
Shorthand Notes
border{Top,Right,Bottom,Left}
shorthands are not supported, because borderStyle
cannot be applied to individual border sides.
API
The API is mostly for implementors. However, the main API may be useful for non-implementors. The main API is,
import transform from 'css-to-react-native';
transform([
['font', 'bold 14px/16px "Helvetica"'],
['margin', '5px 7px 2px'],
['border-left-width', '5px'],
]);
For implementors, there is also,
import { getPropertyName, getStylesForProperty } from 'css-to-react-native';
getPropertyName('border-width');
getStylesForProperty('borderWidth', '1px 0px 2px 0px');
Should you wish to opt-out of transforming certain shorthands, an array of property names in camelCase can be passed as a second argument to transform
.
transform([['border-radius', '50px']], ['borderRadius']);
This can also be done by passing a third argument, false
to getStylesForProperty
.
License
Licensed under the MIT License, Copyright © 2016 Jacob Parker and Maximilian Stoiber.
See LICENSE.md for more information.