Giter Club home page Giter Club logo

protonative's Introduction

ProtoNative

Contributors Downloads Release License Stars

Website Linkedin Medium


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.

Download for Windows or Mac

Table of Contents

  1. Installation
  2. How it works
  3. Running your mobile app
  4. Contributing
  5. License
  6. Our Team

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.

back to top

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

back to top


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

back to top

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!

back to top

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!

back to top

protonative's People

Contributors

jon19200 avatar michelle-leong avatar mkymn10 avatar rnferrer avatar pkg415 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.