Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
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: 18;
line-height: 24;
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: 10 5;
font-variant: small-caps;
transform: translate(10, 5) 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 14/16 "Helvetica";
margin: 5 7 2;
{
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
border{Top,Right,Bottom,Left}
shorthands are not supported, because borderStyle
cannot be applied to individual border sides.
flex
does not support putting flexBasis
before flexGrow
. The supported syntax is flex: <flex-grow> <flex-shrink> <flex-basis>
.
The API is mostly for implementors. However, the main API may be useful for non-impmentors. The main API is,
import transform from 'css-to-react-native';
// or const transform = require('css-to-react-native').default;
transform([
['font', 'bold 14/16 "Helvetica"'],
['margin', '5 7 2'],
['border-left-width', '5'],
]); // => { fontFamily: 'Helvetica', ... }
For implementors, there is also,
import { getPropertyName, getStylesForProperty } from 'css-to-react-native';
getPropertyName('border-width'); // => 'borderWidth'
getStylesForProperty('borderWidth', '1 0 2 0'); // => { borderTopWidth: 1, ... }
Licensed under the MIT License, Copyright © 2016 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,602,058 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.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.