Aligning with React Native API - proposal
See original GitHub issueHi, 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:
- Created 4 years ago
- Comments:6 (4 by maintainers)
@ilyalesik Awesome! Thanks for all your hard work on this project! It looks like it has the potential to revolutionize designer<->dev workflows.
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: