How to use the react-sketchapp.StyleSheet.create function in react-sketchapp
To help you get started, we’ve selected a few react-sketchapp examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
airbnb / react-sketchapp / examples / profile-cards-graphql / src / components / Profile.js View on Github 
/* eslint-disable react/prop-types */
import * as React from 'react';
import { Image, View, Text, StyleSheet } from 'react-sketchapp';
import { colors, fonts, spacing } from '../designSystem';
const styles = StyleSheet.create({
container: {
backgroundColor: colors.Haus,
padding: 20,
width: 260,
},
avatar: {
height: 220,
resizeMode: 'contain',
marginBottom: 20,
borderRadius: 10,
},
title: fonts['Title 2'],
subtitle: fonts['Title 3'],
body: fonts.Body,
});/* eslint-disable react/prop-types */
import * as React from 'react';
import { Image, View, Text, StyleSheet } from 'react-sketchapp';
import { colors, fonts, spacing } from '../designSystem';
const styles = StyleSheet.create({
container: {
backgroundColor: colors.Haus,
padding: 20,
width: 260,
},
avatar: {
height: 220,
resizeMode: 'contain',
marginBottom: 20,
borderRadius: 10,
},
title: fonts['Title 2'],
subtitle: fonts['Title 3'],
body: fonts.Body,
});import React from 'react';
import { render, View, Text, StyleSheet } from 'react-sketchapp';
const styles = StyleSheet.create({
app: {
flexDirection: 'row',
},
screen: {
margin: 20,
},
screenText: {
marginBottom: 10,
fontSize: 28,
fontFamily: 'Courier-Bold'
},
component: {
padding: 30,
height: '100%',
flexDirection: 'column',
justifyContent: 'center',import * as React from 'react';
import * as PropTypes from 'prop-types';
import { render, Artboard, Text, View, StyleSheet } from 'react-sketchapp';
const API_ENDPOINT_URL =
'https://api.airtable.com/v0/appFs7J3WdgHYCDxD/Features?api_key=keyu4dudakWLI0vAh&&sort%5B0%5D%5Bfield%5D=Target+Launch+Date&sort%5B0%5D%5Bdirection%5D=asc';
const styles = StyleSheet.create({
artboard: {
backgroundColor: '#F9FDFF',
},
verticalLine: {
width: 3,
},
dot: {
width: 24,
height: 24,
borderRadius: 12,
borderWidth: 2,
borderColor: '#46D2B3',
},
dotCompleted: {
backgroundColor: '#46D2B3',
},import * as React from 'react';
import * as PropTypes from 'prop-types';
import { render, StyleSheet, View } from 'react-sketchapp';
import chroma from 'chroma-js';
import { times } from 'ramda';
const styles = StyleSheet.create({
container: {
width: 480,
height: 480,
flexDirection: 'row',
flexWrap: 'wrap',
alignItems: 'center',
},
});
const Document = ({ colors, steps }) => {
const color = chroma.scale(colors);
return (import { StyleSheet } from 'react-sketchapp';
const styles = StyleSheet.create({
container: {
flexDirection: 'column',
flex: 1,
justifyContent: 'center',
alignItems: 'center',
width: 375,
height: 667,
backgroundColor: '#fefefe',
borderWidth: 2,
borderRadius: 4,
overflowY: 'scroll',
},
text: {
fontFamily: 'Helvetica',
fontSize: 24,
lineHeight: 24,import React, { PropTypes } from 'react';
import { render, StyleSheet, Text, View } from 'react-sketchapp';
const styles = StyleSheet.create({
container: {
width: 640,
height: 480,
backgroundColor: '#fefefe',
justifyContent: 'center',
borderWidth: 2,
borderColor: '#dfba69',
borderRadius: 4,
},
text: {
fontFamily: 'Helvetica',
fontSize: 24,
lineHeight: 24,
color: '#dfba69',
textAlign: 'center',
},
