diff --git a/components/DrawingCanva.tsx b/components/DrawingCanva.tsx index d2dae57..5379cdc 100644 --- a/components/DrawingCanva.tsx +++ b/components/DrawingCanva.tsx @@ -1,14 +1,15 @@ import React, {useEffect, useRef, useState } from 'react'; import { SketchCanvas, SketchCanvasRef } from 'rn-perfect-sketch-canvas'; -import { StyleSheet, Button, View, Text, useColorScheme, Touchable } from 'react-native'; +import { StyleSheet, Button, View, Text, useColorScheme, Touchable, TouchableOpacity } from 'react-native'; import { SvgXml } from 'react-native-svg'; import Slider from '@react-native-community/slider' import { useSelector } from 'react-redux'; import { Kanji } from '../model/kanji'; -import { TouchableWithoutFeedback } from 'react-native-gesture-handler'; import { KanjiMapper } from '../model/kanjiMapper'; +import { Eye, EyeOff } from "react-native-feather"; + type DrawingCanvaProps = { backgroundImage: string; } @@ -24,6 +25,8 @@ const DrawingCanva = (props: DrawingCanvaProps) => { const [drawnStrokes, setDrawnStrokes] = useState(0); const selectedKanji = KanjiMapper.SerializedObjectToKanji(useSelector(state => state.kanjiReducer.selectedKanji)); + const [isVisible, setIsVisible] = useState(true); + useEffect(() => { fetchXml(); if (canvasRef.current) { @@ -44,7 +47,13 @@ const DrawingCanva = (props: DrawingCanvaProps) => { return ( - {selectedKanji && ( + + setIsVisible(!isVisible)}> + {isVisible ? () : + ()} + + + {selectedKanji && isVisible && ( { minimumTrackTintColor={"#FF5C5C"} /> {isCanvasReady && ( -