如何从 StackNavigator 提交 formik？

Question

I want to have Button which submit Formik Form inside of StackNavigator. Is there any good option to do it without losing performance and have my yup validation working? I managed to to it with passing state but app was running really slow and yup sadly stopped working well. Here is code of my componenet. I'll be glad if someone solved such an issue before. :)

import { Formik } from 'formik';
import React, { useState, useEffect } from 'react';
import { StatusBar, StyleSheet, TouchableOpacity, View } from 'react-native';
import * as Yup from 'yup';
import Button from '../../_layout/Button';
import Input from '../../_layout/Input';
import { box, color, font, typography, hitSlop } from '../../../assets/global';
import { CheckIcon } from '../../../assets/icons';
import { withNavigation } from 'react-navigation';
import PropTypes from 'prop-types';

const Note = ({ navigation }) => {
    const { textAreaContainer, textArea } = styles;

    const onSubmit = (values, actions) => {
        console.log(values);
        navigation.goBack();
    };

    const validationSchema = Yup.object().shape({
        header: Yup.string()
            .required('')
            .min(3, ''),
        text: Yup.string()
            .required('')
            .min(5, ''),
    });

    return (
        <Formik
            initialValues={{ header: '', text: '' }}
            onSubmit={onSubmit}
            validationSchema={validationSchema}
            validateOnChange={true}
        >
            {({
                handleChange,
                handleSubmit,
                handleBlur,
                values,
                errors,
                isValid,
                touched,
            }) => (
                <View style={textAreaContainer}>
                    <StatusBar barStyle="light-content" />
                    <Input
                        name="header"
                        onChangeText={handleChange('header')}
                        placeholder="Wprowadz tytuł"
                        type="outlined"
                        onBlur={handleBlur('header')}
                        containerStyle={{ marginBottom: 0 }}
                        value={values.header}
                        error={errors.header}
                        touched={touched.header}
                        displayTitle={false}
                    />
                    <Input
                        onChangeText={handleChange('text')}
                        placeholder="Wprowadź tekst"
                        type="outlined"
                        onBlur={handleBlur('text')}
                        style={textArea}
                        numberOfLines={10}
                        multiline={true}
                        value={values.text}
                        error={errors.text}
                        touched={touched.text}
                        displayTitle={false}
                    />

                    <Button title="test" onPress={handleSubmit} />
                </View>
            )}
        </Formik>
    );
};

Note.propTypes = {
    navigation: PropTypes.object.isRequired,
};

Note.navigationOptions = ({ navigation }) => ({
    headerTitle: 'Notatka',
    headerRight: (
        <TouchableOpacity
            onPress={() => {
                console.log('SUBMIT FORMIK HERE!!!!!!!!!!!!!!!!!!!');
            }}
            hitSlop={hitSlop()}
        >
            <CheckIcon
                style={{ marginRight: box }}
                width={25}
                height={25}
                stroke={color.white}
            />
        </TouchableOpacity>
    ),
});

export default withNavigation(Note);

const styles = StyleSheet.create({
    textAreaContainer: {
        padding: box,
    },
    textArea: {
        padding: box,
        marginBottom: 10,
        height: 150,
        textAlignVertical: 'top',
        ...typography(color.black, font.S),
        borderColor: color.lightGray,
        borderWidth: 1,
        borderRadius: 5,
    },
});

Answer 1

You can call functions from react-navigation header buttons as followed:

1. Create an effect that uses setParams from navigation. Define a function eg onPress in there you can define what every you want to run on button press.

 useEffect(() => {
    setParams({
      onPress: () => {
        validateForm(); // example
        submitForm(); // example
      },
    });
  }, []);

2. You need to use the onPress function within your header

Note.navigationOptions = ({ navigation }) => ({
    headerTitle: 'Notatka',
    headerRight: (
        <TouchableOpacity
            onPress={() => {
              const onPress = navigation.getParam("onPress"); // get param onPress
              if (onPress) onPress();
            }}
            hitSlop={hitSlop()}
        >
            <CheckIcon
                style={{ marginRight: box }}
                width={25}
                height={25}
                stroke={color.white}
            />
        </TouchableOpacity>
    ),
});