Built with

TypescriptJavaScriptReactElectronElectronBuilderReactDnDJestViteBabelPrettierFileSaverPrismHTML5CSS3SASSGit

Installation

Windows

  1. Download the latest release for Windows here.
  2. Run the installer.
  3. Run ProtoNative from your desktop.

Mac

  1. Download the latest release for Mac here.
  2. Run the installer.
  3. If you get a warning that the app is from an unidentified developer, go to System Preferences > Security & Privacy > General and click “Open Anyway”.
  4. Run ProtoNative from your applications folder.

How it works

  1. To get started, add React Native elements to the “App” canvas by dragging and dropping them from the bottom-left bin. Rearrange elements or drag them to the trash.

    Adding elements to canvas gif

  2. When you feel like your app needs more depth, click the “Add Custom Component” button in the top-left corner and enter a name.

  3. Add elements to your custom component by dragging them from the bottom-left bin onto the canvas in “Component Details.”

    Add custom components gif

  4. Creating a custom component will also add it to your “Add Child” bin, highlighted in purple. Drag and drop the component onto the app canvas or another component’s details to add it.

  5. Navigate between components by clicking on the component name in the “Components” section on the left side or add state variables. Remove state variables by clicking on their names.

    Add state to components gif

  6. Switch to the “Tree” tab above your “App” canvas to see a visual representation of your app’s structure.

    View components as a tree gif

Running your mobile app

  1. When you’re ready to export your app, click the “Export” button in the top-right corner.

    export app gif

  2. Install dependencies and make any changes to your app as you see fit in a code editor of your choosing.

  3. Run with “npm start” and scan the QR code using the Expo Go mobile app to view your brand new application on your own device!

    Run Expo Go app gif

Contributing

Contributions are an incredibly important part of the open source community. Any contributions you make are greatly appreciated.

Roadmap

  1. Add support for more React Native components (React Native Paper)
  2. Add support for more React Native APIs (React Navigation, React Native Gesture Handler, etc.)
  3. Allow for custom styling of components
  4. Add attribute editing for components (e.g. changing the text of a Text component)
  5. Add connection to local storage for session persistence
  6. Containerize the app for easier installation
  7. Automate testing

How to contribute

  1. Fork the Project
  2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
  3. Commit your Changes (git commit -m 'Add some AmazingFeature')
  4. Push to the Branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request (from feature/AmazingFeature to dev)
  6. Create a new issue on GitHub

Read about how to spin up ProtoNative for development here.

We look forward to your exciting contributions!

License

Distributed under the MIT License. See LICENSE for more information.

Our Team

Developed By
Jonathan Klibansky Github LinkedIn
Matthew Kymn Github LinkedIn
Michelle Leong Github LinkedIn
Patricia Good Github LinkedIn
Raymond Ferrer Github LinkedIn

Give a ⭐️ if this project helped you!

GitHub

View Github