How to undo, clear strokes

[ductridev]

I just want to ask how can I clear or undo strokes ?

[ductridev]

my code

const CameraPreview = ({ navigation, route }) => {
const [draw, setDraw] = useState(true); const [strokes, setStrokes] = useState([]); const [strokeWidth, setStrokeWidth] = useState(4); <ExpoDraw strokes={strokes} containerStyle={{backgroundColor: 'rgba(0,0,0,0.01)'}} color={'#000000'} strokeWidth={strokeWidth} rewind={(undo) => {console.log(undo()); return (<MaterialCommunityIcons onPress={()=>{console.log("pressed");undo()}} name="undo" size={29} color="white" />)}} clear={(clear) => {console.log(clear()); ; return (<MaterialCommunityIcons onPress={()=>{console.log("pressed");clear()}} name="eraser" size={29} color="white" />)}} enabled={draw} onChangeStrokes={(strokes) => {setStrokes(strokes)}} /> }

[ductridev]

I have tried setStrokes([]) when onPress clear but it didn't work

[NxRoot]

You need to use a reference and call the clear or the rewind function.

import { useRef } from 'react';
import { StyleSheet, View, TouchableOpacity, Text } from 'react-native';
import ExpoDraw from 'expo-draw'

export default function DrawPanel() {

    const ref = useRef()

    const clear = () => ref.current.clear()
    const undo = () => ref.current.rewind()

    return (
        <View style={{ flex: 1 }}>
            <ExpoDraw
                ref={ref}
                containerStyle={{ backgroundColor: 'white' }}
                strokeWidth={2}
            />
            <View style={styles.actions}>
                <TouchableOpacity onPress={undo}>
                    <Text style={{ fontSize: 22 }}>UNDO</Text>
                </TouchableOpacity>
                <TouchableOpacity onPress={clear}>
                    <Text style={{ fontSize: 22 }}>CLEAR</Text>
                </TouchableOpacity>
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    actions: {
        position: "absolute", 
        bottom: 0, 
        left: 0, 
        right: 0, 
        display: "flex", 
        flexDirection: "row",
        justifyContent: "space-between",
        padding: 20, 
        gap: 20, 
    },
});