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
⚡ instant, independent component preview (You can edit from the code side as well)
⚡ code tracing (double click on the GUI to find the corresponding code)
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.
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)
