Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Implementing react-native-svg compatible api

See original GitHub issue

react-sketchapp:

import sketch from 'sketch';
import { Svg, render } from 'react-sketchapp';

export default () => {
  render(
    <Svg xmlns="http://www.w3.org/2000/svg" width="494" height="447" viewBox="0 0 494 447">
      <Svg.G fill="none" fillRule="evenodd">
        <Svg.Path fill="#FFAE00" d="M247 447L0 160 107 15 247 0l140 15 107 145" />
        <Svg.Path fill="#EC6C00" d="M247 447L0 160h494" />
        <Svg.Path fill="#FFAE00" d="M247 447L100 160h294" />
        <Svg.Path fill="#FFEFB4" d="M247 0L100 160h294" />
        <Svg.Path fill="#FFAE00" d="M107 15L52 88 0 160h101M387 15l55 73 52 72H393" />
        <Svg.Path fill="#FED305" d="M107 15l-7 145L247 0m140 15l7 145L247 0" />
      </Svg.G>
    </Svg>,
    sketch.getSelectedDocument().selectedPage,
  );
};

Issue Analytics

State:
Created 4 years ago
Comments:8 (8 by maintainers)

Top GitHub Comments

1reaction

thierryccommented, Mar 22, 2021

This option work and I will work around. For the moment, it generates 3 times the same SVG.


import * as React from 'react';
import { Page, Rectangle, Text, View, Svg } from 'react-figma';
import { Circle, G } from './react-figma-svg';
import { renderToStaticMarkup } from 'react-dom/server';

export const App = () => {
    console.log('render cycle');
    return (
        <Page isCurrent name="Page X">
            <Svg name="svg-test-1" source={
                renderToStaticMarkup(
                    <G name="circles"> 
                        <Circle cx={10} cy="100" r="10" stroke="lime" strokeWidth="3" fill="teal"/> 
                        <Circle cx={40} cy="100" r="10" stroke="lime" strokeWidth="3" fill="pink"/> 
                        <Circle cx={70} cy="100" r="10" stroke="lime" strokeWidth="3" fill="green"/> 
                    </G>
                )}>
            </Svg>
        </Page>
    );
};

1reaction

thierryccommented, Mar 20, 2021


import * as React from 'react';
import { Page, Rectangle, Text, View, Svg } from 'react-figma';
import { Circle } from './react-figma-svg';
import { renderToStaticMarkup } from 'react-dom/server';


export const App = () => {
    return (
        <Page isCurrent name="Page X">
            <Text characters="Hello, react-figma!"/>
            <Rectangle style={{ width: 200, height: 100, backgroundColor: '#0ddd25' }} />
            <Rectangle style={{ width: 200, height: 100, backgroundColor: '#a6dd00' }} />
            <View>
                <View style={{ width: 200, height: 100, backgroundColor: '#dd55aa' }} />
                <Text style={{ color: '#ffffff' }}>text</Text>
            </View>
            <Svg source={
                renderToStaticMarkup(
                <Circle cx="50" cy="50" r="40" stroke="red" stroke-width="3" fill="green"/>
                )}>
            </Svg>
        </Page>
    );
};

Now I need to write SVG as un function to make the bride …

Top Results From Across the Web

software-mansion/react-native-svg - GitHub

react-native-svg provides SVG support to React Native on iOS, Android, macOS, Windows, and a compatibility layer for the web. Check out the Example...

How to import SVG files in React Native using react-native-svg

In this guide, we'll demonstrate how to implement SVG icons in your React Native app using the react-native-svg library. We'll cover the ...

Svg - Expo Documentation

react-native-svg allows you to use SVGs in your app, with support for interactivity and animation. Platform Compatibility. Android Device, Android Emulator, iOS ...

How to show SVG file on React Native? - Stack Overflow

In this package it is mentioned that .svg files are not supported in ... To render svg files using react-native-svg-uri with react-native ...

How to create custom wavy headers using react-native-svg ...

How to create custom wavy headers using react-native-svg and Expo ... the most Expo-compatible version of each the package, limiting unnecessary errors.