I have created a separate component in which it will render a card with form inside it. I used Formik API to handle it. This is my code.

function ParentComponent(){
    return (
        <View>
            <ChildComponent someDataFromApi={details}/>
        </View
    )
}

import { Formik } from "formik";
import * as Yup from "yup";

function ChildComponent(){
const someSchema={
    firstName: Yup.string().required().label("First Name"),
    lastName: Yup.string().required().label("Last Name"),
}
return (
   <Formik
       initialValues={first_name: details.first_name, last_name: details.last_name, }
       validationSchema={someSchema}
       onSubmit={(values) => console.log(values)}
   >
       <Field label={"First Name"} name="firstName">
       <Field label={"Last Name"} name="lastName">
   </Formik>
}

I don't know why it doesn't show the initialValues for the fields, I tried console logging it and it returns correct values means it already catches the data from initialValues, it just doesn't show it in the field.

CodePudding user response：

The initialValues are passed via the props as provided in the documentation. Here is a minimal working example.

import React from 'react';
import { Text, View, StyleSheet, SafeAreaView } from 'react-native';

import { Formik, Field } from "formik";

function ParentComponent() {
    return (
        <View>
            <ChildComponent someDataFromApi={{details: {
              first_name: "Hello",
              last_name: "World"
            }}}/>
        </View>
    )
}

function ChildComponent(props) {
    const details = props.someDataFromApi

   return <View>
        <Formik
            initialValues={details}
            onSubmit={() => {}}
        >
          {(props) => {
              return <View>
                <Field
                    value={props.values.details.first_name}
                />
              </View>
          }}
        </Formik>
      </View>
}


export default function App() {
  return (
    <View style={{margin: 20}}>
      <ParentComponent></ParentComponent>
    </View>
  );
}