Aligning with React Native API - proposal

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.

[corysimmons]

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

[ilyalesik]

Hi, @corysimmons!

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

• View
• Text
• StyleSheet
• Platform
• Image

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

    resolve: {
        alias: {
            'react-native$': 'react-figma'
        }
    }