Zeplin React Native Extension
Generates React Native JavaScript snippets from colors, text styles and layers. ⚛️📱
Output
Sample colors output:
const colors = {
RED: "#ff0000",
GREEN: "#00ff00",
BLUE: "#0000ff",
YELLOW: "#ffff00",
BLACK: "#000000",
BLACK_50: "rgba(0, 0, 0, 0.5)",
WHITE: "#ffffff"
};Sample text style output:
const textStyles = StyleSheet.create({
SAMPLE_TEXT_STYLE: {
fontFamily: "SFProText",
fontSize: 20,
fontWeight: "normal",
fontStyle: "normal",
letterSpacing: 0,
textAlign: "left"
},
SAMPLE_TEXT_STYLE_WITH_COLOR: {
fontFamily: "SFProText",
fontSize: 20,
fontWeight: "normal",
fontStyle: "normal",
letterSpacing: 0,
textAlign: "left",
color: colors.RED
}
});Sample layer output:
const layerWithShadow = {
width: 100,
height: 100,
shadowColor: colors.black50,
shadowOffset: {
width: 0,
height: 2
},
shadowRadius: 4,
shadowOpacity: 1
};Options
Color format
Supports HEX, RGB or HSL. Sample colors output as HSL:
const colors = {
RED: "hsl(0, 100%, 50%)",
BLACK_50: "hsla(0, 0%, 0%, 0.5)"
};Token name format
Formats the name of colors and text styles. Supports constant case, snake case, camel case, pascal case or no format. Sample colors output as no format:
const colors = {
red: "#ff0000",
"black 50": "rgba(0, 0, 0, 0.5)",
};Dimensions
Toggles generating width and height properties from layers.
Default values
Toggles always generating default values from layers or text styles, such as fontWeight and fontStyle.
Development
React Native extension is developed using zem, Zeplin Extension Manager. zem is a command line tool that lets you quickly create and test extensions.
To learn more about zem, see documentation.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent