How save image in hooks?

[riqkml]

sry, im newbie, but how to save image in hooks, itried save preference and not work. path value always null

[karlsecco]

@riqkml can you share your component? I've implemented the package with hooks but for me path is always undefined not null -- https://github.com/terrylinla/react-native-sketch-canvas/issues/41

[Kichiyaki]

I used my fork in this example, but this code should work with @terrylinla/react-native-sketch-canvas too.

import React, { useRef, useEffect } from 'react';
import { StyleSheet, Text, View } from 'react-native';

import RNSketchCanvas from '@kichiyaki/react-native-sketch-canvas';

const App = () => {
  const canvas = useRef<RNSketchCanvas | null>(null);

  useEffect(() => {
    //save image after 5s
    const timeout = setTimeout(() => {
      if (canvas.current) {
        canvas.current.save();
      }
    }, 5000);
    return () => {
      //clean timeout after unmount
      clearTimeout(timeout);
    };
  }, []);

  return (
    <View style={styles.container}>
      <View style={{ flex: 1, flexDirection: 'row' }}>
        <RNSketchCanvas
          containerStyle={{ backgroundColor: 'transparent', flex: 1 }}
          canvasStyle={{ backgroundColor: 'transparent', flex: 1 }}
          defaultStrokeIndex={0}
          defaultStrokeWidth={5}
          onSketchSaved={(v1, v2) => {
            console.log('onSketchSaved', v1, v2);
          }}
          ref={canvas}
          closeComponent={
            <View style={styles.functionButton}>
              <Text style={{ color: 'white' }}>Close</Text>
            </View>
          }
          undoComponent={
            <View style={styles.functionButton}>
              <Text style={{ color: 'white' }}>Undo</Text>
            </View>
          }
          clearComponent={
            <View style={styles.functionButton}>
              <Text style={{ color: 'white' }}>Clear</Text>
            </View>
          }
          eraseComponent={
            <View style={styles.functionButton}>
              <Text style={{ color: 'white' }}>Eraser</Text>
            </View>
          }
          strokeComponent={(color) => (
            <View
              style={[{ backgroundColor: color }, styles.strokeColorButton]}
            />
          )}
          strokeSelectedComponent={(color) => {
            return (
              <View
                style={[
                  { backgroundColor: color, borderWidth: 2 },
                  styles.strokeColorButton,
                ]}
              />
            );
          }}
          strokeWidthComponent={(w) => {
            return (
              <View style={styles.strokeWidthButton}>
                <View
                  style={{
                    backgroundColor: 'white',
                    marginHorizontal: 2.5,
                    width: Math.sqrt(w / 3) * 10,
                    height: Math.sqrt(w / 3) * 10,
                    borderRadius: (Math.sqrt(w / 3) * 10) / 2,
                  }}
                />
              </View>
            );
          }}
          saveComponent={
            <View style={styles.functionButton}>
              <Text style={{ color: 'white' }}>Save</Text>
            </View>
          }
          savePreference={() => {
            return {
              folder: 'test',
              filename: 'img',
              transparent: true,
              imageType: 'png',
              cropToImageSize: true,
            };
          }}
          permissionDialogTitle="Message"
          permissionDialogMessage="Message"
        />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  strokeColorButton: {
    marginHorizontal: 2.5,
    marginVertical: 8,
    width: 30,
    height: 30,
    borderRadius: 15,
  },
  strokeWidthButton: {
    marginHorizontal: 2.5,
    marginVertical: 8,
    width: 30,
    height: 30,
    borderRadius: 15,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#39579A',
  },
  functionButton: {
    marginHorizontal: 2.5,
    marginVertical: 8,
    height: 30,
    width: 60,
    backgroundColor: '#39579A',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 5,
  },
});

export default App;