Security News
Cloudflare Adds Security.txt Setup Wizard
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
css-to-react-native
Advanced tools
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.
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);');
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 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.
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'],
// Fixes backwards transform order
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.
border{Top,Right,Bottom,Left}
shorthands are not supported, because borderStyle
cannot be applied to individual border sides.
The API is mostly for implementors. However, the main API may be useful for non-implementors. The main API is an array of [property, value]
tuples.
import transform from 'css-to-react-native';
// or const transform = require('css-to-react-native').default;
transform([
['font', 'bold 14px/16px "Helvetica"'],
['margin', '5px 7px 2px'],
['border-left-width', '5px'],
]); // => { fontFamily: 'Helvetica', ... }
We don't provide a way to get these style tuples in this library, so you'll need to do that yourself. I expect most people will use postCSS or another CSS parser. You should try avoid getting these with string.split
, as that has a lot of edge cases (colons and semi-colons apearing in comments etc.)
For implementors, there is also a few extra APIs available.
These are for specific use-cases, and most people should just be using the API above.
import { getPropertyName, getStylesForProperty } from 'css-to-react-native';
getPropertyName('border-width'); // => 'borderWidth'
getStylesForProperty('borderWidth', '1px 0px 2px 0px'); // => { borderTopWidth: 1, ... }
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']);
// { borderRadius: 50 } rather than { borderTopLeft: ... }
This can also be done by passing a third argument, false
to getStylesForProperty
.
Licensed under the MIT License, Copyright © 2019 Krister Kari, Jacob Parker, and Maximilian Stoiber.
See LICENSE.md for more information.
FAQs
Convert CSS text to a React Native stylesheet object
The npm package css-to-react-native receives a total of 4,604,727 weekly downloads. As such, css-to-react-native popularity was classified as popular.
We found that css-to-react-native demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.