https://github.com/mrikirill/rnsketchnoteapp

A demo drawing app which is based on React Native with MobX and SVG
https://github.com/mrikirill/rnsketchnoteapp

demo-app drawing-app mobx react-native sketchapp svg

Last synced: 11 months ago
JSON representation

A demo drawing app which is based on React Native with MobX and SVG

• Host: GitHub
• URL: https://github.com/mrikirill/rnsketchnoteapp
• Owner: mrikirill
• License: mit
• Created: 2020-10-10T09:16:45.000Z (over 5 years ago)
• Default Branch: main
• Last Pushed: 2022-05-19T01:12:54.000Z (about 4 years ago)
• Last Synced: 2023-03-10T04:23:18.942Z (over 3 years ago)
• Topics: demo-app, drawing-app, mobx, react-native, sketchapp, svg
• Language: TypeScript
• Homepage:
• Size: 1.48 MB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# RNSketchNote

A demo drawing app which is based on React Native with MobX and SVG

## Nav

- [Description](#desc)

- [Stack](#stack)

- [Project structure ](#project-structure)

- [Testing ](#testing)

- [Usage ](#usage)

## Description [](#desc)

The main functions of this App:

* **Drawing component** is based on [React Native SVG](https://github.com/react-native-community/react-native-svg) to implement `Polyline` and use `PanResponder` to detect taps

* Create a new Sketch

* Save sketches to AsyncStorage

* Delete all sketches from AsyncStorage

* Edit selected sketch and save it by using AsyncStorage

![](prew.gif)

## Stack [](#stack)

* Architecture: MVVM with MobX

* [React Native 0.63](https://reactnative.dev)

* State: [MobX](http://mobx.js.org)

* [TypeScript](https://www.typescriptlang.org)

* [@react-native-community/react-native-svg](https://github.com/react-native-community/react-native-svg)

## Project structure [](#project-structure)

* `__mocks__` - mock files for Native Modules

* `__tests__` - test cases

* `src`

  * `components` - UI components

  * `models` - models SketchList and SketchItem

  * `screens` - screen components

  * `services` - services 

  * `stores` - MobX stores (ViewModel)

  * `utils` - utilities and config

## Testing [](#testing)

Run `yarn test`

![](test.png) 

## Usage [](#usage)

1. Make sure that you have XCode and Android Studio

2. Git clone this repo

3. Run `yarn` or `npn i`

4. Run `yarn ios` or `yarn android`