InfiniDraw

Universal svg drawing with pan and zoom. Builds on Next.js and react-native-web for the web version, and react-native for native apps. Uses react-native-svg on native, svgs for the web, and zoomable-svg in both. Kudos to all the makers involved.

Try it

Web version

Snack version

Expo version (source code)

Android Play store

How to use

Install dependencies

• Node.js
• react-native

Install InfiniDraw

Clone the repo

git clone https://github.com/msand/InfiniDraw.git
cd InfiniDraw

Install it:

npm install

Run web

npm run dev

Deploy web version to the cloud with now (download)

now

Run native ios version

npm run ios

or

npm run native
react-native run-ios

Run native ios release version

Build native version for production

npm run native
react-native run-ios --configuration Release

Run native android version

npm run android

or

npm run native
react-native run-android

Run native android release version

Sign Android app

npm run native
react-native run-android --variant=release

The idea behind the example

This example features how to use react-native-web and zoomable-svg to bring the platform-agnostic Components and APIs of React Native to the web with pan-and-zoom svg drawing.

High-quality user interfaces: React Native for Web makes it easy to create fast, adaptive web UIs in JavaScript. It provides native-like interactions, support for multiple input modes (touch, mouse, keyboard), optimized vendor-prefixed styles, built-in support for RTL layout, built-in accessibility, and integrates with React Dev Tools.

Write once, render anywhere: React Native for Web interoperates with existing React DOM components and is compatible with the majority of the React Native API. You can develop new components for native and web without rewriting existing code. React Native for Web can also render to HTML and critical CSS on the server using Node.js.

Privacy policy

No meta-data is collected from using this app. Only the time, color and shape of the strokes drawn are stored in the database.