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.
Clone the repo
git clone https://github.com/msand/InfiniDraw.git
cd InfiniDraw
Install it:
npm install
npm run dev
now
npm run ios
or
npm run native
react-native run-ios
Build native version for production
npm run native
react-native run-ios --configuration Release
npm run android
or
npm run native
react-native run-android
npm run native
react-native run-android --variant=release
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.
No meta-data is collected from using this app. Only the time, color and shape of the strokes drawn are stored in the database.