DEV Community

Cover image for How to enable React Native extension on Zeplin web
Felipe Lobo
Felipe Lobo

Posted on • Edited on

1

How to enable React Native extension on Zeplin web

Hello, I'm doing this post because I couldn't find this in the docs of Zeplin, so you avoid a headache :)

Why should you need this?

Your UX/UI designer exported all the screens and components into Zeplin and you are developing in RN. In the web version you get to the component code snippet part and you'll see a XML snippet and no RN version.

Alt Text

Add React Native extension to Zeplin Web

In the right corner of the snippet you see a config icon. Click on the icon
Alt Text

When you click there, and if your screen has the same height of mine, you'll have the same problem I had.

Alt Text

The header of the modal gets cropped, so you can't go to the extensions page. Just click F11 to enable Fullscreen and see the header:

Alt Text

Then click Extensions and enable RN:

Alt Text

Finally you'll get your RN code snippet:
Alt Text

That's all!

AWS Q Developer image

Your AI Code Assistant

Generate and update README files, create data-flow diagrams, and keep your project fully documented. Built to handle large projects, Amazon Q Developer works alongside you from idea to production code.

Get started free in your IDE

Top comments (0)

AWS GenAI LIVE image

How is generative AI increasing efficiency?

Join AWS GenAI LIVE! to find out how gen AI is reshaping productivity, streamlining processes, and driving innovation.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay