React Native navigation with react hook form

Question

In my React Native project I want to add edit, go back and save button in the header of my form screen. To manage my form, I use react-hook-form. The header come from react-navigation and I use the navigation.setOptions function to add my buttons. This work well for the edit or go back button but save button don't fire handleSubmit function provide by react-hook-form. If I put the same button in another place in my page, that work well.

const MemberScreen = (navigation: any) => {
const { control, handleSubmit, formState: { errors } } = useForm();
const [editMode, setEditMode] = useState(false);

useLayoutEffect(() => {
    let title = "";
    let headerRight: any;
    let headerLeft: any;
    if (editMode) {
        title = "edit form"            
        headerRight = () => (<TouchableOpacity onPress={() => { save() }}><MaterialCommunityIcons name="content-save" color={AppConst.primaryColor} size={32} style={styles.iconItem} /></TouchableOpacity>)
        headerLeft = () => (<TouchableOpacity onPress={() => { toggleEdit() }}><MaterialCommunityIcons name="close" color={AppConst.primaryColor} size={32} style={styles.iconItem} /></TouchableOpacity>)

    } else {
        headerRight = () => (<TouchableOpacity onPress={() => { toggleEdit() }}><MaterialCommunityIcons name="pencil" color={AppConst.primaryColor} size={32} style={styles.iconItem} /></TouchableOpacity>)
        headerLeft = () => headerLeftWithBack(navigation);
    }
    navigation.navigation.setOptions({ title: title, headerRight: headerRight, headerLeft: headerLeft });
}, [navigation, editMode])


const toggleEdit = () => {
    setEditMode(!editMode);
}

const save = () => {
    handleSubmit((data) => {
        onSubmit(data)
    })
}

const onSubmit = async (data: any) => {
    let body = { id: member.id, ...data }

    // ...
}

return // ...

}

Do you have any idea or solution to fix this problem ?

Answer 1

This fix my problem because i miss parentheses :

const save = () => {
handleSubmit((data) => {
    onSubmit(data)
})()

}