Virena

A simple and easy-to-use prototyping tool. Create your React Native Navigation in minutes!
Built on top of Electron.

Key Features • How To Use • Download • Credits • License

Key Features

• Drag-And-Drop Tree Structure
  • Build out your navigation in a way that is extremely easy to think about.
• Live Preview - Make changes, See changes
  • Instantly see what your navigation structure looks like in a phone simulator before you export.
• Login and Save Projects
  • Securely login with your Github or Gmail account to save projects for later.
• Export Project Files
  • Have a project instantly created for you when you place it at the root of a Create-React-Native scaffolding.
• Cross platform
  • Windows, MacOS and Linux ready.

How To Use

• STEP 1: INSTALL DEPENDENCIES

  • Virena uses the React Navigation library to build out a navigation structure. (https://reactnavigation.org/en/)
    Before getting started, you must npm/yarn install it as a dependency in your own project.

  npm install --save react-navigation
  
  # or with yarn
  # yarn add react-navigation
  

• Step 2: ADD YOUR ENTRY POINT

  • Add a root navigational component by submitting the required information (name and type) in the top right options panel. The root component serves as the entry point into your React Native app.

• Step 3: ADD CHILDREN
  • Follow similar steps as above to add children. You can nest navigational components within navigational components, or add components of the type "Simple Screen" which are the presentational components for your app. It is important to note that presentational components / "Simple Screens" cannot have children--only navigators can have children. In addition, all navigators must have at least ONE child.

• Step 4: EXPORT / SAVE / LOAD FILES
  • When you are done with your session, you can either 1) Save your project for later or 2) Export the files for immediate use in your project. In order to save, simply click the "Save Project" button in the top nav menu. You can then log out and come back to it later by clicking the "Load Project" button adjacent to it. Simple enough! In order to export, simply click the blue "Export" button in the bottom region of the right panel and specify where you want it exported. Our application generates templates with the assumption that you will be exporting everything at the same directory level. The contents of the export include a "navigation.js" file--essentially the code manifest detailing the layout of your navigation structure--as well as files which define your presentational components (components of type "Simple Screen" in our app).

Download

Download the latest installable version of Virena for MacOS, Windows, and Linux.

• For Mac Users ONLY: As of right now, you may need to grant permission to allow the app to run your system as we do not have an Apple license.

Authors

Sam Hickey @samaugust

Daniel Matuszak @daniel-matuszak

Jacky Chan @jcisbroke

Gerret Kubota @gerretkubota

Credits

This software uses following open source packages.

• React
• Redux
• React-Native
• React Sortable Tree
• Electron