How to make a button for a photo when I click and record video when I hold it

Question

I'm trying to make only one button for photos and video recording:

• when I press it once it will take a picture

• when I hold it, after a while the video is recording

Button in View:

<TouchableOpacity
    onPressIn={() => onPressInButton()}
    onPressOut={() => onPressOutButton()}
</TouchableOpacity>

Code for button:

const insidePressInButton = async () => {
    if (!pressOut) {
        setRecordingVideo(true)
        console.log('START RECORDING VIDEO')
    }
    else {
        await takePicture()
        console.log('NOT STARTED RECORDING -> PICTURE')
    }
}

let pressOut = false
const onPressInButton = async () => {
    pressOut = false
    setTimeout(() => {
        insidePressInButton()
    }, 1)
}

const onPressOutButton = async () => {
    pressOut = true
    if (recordingVideo) {
        setRecordingVideo(false)
        console.log('STOP RECORDING VIDEO')
    }
}

In setTimeout() I set the time to only 1 (very little) and the wait is long (I think this is React's problem with re-rendering)

Theoretically, this solution works, but I have one big problem

When I click once and want a picture, I have to wait more than a second

He would like to do so that the picture is taken immediately and when I hold the button for a moment and keep holding it is recording the video

Answer 1

You can try to use onLongPress(doc) for video record and set delay via delayLongPress (doc). As a result if you will press less than 200, it's picture in other case is video recording

<TouchableOpacity
    onPress={...}
    onLongPress={...}
    delayLongPress={200}
</TouchableOpacity>