ProtoNative is a React Native Prototyping Tool for mobile developers. With its seamless drag-and-drop interface, live code preview, and much, much more, ProtoNative is your all-in-one tool for all things React Native.

Interested? Try our online demo!

Download for Windows

Download for Mac

After downloading, go to System Preferences > Privacy and Security > Security and give ProtoNative permission to open

Features

Create App and Component Layouts

Add elements to app canvas and custom component details to create a layout of your application. Elements that allow nesting will highlight in yellow when hovering an element. Remove elements by dragging them to the trash area. The code preview will be updated as elements are added and removed!

Create App and Component Layouts

Add elements to app canvas and custom component details to create a layout of your application. Elements that allow nesting will highlight in yellow when hovering an element. Remove elements by dragging them to the trash area. The code preview will be updated as elements are added and removed!

Stateful Components

Make a components stateful by pressing the State button. Add and delete states in the modal.

Stateful Components

Make a components stateful by pressing the State button. Add and delete states in the modal.

Nested Custom Components

Custom Components can be children of other custom components. These parent-child relationships will be reflected in the App Canvas as you make your components.

Nested Custom Components

Custom Components can be children of other custom components. These parent-child relationships will be reflected in the App Canvas as you make your components.

Tree Hierarchy

Visualize your project by pressing the tree tab. Display states of a stateful component by pressing the info button. The tree is easily customizable to a user's preference: nodes are easily repositioned, and the orientation of the tree can be switched by pressing the arrow key in the bottom left.

Tree Hierarchy

Visualize your project by pressing the tree tab. Display states of a stateful component by pressing the info button. The tree is easily customizable to a user's preference: nodes are easily repositioned, and the orientation of the tree can be switched by pressing the arrow key in the bottom left.

Export your Project

Once you're finished with your project, export it to your local machine using the export button! The resulting zip file contains a ready-to-go React Native app. Make sure to run 'npm install' before starting your app, and your project will be ready to go!

Export your Project

Once you're finished with your project, export it to your local machine using the export button! The resulting zip file contains a ready-to-go React Native app. Make sure to run 'npm install' before starting your app, and your project will be ready to go!