why I can not save ?

[Reshma-K-U]

import React, { useRef } from 'react'; const canvas = useRef(null); <RNSketchCanvas ref={canvas} saveComponent={ <TouchableOpacity onPress={()=>{canvas.current.save()}}> 'Save' /> } onSketchSaved={(success, filePath) => { alert(filePath) }) />

[jetBn]

import React, { useRef } from 'react'; const canvas = useRef(null); <RNSketchCanvas ref={canvas} saveComponent={ <TouchableOpacity onPress={()=>{canvas.current.save()}}> 'Save' /> } onSketchSaved={(success, filePath) => { alert(filePath) }) />

I incloud localSourceImage can not to save. I use to save method as same as with you this method

[jetBn]

import React, { useRef } from 'react'; const canvas = useRef(null); <RNSketchCanvas ref={canvas} saveComponent={ <TouchableOpacity onPress={()=>{canvas.current.save()}}> 'Save' /> } onSketchSaved={(success, filePath) => { alert(filePath) }) />

can you try incloud localSourceImage ????

[Reshma-K-U]

import React, { useRef, useState } from 'react'; const canvas = useRef(null); const [img, setImg] = useState(//path to initial image) <RNSketchCanvas ref={canvas} localSourceImage={{ filename: img, directory: '', mode: 'AspectFit }} saveComponent={ <TouchableOpacity onPress={()=>{canvas.current.save()}}> 'Save' /> } savePreference={() => { return { folder: 'RNSketchCanvas', filename: String(Math.ceil(Math.random() * 100000000)), transparent: false, imageType: 'png', includeImage: true } }} onSketchSaved={(success, filePath) => { setImg(filePath) }) /> please make sure that your app has permission to access storage

[jetBn]

import React, { useRef, useState } from 'react'; const canvas = useRef(null); const [img, setImg] = useState(//path to initial image) <RNSketchCanvas ref={canvas} localSourceImage={{ filename: img, directory: '', mode: 'AspectFit }} saveComponent={ <TouchableOpacity onPress={()=>{canvas.current.save()}}> 'Save' /> } savePreference={() => { return { folder: 'RNSketchCanvas', filename: String(Math.ceil(Math.random() * 100000000)), transparent: false, imageType: 'png', includeImage: true } }} onSketchSaved={(success, filePath) => { setImg(filePath) }) /> please make sure that your app has permission to access storage

hava others ?

[jetBn]

I console log ref about ref save function is undefined.

[prayaslashkari]

It was working earlier but now it stopped working.

Any solutions @jetBn @Reshma-K-U ?

[jetBn]

I want to get some solutions too. can you hava any solutions ? @callmemonky

[Reshma-K-U]

@jetBn can u please share your code ?

[jramalho]

it might not be getting the ref right

[jetBn]

@Reshma-K-U

[jetBn]

I can console ref right but not get save fun.

[Reshma-K-U]

@jetBn SavePreference and SaveComponent are properties of RNSketchCanvas. You can't use that in SketchCanvas. Please check save method of SketchCanvas in the doc. Save method is different in RNSketchcanvas and SketchCanvas

[jetBn]

@Reshma-K-U I make sure use SketchCanvas but can't console save method

[jetBn]

import { SketchCanvas } from '@terrylinla/react-native-sketch-canvas'

const sketchCanvas = useRef()

 <SketchCanvas
                style={{width:screenW, height:calc(460)} }
                strokeColor={'#8287FF'}
                strokeWidth={strokeWidth}
                ref={sketchCanvas}
                onSketchSaved={(result, path)=> console.log(result, path)}
                localSourceImage={{
                        filename: fileUri,  // e.g. 'image.png' or '/storage/sdcard0/Pictures/image.png'
                        directory: '', // e.g. SketchCanvas.MAIN_BUNDLE or '/storage/sdcard0/Pictures/'
                        mode: 'ScaleToFill'
                }}
                onStrokeChanged={()=> {
                    // setStrokePath(sketchCanvas.current.getPaths())
                    // setTempData(true)
                    // setShowPrevImg(true)
                    // setShowNextImg(false)
                }}
            />

const toReappearHandle = () => {
    console.log(sketchCanvas.current.save())
    try {
        sketchCanvas.current.save()
        // console.log(sketchCanvas.current.save())
    } catch (error) {
        console.log(error)   
    }

[michregis11]

@jetBn hello! I'm using RNSketchCanvas instead of SketchCanvas and its perfectly working, just last night. As long as permission is granted.

import RNSketchCanvas

PS: I used Class Component instead of Function.

[jetBn]

@michregis11 can't use Function Component?

[michregis11]

Hi @jetBn I'm really not sure, I'm quite new to RN, and I never tried using function type components ever since... You can try it in Class Component, and I think, it can be imported in Function Component too.

[jetBn]

@michregis11 I must use localSourceImage . so I can't to use RNSketchCanvas

[michregis11]

@jetBn I tried it just now, and it worked.

Also, try to look into RNSketchCanvas in index.js to see all its props, it accepts localSourceImage too. And just make sure you set includeImage to True in savePreference object.

[jetBn]

@michregis11 why I can't show bg in RNSketchCanvas. I use SketchCanvas can show.

[jetBn]

@michregis11 I hava sove it. it my style props not right. thanks

[jetBn]

why SketchCanvas can't to save ?

[jetBn]

@michregis11 if use RNSketchCanvas how to dynamic set strokeWidth？

[michregis11]

@michregis11 if use RNSketchCanvas how to dynamic set strokeWidth？

@jetBn dynamic? you mean user can set certain width? Create btn component or inputtext that let user sets desired width then place width value to useState/state. I tried strokeWidth its not working try defaultStrokeWidth instead. Not sure though... never tried, I usually set width constantly.

[jetBn]

@michregis11 Yeah. I want to Slider components to set desired width. about strokeWidth is by user set. I use strokeWidthComponent it on opress handle, but use Slider I not how to use set.

[jetBn]

@michregis11 I have other problem. about how to get in refs getPaths function in RNSketchCanvas instead on SketchCanvas ？I want to achieve revoke path and add path.

[michregis11]

@michregis11 Yeah. I want to Slider components to set desired width. about strokeWidth is by user set. I use strokeWidthComponent it on opress handle, but use Slider I not how to use set.

@jetBn just read about useState and state, you need this for making something dynamic...

[michregis11]

@michregis11 I have other problem. about how to get in refs getPaths function in RNSketchCanvas instead on SketchCanvas ？I want to achieve revoke path and add path.

@jetBn hello, I dont know about Refs, as I said I'm just a newbie in RN. Also, I think we should close this thread already, as your concerns now are irrelevant to this issue. Which is to save... Look for other thread talks about Refs and Paths. Sorry, I can't help you about that... I too, still learning the basics. 😁

[jetBn]

@michregis11 ok. thanks

[Reshma-K-U]

import { SketchCanvas } from '@terrylinla/react-native-sketch-canvas'

const sketchCanvas = useRef()

 <SketchCanvas
                style={{width:screenW, height:calc(460)} }
                strokeColor={'#8287FF'}
                strokeWidth={strokeWidth}
                ref={sketchCanvas}
                onSketchSaved={(result, path)=> console.log(result, path)}
                localSourceImage={{
                        filename: fileUri,  // e.g. 'image.png' or '/storage/sdcard0/Pictures/image.png'
                        directory: '', // e.g. SketchCanvas.MAIN_BUNDLE or '/storage/sdcard0/Pictures/'
                        mode: 'ScaleToFill'
                }}
                onStrokeChanged={()=> {
                    // setStrokePath(sketchCanvas.current.getPaths())
                    // setTempData(true)
                    // setShowPrevImg(true)
                    // setShowNextImg(false)
                }}
            />

const toReappearHandle = () => {
    console.log(sketchCanvas.current.save())
    try {
        sketchCanvas.current.save()
        // console.log(sketchCanvas.current.save())
    } catch (error) {
        console.log(error)   
    }

SketchCanvas's save method expects 6 arguments as follows save(String image-format, String folder, String filename, boolean transparent, boolean includeImage, boolean includeText, boolean cropToImageSize) so you should call your save method like sketchCanvas.current.save('jpg', folderName, fileName, true, true, true, false). If you want the resulting image contain only the editing made on the image then put last argument as true ie sketchCanvas.current.save('jpg', folderName, fileName, true, true, true, true)

[rezasazesh]

The save method really needs to have defaults set to all the attributes so you don't actually have to set them one by one. Also in the document it says there are 6 arguments but when you look in the code there is actually 7

save(imageType, transparent, folder, filename, includeImage, includeText, cropToImageSize) {
    UIManager.dispatchViewManagerCommand(this._handle, UIManager.RNSketchCanvas.Commands.save, [imageType, 
    folder, filename, transparent, includeImage, includeText, cropToImageSize])
}

[thuantvDr4]

at here, I see.

1) if you want to use getBase64 or getPath. You must => import {SketchCanvas} from '@terrylinla/react-native-sketch-canvas';

and function call getBase64 like this:

and function save is:

2) and if you only need get image same as local path, you can use RNSketchCanvas by
import RNSketchCanvas from '@terrylinla/react-native-sketch-canvas';

and function save is: