Skip to content

Commit 49a9d8c

Browse files
iBotPeachesiBotPeaches
authored
docs: rework readme (#91)
1 parent 5732716 commit 49a9d8c

File tree

1 file changed

+18
-35
lines changed

1 file changed

+18
-35
lines changed

‎README.md‎

Lines changed: 18 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ A React Native component for drawing by touching on both iOS and Android, with T
1010

1111
## Features
1212

13+
- Supports New Architecture
1314
- Support iOS and Android
1415
- Full TypeScript support
1516
- Stroke thickness and color are changeable while drawing
@@ -19,7 +20,7 @@ A React Native component for drawing by touching on both iOS and Android, with T
1920
- Use vector concept - sketches won't be cropped in different sizes of canvas
2021
- Support translucent colors and eraser
2122
- Support drawing on an image
22-
- High performance (See [below](#Performance))
23+
- High performance
2324
- Can draw multiple canvases in the same screen
2425
- Can draw multiple multiline text on canvas
2526
- Support for custom UI components
@@ -41,7 +42,7 @@ yarn install @sourcetoad/react-native-sketch-canvas
4142

4243
### ● Using without UI component (for customizing UI)
4344

44-
```typescript
45+
```tsx
4546
import React from 'react';
4647
import {
4748
AppRegistry,
@@ -82,7 +83,7 @@ AppRegistry.registerComponent('example', () => Example);
8283
---
8384

8485
| Prop | Type | Description |
85-
| :---------------------- | :--------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
86+
|:------------------------|:----------:|:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
8687
| style | `object` | Styles to be applied on canvas component |
8788
| strokeColor | `string` | Set the color of stroke, which can be #RRGGBB or #RRGGBBAA. If strokeColor is set to #00000000, it will automatically become an eraser. <br/>NOTE: Once an eraser path is sent to Android, Android View will disable hardware acceleration automatically. It might reduce the canvas performance afterward. |
8889
| strokeWidth | `number` | The thickness of stroke |
@@ -103,7 +104,7 @@ AppRegistry.registerComponent('example', () => Example);
103104
---
104105

105106
| Method | Description |
106-
| :---------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
107+
|:------------------------------------------------------------------------------|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
107108
| clear() | Clear all the paths |
108109
| undo() | Delete the latest path. Can undo multiple times. |
109110
| addPath(path) | Add a path (see [below](#objects)) to canvas. |
@@ -117,7 +118,7 @@ AppRegistry.registerComponent('example', () => Example);
117118
---
118119

119120
| Constant | Description |
120-
| :---------- | :----------------------------------------------------------------------------------- |
121+
|:------------|:-------------------------------------------------------------------------------------|
121122
| MAIN_BUNDLE | Android: empty string, '' <br/>iOS: equivalent to [[NSBundle mainBundle] bundlePath] |
122123
| DOCUMENT | Android: empty string, '' <br/>iOS: equivalent to NSDocumentDirectory |
123124
| LIBRARY | Android: empty string, '' <br/>iOS: equivalent to NSLibraryDirectory |
@@ -127,7 +128,7 @@ AppRegistry.registerComponent('example', () => Example);
127128

128129
<img src="https://i.imgur.com/O0vVdD6.png" height="400" />
129130

130-
```typescript
131+
```tsx
131132
import React from 'react';
132133
import {
133134
AppRegistry,
@@ -226,7 +227,7 @@ AppRegistry.registerComponent('example', () => Example);
226227
---
227228

228229
| Prop | Type | Description |
229-
| :---------------------- | :---------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
230+
|:------------------------|:-----------:|:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
230231
| containerStyle | `object` | Styles to be applied on container |
231232
| canvasStyle | `object` | Styles to be applied on canvas component |
232233
| onStrokeStart | `function` | See [above](#properties) |
@@ -259,7 +260,7 @@ AppRegistry.registerComponent('example', () => Example);
259260
---
260261

261262
| Method | Description |
262-
| :------------- | :-------------------- |
263+
|:---------------|:----------------------|
263264
| clear() | See [above](#methods) |
264265
| undo() | See [above](#methods) |
265266
| addPath(path) | See [above](#methods) |
@@ -271,7 +272,7 @@ AppRegistry.registerComponent('example', () => Example);
271272
---
272273

273274
| Constant | Description |
274-
| :---------- | :---------------------- |
275+
|:------------|:------------------------|
275276
| MAIN_BUNDLE | See [above](#constants) |
276277
| DOCUMENT | See [above](#constants) |
277278
| LIBRARY | See [above](#constants) |
@@ -315,7 +316,7 @@ Note: Because native module cannot read the file in JS bundle, file path cannot
315316

316317
### SavePreference object
317318

318-
```typescript
319+
```json5
319320
{
320321
folder: 'RNSketchCanvas',
321322
filename: 'image',
@@ -328,7 +329,7 @@ Note: Because native module cannot read the file in JS bundle, file path cannot
328329
```
329330

330331
| Property | Type | Description |
331-
| :--------------- | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
332+
|:-----------------|:--------|:---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
332333
| folder? | string | Android: the folder name in `Pictures` directory<br/>iOS: if `filename` is not null, image will save to temporary directory with folder and filename, otherwise, it will save to camera roll |
333334
| filename? | string | the file name of image<br/>iOS: Set to `null` to save image to camera roll. |
334335
| transparent | boolean | save canvas with transparent background, ignored if imageType is `jpg` |
@@ -339,7 +340,7 @@ Note: Because native module cannot read the file in JS bundle, file path cannot
339340

340341
### Path object
341342

342-
```typescript
343+
```json5
343344
{
344345
drawer: 'user1',
345346
size: { // the size of drawer's canvas
@@ -361,7 +362,7 @@ Note: Because native module cannot read the file in JS bundle, file path cannot
361362

362363
### LocalSourceImage object
363364

364-
```typescript
365+
```json5
365366
{
366367
filename: 'image.png', // e.g. 'image.png' or '/storage/sdcard0/Pictures/image.png'
367368
directory: '', // e.g. SketchCanvas.MAIN_BUNDLE or '/storage/sdcard0/Pictures/'
@@ -370,14 +371,14 @@ Note: Because native module cannot read the file in JS bundle, file path cannot
370371
```
371372

372373
| Property | Type | Description | Default |
373-
| :--------- | :------ | :------------------------------------------------------------------------------------------------------------------------------- | :---------- |
374+
|:-----------|:--------|:---------------------------------------------------------------------------------------------------------------------------------|:------------|
374375
| filename | string | the fold name of the background image file (can be a full path) | |
375376
| directory? | string | the directory of the background image file (usually used with [constants](#constants)) | '' |
376377
| mode? | boolean | Specify how the background image resizes itself to fit or fill the canvas.<br/>Options: `AspectFill`, `AspectFit`, `ScaleToFill` | `AspectFit` |
377378

378379
### CanvasText object
379380

380-
```typescript
381+
```json5
381382
{
382383
text: 'TEXT',
383384
font: '',
@@ -393,7 +394,7 @@ Note: Because native module cannot read the file in JS bundle, file path cannot
393394
```
394395

395396
| Property | Type | Description | Default |
396-
| :------------------ | :----- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------- |
397+
|:--------------------|:-------|:------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:---------------|
397398
| text | string | the text to display (can be multiline by `\n`) | |
398399
| font? | string | Android: You can set `font` to `fonts/[filename].ttf` to load font in `android/app/src/main/assets/fonts/` in your Android project<br/>iOS: Set `font` that included with iOS | |
399400
| fontSize? | number | font size | 12 |
@@ -405,32 +406,14 @@ Note: Because native module cannot read the file in JS bundle, file path cannot
405406
| alignment? | string | Specify how the text aligns inside container. Only work when `text` is multiline text. | Left |
406407
| lineHeightMultiple? | number | Multiply line height by this factor. Only work when `text` is multiline text. | 1.0 |
407408

408-
## Performance
409-
410-
---
411-
412-
1. For non-transparent path, both Android and iOS performances are good. Because when drawing non-transparent path, only last segment is drawn on canvas, no matter how long the path is, CPU usage is stable at about 20% and 15% in Android and iOS respectively.
413-
2. For transparent path, CPU usage stays at around 25% in Android, however, in iOS, CPU usage grows to 100%.
414-
415-
- Android (https://youtu.be/gXdCEN6Enmk)<br/>
416-
<img src="https://i.imgur.com/YQ2wVMc.jpg" height="400" />&nbsp;&nbsp;&nbsp;&nbsp;<img src="https://i.imgur.com/CuIar4h.jpg" height="400" />
417-
- iOS (https://youtu.be/_jO4ky400Eo)<br/>
418-
<img src="https://i.imgur.com/AwkFu94.png" height="400" />&nbsp;&nbsp;&nbsp;&nbsp;<img src="https://i.imgur.com/UDcaiaz.png" height="400" />
419-
420409
## Example
421410

422411
---
423412

424-
The source code includes 3 examples, using build-in UI components, using with only canvas, and sync between two canvases.
413+
The source code includes 7 examples, using build-in UI components, using with only canvas, and sync between two canvases.
425414

426415
Check full example app in the [example](./example) folder
427416

428-
## Troubleshooting
429-
430-
---
431-
432-
Please refer [here](https://github.com/sourcetoad/react-native-sketch-canvas/wiki/Troubleshooting).
433-
434417
### Jest Setup
435418

436419
If you're using Jest in your project, you'll need to mock the TurboModule registry. Add the following to your Jest setup file:

0 commit comments

Comments
 (0)