Skip to content

Help make the extensions Marketplace better for everyone. Take this survey!

| Marketplace
Sign in
Visual Studio Code>Visualization>RN-FlowNew to Visual Studio Code? Get it now.
RN-Flow

RN-Flow

Nerds Inc.

|
248 installs
| (0) | Free
RNFlow: Figma-like UI builder for React Native
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

RN-Flow: Figma-like UI Builder for React Native Devs

RN-Flow is a visual UI builder for React Native. It allows you to build UIs by dragging and dropping on a canvas. The code is 100% synced with the canvas, so you can switch between the two at any time.

Features

⚡ real-time WYSIWYG code generation

Intro

⚡ instant, independent component preview (You can edit from the code side as well)

CodeEditing

⚡ code tracing (double click on the GUI to find the corresponding code)

CodeTracing

Hot Keys

Ctrl/Cmd + Alt + R : start RN-Flow

Frequently Asked Questions

  • Q: How do I use RN-Flow?

  • A: Start a fresh expo project by yarn create expo --template and choose Navigation (typescript) from the templates. After installation, you start vscode from the project, then start RN-Flow by pressing Ctrl/Cmd + Alt + R.

  • Q: What platform does RN-Flow support?

  • A: RNFlow is for react-native.

  • Q: Does RN-Flow support react.js?

  • A: No, at least not yet.

  • Q: Why react-native, not react.js?

  • A: Mainly for three reasons: (1) It's cross-platform. (2) The components are better modularized than react.js. (3) Usually, the screen size is small, so it fits well as a VS-Code extension.

  • Q: Does RN-Flow support XXX?

  • A:

    • tailwind: No. At least not yet. But we're open to discussion. The whole point of RN-Flow is not having to write code about styling. Do you guys need tailwind? If so, why?
    • styled-components: For now, we don't have a plan to support. Too much work to do. (Probably a lot more than tailwind)

  • Q: Who is RN-Flow for?

  • A: At the moment, RNFlow is targeting solo-entrepreneurs like myself, who should design, develop and deploy fast with limited resources. But as we grow, we'll support more and more features, and hopefully, we'll be able to support bigger teams as well.

Contacts

If you have any questions or suggestions, please feel free to contact us.

  • Discord: https://discord.gg/PJyxPWGv
  • Email: admin@n3rds.io

Known Issues

  • Only the first component of a file is displayed in the GUI editor.
  • .webm files are NOT supported(It's simply NOT displayed), as VSCode does not ship with ffmpeg in its electon build. (see mjbvz's comments on https://github.com/microsoft/vscode/issues/54097)
  • Class-components are NOT supported. (You can call a class-component inside your functional component, but you can't edit a class-component itself with RN-Flow)
  • Contact us
  • Jobs
  • Privacy
  • Terms of use
  • Trademarks
© 2023 Microsoft