question-mark
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.

Aligning with React Native API - proposal

See original GitHub issue

Hi, just discovered this repo and am excited to see this be developed!

I was wondering whether it would be possible to tend towards using a React Native style API for the project? e.g. <View> as a generic core component API instead of <Rectangle> or <Circle>, etc. I’ve found with react-sketchapp that the Svg API acts as a really nice escape hatch for using shape-specific components if you need a <Circle> instead of <View style={{ borderRadius: '50%' }}> for some reason.

e.g.

src/svg.js

const Svg = {
  rect: RectangleRenderer,
  path: PathRenderer,
};

src/index.js

export { View, Text, Image };

export { Svg };

Also, regarding components like #20 , I feel that these should live in another library, and that react-figma can provide “internal hooks” to Figma specific components intended for library use.

e.g.

npm: react-primitives-shapes

const { View } from 'react-primitives';
const { Svg, Path } = require('react-primitives-svg');
const { shapes } = require('react-figma');

const Rectangle = (props) => <View style={{ display: 'flex' }} {...props} />;

const Star = Platform.OS === 'figma'
  ? shapes.Star 
  : (
    <Svg>
     <Path data="starhere..." />
    </Svg>
  );

module.exports = { Rectangle, Star };

This would help a lot with react-primitives support and with standardising React cross-platform usage to center around a core, shared API, with platform-specific as opt-in components. For me, a lot of the value of this project would be in using existing React Native or React Sketch.app codebases to render design systems/UI libraries to Figma.

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:6 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
corysimmonscommented, Dec 20, 2019

@ilyalesik Awesome! Thanks for all your hard work on this project! It looks like it has the potential to revolutionize designer<->dev workflows.

1reaction
ilyalesikcommented, Dec 20, 2019

Hi, @corysimmons!

The main components of react-native(-web) are supported right now:

Also, you can use Webpack aliasing for universal rendering into multiple platforms:

    resolve: {
        alias: {
            'react-native$': 'react-figma'
        }
    }
Read more comments on GitHub >

github_iconTop Results From Across the Web

RFC: Reduce API fragmentation across platforms by necolas ...
This is a proposal to incrementally reduce the API fragmentation faced by developers using React Native to target multiple platforms.
Read more >
React Native on Twitter: "As part of our Many Platform Vision ...
This is a proposal to expand React Native accessibility APIs, and to align those APIs with equivalent web standards, e.g., WAI-ARIA.
Read more >
How can you float: right in React Native? - Stack Overflow
How can the Text be floated / aligned to the right? The float property doesn't exist in React Native, but there are loads...
Read more >
Layout Props - React Native
alignItems aligns children in the cross direction. For example, if children are flowing vertically, alignItems controls how they align ...
Read more >
In-Depth Styling with React Native and Flexbox - Manning
The React Native Flexbox implementation is based on the W3C Flexbox web specification but it doesn't share 100% of the API.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found