How to use react-sketchapp - 10 common examples

export default function Plugin(context) {
  const json = test;// HACK load test page while testing - requestJson();
  const document = context.document;
  const page = document.currentPage();

  removeExistingLayers(page);

  const newPage = json.pages[0];

  const result = newPage.items.map(layer => renderLayer(layer));

  render(
    {result},
    page
  );
}

/* 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,
});

const pathSeparation = '/'

    // Add the theme name and theme ID at the start of the symbol name
    // e.g ProjectName/Dark/Color/Text/Primary
    let pathArray = [THEME_NAME, themeID, ...path]

    // UpperCase the first letter in each path string
    if (withCapitalize) pathArray = pathArray.map(e => e.replace(/\b\w/g, firstLetter => firstLetter.toUpperCase()))

    // Create the symbol name
    const pathString = pathArray.join().replace(/[,]/g, pathSeparation)

    // If the symbol equals the active theme, create a symbol and remove the theme specific path section
    if (themeID === ACTIVE_THEME) {
        makeSymbol(
            component,
            pathString
                .replace(
                    `${themeID.replace(/\b\w/g, firstLetter => firstLetter.toUpperCase())}${pathSeparation}`
                    , ''
                )
        )
    }

    return component
}

const ReactPrimitives = require('../ReactPrimitives');
const Animated = require('animated');
const Easing = require('animated/lib/Easing');
const {
  View,
  Text,
  Image,
  StyleSheet,
  // TODO(lmr): Dimensions
} = require('react-sketchapp');

Animated.inject.FlattenStyle(StyleSheet.flatten);

ReactPrimitives.inject({
  StyleSheet,
  View,
  Text,
  Image,
  Easing,
  Animated: {
    ...Animated,
    View: Animated.createAnimatedComponent(View),
    Text: Animated.createAnimatedComponent(Text),
    Image: Animated.createAnimatedComponent(Image),
  },
  Platform: {
    OS: 'sketch',
    Version: 1,

export default (context) => render( , context.document.currentPage())

export default (context) => {
    render(
        , 
        context.document.currentPage()
    )
}

export default () => {
  render(, context.document.currentPage());
};

export default (context) => {
  render(, context.document.currentPage());
};

url: 'cargocollective.com/jackiesaik',
      profile_image_url:
        'https://pbs.twimg.com/profile_images/895665264464764930/7Mb3QtEB_400x400.jpg',
    },
    {
      screen_name: 'jongold',
      name: 'kerning man',
      description:
        'an equal command of technology and form • functional programming (oc)cultist • design tools @airbnbdesign',
      location: 'California',
      url: 'weirdwideweb.jon.gold',
      profile_image_url: 'https://pbs.twimg.com/profile_images/833785170285178881/loBb32g3.jpg',
    },
  ];

  render(, context.document.currentPage());
};