PixelShapeRN

Android iOS Web pixel drawing editor APP and sub-app that comes in handy when creating pixel art images and gif animations.

Live Web demo

Android

npm run android to generate android/app/build/outputs/apk/debug/app-debug.apk for development.

npm run build-android to generate android/app/build/outputs/apk/release/app-release.apk for production.

npm run bundle-android to android/app/build/outputs/bundle/release/app-release.aab for production.

Web

npm run web for development, then view it at http://localhost:3000 in web browser.

fix: with react-native-web product build manually that add node_modules/react-native-blob-util/index.web.js and edit node_modules/react-native-blob-util/package.json before npm run build-web, otherwise will export 'URIUtil' (reexported as 'URIUtil') was not found in './utils/uri' (possible exports: default).

npm run build-web to generate files in build/ for production to deploy to https://foo.bar.com/ , and can use npx http-server@13.0.2 build to simply test it at http://127.0.0.1:8080 in web browser.

npm run build-web-PixelShapeRN to generate files in build/ for production to deploy to https://foo.bar.com/PixelShapeRN/, e.g. https://flyskywhy.github.io/PixelShapeRN/ .

permission

PixelShapeRN will automatically request ('react-native').PermissionsAndroid on Android when import or save file, so your iOS APP embeded PixelShapeRN as sub-app maybe need request permission with e.g. react-native-permissions or expo-permissions.

be embeded as sub-app

Ref to Isolating Redux Sub-Apps and Breaking out of Redux paradigm to isolate apps, PixelShapeRN can be embeded into other react-native APP easily.

• Ref to https://github.com/flyskywhy/GCanvasRNExamples/commit/c24cd12
• npm install pixelshapern in otherAPP/.
• Add dependencies in pixelshapern/react-native.config.js into otherAPP/react-native.config.js.
• Add native component name e.g. "@flyskywhy/react-native-gcanvas": "6.0.12 OR_OTHER_VERSION", into otherAPP/package.json so that they can be automatically linked by react-native. PS: The reason why "@flyskywhy/react-native-gcanvas" even "react-native" is writen in "devDependencies" no "dependencies" in pixelshapern/package.json is, if version here mismatch (e.g. 6.0.6 and 6.0.5) between pixelshapern/package.json and otherAPP/package.json, will cause e.g. Invariant Violation: Tried to register two views with the same name RCTGCanvasView, if "react-native" mismatch (e.g. 0.63.2 and 0.63.3) will cause React Native version mismatch. JavaScript version: 0.63.2 Native version: 0.63.3.
• npm install --save-dev react-refresh@0.11.0 in otherAPP/ so that can npm run web , because lower version of react-refresh comes from metro-react-native-babel-preset may cause Module not found: Error: Cannot find module 'react-refresh' , ref to RN >= 0.60 的安装 react-native-web.
• Enable fs permission in other APP to save and load .gif file, ref to ENOENT: open failed: EACCES (Permission denied), open '/storage/emulated/0/Download/ on Android, and IOS file downloaded not able to be located on device on iOS.
• Copy web web-fresh and build-web in package.json into otherAPP/package.json .
• Finally, in other APP, can embed PixelShapeRN as sub-app and customize it with e.g. defaultsPalette as described in src/context.js .

import PixelShapeRN from 'pixelshapern/src/index';
import {PixelShapeContext} from 'pixelshapern/src/context';
...
    <PixelShapeContext.Provider
      value={{
        defaultsPalette: [
          {color: '#ff0000'},
          {color: '#00ff00'},
          {color: '#0000ff'},
        ],
      }}>
      <PixelShapeRN />
    </PixelShapeContext.Provider>

Authors

• Alexander Yanovych
• Li Zheng flyskywhy@gmail.com

Donate

To support my work, please consider donate.

• ETH: 0xd02fa2738dcbba988904b5a9ef123f7a957dbb3e

•